Mobile App Visual Design — UX Case Study
Concept Project: Task Tracking App Design — Part 2
Brief
This 1 week solo project was to work through the visual design process on the mobile app that I had designed in my 1st week at GA. To briefly recap on that project, I used research methods to identify a problem statement and design a solution to help the user achieve her goals.
Problem Statement
Holly is a young professional who is always on the go. She struggles to identify routines in her very busy schedule, resulting in bad habits forming and poor organisation.
Solution
Holly needs a way to log her regular tasks in an app, highlighting which ones were achieved and why other were not.
Outcome
She can see what tasks are going well and identify the key areas that need focusing on to help build a manageable routine.
The final deliverable was a low fidelity clickable prototype of a mobile task tracking application. Now that the functionality was taking shape, the next step was to develop the brand and visual design elements of the app to further the user’s experience.
Brand Identity
When thinking about the branding of the app it was useful to do some word association to help identify some of the main qualities that we needed to portray in the design.
From these qualities, it was great to set some parameters to clarify where the brand should sit, identifying the semantic differentials helped to achieve this:
Honest — but not judgemental
Friendly — but not overbearing
Motivational — but not patronising
Organised — but not regimented
Informative — but not technical
Pull all of these discoveries together and we have a brand voice description:
We care about the goals that people want to achieve, and believe that building healthy routines inspires productivity.
Our friendly approach to motivation and support is honest and informative, without being overbearing or judgemental.
Mood Board and Design Research
This mood board not only represents the lifestyle of the brand, but also what the user strives to achieve. Active, organised, friendly, positive, with calming and reassuring blue/teal colours, and some uplifting yellow to inspire and energise.
I also looked at existing apps that are used to track various activities, from fitness through to period trackers. Some of which our original user, Holly, was already using and enjoyed. It was interesting to see how they were using colour and keeping it simple. They were mostly about functionality, information gathering, and ease of use, rather than large blocks imagery.
Style Guide
The colour palette was based around the two main colours that presented themselves from the mood board, teal tones and yellow. Montserrat font was selected because it is clear, clean, and easy to read, which is in keeping with the brand personality.
Low to Mid Fidelity Wireframes
Before jumping in with adding the colours above, the low fidelity clickable prototype needed to be digitised in Sketch to create a Mid-Fidelity version. This was to make sure that the functionality was solid and gather any additional insights that may help when placing the colours in the Hi-Fidelity prototype.
After a few rounds of testing in Mid-fidelity, it was clear that a few more iterations were needed to ensure that the app flow was clear and simple to use.
Navigation
The navigation bar needed to be moved to the bottom of the screen, as being closer to the users thumbs was a lot quicker and easier to use. This is key for an app where an activity needs to be logged quickly when on the go. I also added labels to to the nav bar to increase the accessibility of the design.
Functionality
It was also discovered that the number of clicks could be reduced to streamline the functionality.
- The ‘Done’ button could be achieved by simply going back to ‘Tasks’ on the existing Navigation bar.
- Swiping left through the stats would also smooth the experience of reviewing the stats.
Here you can see these iterations from the original low-fidelity on the left, mid-fidelity in the middle, and the high fidelity on the right.
This valuable feedback helped to streamline the app even further when moving on to producing the Hi-Fidelity version of the prototype for testing.
Hi-Fidelity Wireframes
In addition to the iterations, brand colours and typography were added to the Mid-Fidelity to create a Hi-Fidelity mock up prototype. Once complete it was time to test it out the experience and get feedback. Here are the key findings from the testing;
Fonts
The use of the font Montserrat throughout was fine on the heading text as it, however when it came to the smaller body text, it needed to be a little bit more clearer and easter to read. Therefore SF Pro Text was selected for the body text.
Colour Palette
It was unclear and confusing to the user when it came to logging the reason why they did not complete their task for analysis (see screen three in the image below). Why were the button slightly different colours?
The intension of the button colours was to reflect them in the statistics so they could analyse the results more easily. However, only having Teal, Yellow, and grey in the palette made everything throughout the app look too similar.
It appears the act of trying to keep it simple actually lead to confusion when thinking about the task at hand. As you can see below, although when all laid out side by side they look nice and consistent, when looking at the pages individually that similarity was making the functionality of the different colours unclear.
To remedy this, it was decided to try adding more colours to help represent the statistic more clearly, and pull them away from the primary branding colour a bit more so they stand out. To compliment the primary Teal brand colour (07838F) the following colours were added to the palette:
This helped to define the purpose of the screens more clearly.
- The main task screen is in the primary brand colour.
- The yellow/grey colours when selecting whether you achieved the task are again reflected in the high level calendar overview in the stats.
- The button colours when logging the reason are also represented in the more detailed break down in the stats pie chart.
The addition of more statistics to analyse is most definitely in the road map going forward, as this is key to the success of the user building their routines. To kick start that, as you can see above, the percentage breakdown was also added to the calendar, which was well received by users.
Style Sheet Development
As a result of the testing and the iterations, the style guide has developed since the beginning of the project, here is the most up to date version also showing the icons and other components used:
