Tanja Kultala
JENT
UX/UI designer,
Front-end developer
Duration
January-May 2021
JENT is mood survey mobile application prototype. It was a client project which goal was to mitigate bullying by creating anti-bullying application. The objective of our project was to develop functional prototype of the application for further development. Our project team had quite free hands what comes to the features and the design of the application, as long as the application meets the requirement of mitigating bullying.
​
The project developed paper prototypes based on the ideas of the project team. The display prototype made with Figma followed the chosen paper prototype idea and aimed to create a more specific and stronger picture of the content and technical scale of the final product together with the design documentation prepared. The final functional prototype was the main output of the project.
Client
Tools
Assignment
Objective was to create an interactive mobile application prototype based on three main pillars:
-
The application creates a positive feeling for the victim of bullying
-
The application creates a positive atmosphere for a defined group of students
-
The app turns a bully into a friend
The purpose of the application is to act as an anti-bullying tool.
​
The client did not set binding functional requirements for the project and gave free hands to the design of the application, as long as the main pillars mentioned before are taken into account. The minimum requirement for the end result of the project is a functional prototype for further development. The application had to be developed using the principles of open-source code.
Brainstroming & paper prototyping
Since we did not have any binding functional requirements for the application and we had free hands for the design of the application, we started our project with brainstorming some possible application ideas and functionalities to achieve the three main pillars mentioned before. We came up with 10 possible ideas and from those 10 ideas we chose 8 to make quick paper prototypes to show client. Client then chose prototypes and functionalities they liked most and then we created new idea and prototype based on the feedback we received.
​
Our final idea, accepted by the client, was combination of two ideas, giving us the current version of mood survey mobile application. The main features of the application are as follow:
-
Creating a mood survey (questions, activity suggestions)
-
Sharing the mood survey with users in the same network
-
Answering the mood survey with emoji, voting the activity
-
Examining the mood survey results and voting results together
Design
When we had our final idea that was accepted by the client, we started our design process. This included more paper prototypes (mainly for voting feature of the application), UI mockups, UI Navigation diagram, class diagrams, Activity diagram, Use case diagram and Sequence diagram. In this phase I made paper prototypes, helped with UI mockups and made the UI navigation diagram, which you can see below.
.png)
Figma prototypes
After the design phase it was time for me to start with the Figma prototype. The first version was made based on the UI mockups created on the design phase. I was not too happy with the colors or overall look of the UI at this point, but we just had to have something to show to client, so that they see the idea we are going for. Below you can see pictures of first version of the JENT figma prototype.
The first version of Figma prototype was then shown to the client and based on the feedback we made some changes. I also made some changes to the colorworld and overall look of the app.
Final design
Here is the final figma prototype of the application. You can test it out below.
Functional Prototype
Based on the design, we created functional mobile application prototype on Android. In this phase we had front-end developer (me), back-end developer and one team member who did a little bit both, but mainly back-end developing. We used Visual Studio (2019) Community Edition for application development and Git for version control. Programming language was C# and XAML was used as user-interface language.
Testing & evaluation
The prototype was tested in different phases of the development process by the project team and the final version was first tested by the project team as well. We fixed some bugs based on our testing sessions. Finally, the application was tested and evaluated by the client. Based on the feedback we received from the client, we made some small modifications. Main issues the client pointed out were as follows:
-
missing desktop icon,
-
The bars used for navigation are a bit inconspicuous,
-
user cannot use special characters (,.*”etc.) when naming the survey.
​
We fixed missing icon and the navigation bar issue, but the fact that special characters cannot be used in naming the survey was intentional and it is not going to be fixed in this version of prototype.
Project success
Project was successful and the project was completed on schedule. The resource budget was not exceeded either. We achieved the requirements the client had. We managed to develop a functional prototype for further development as required. Client required that the application would mitigate the bullying and the client stated that the application achieves the requirement.
​
During the project there was not as much time for the UI design as I hoped, but after all, the goal was to make functional prototype and the demonstration of the functionalities of the application were in the center during the project, do good lookingn UI was not that important this time. At the moment the UI is really simple, and it is fine, but I also think it might be a little bit boring and I am not big fan of the yellow being the main color of the app. But the client was happy with the end-result of the project, which is most important.