Case Study: Mood tracking app — main screen redesign
‘Log’ screen redesign to help users create a habit of tracking and logging their mood on a daily basis and to increase the ‘App Session and Log/Memo Saved’ conversion rate from 40% to 80%.
Today I am going to talk about my process of redesigning the main screen of the mood and hormone cycle tracking app. This was a part of the design assignment during the interviewing process for a femtech startup.
This post could be useful for founders and entrepreneurs wanting to launch or improve their product, and digital/product designers wanting to have a glimpse into other designer’s thinking process.
Defining the problem
Only 40% of the users log their information on a daily basis
Potential reason
After downloading and testing the app, I had a feeling that the current log screen had too many options and scales. Having to fill them in felt tedious, it also felt like a hard task evaluating how one feels about so many things on a daily basis. Tabs and “numerical” questionnaires can be overwhelming and users are way too busy with their lives, thus the logging should only take a few seconds.
Some users didn’t understand how the scales in the ‘World’ tab worked, whilst others wanted to be able to add symptoms or major events to the calendar, such as, taking a morning after pill. Many users raised their concerns about not being able to edit the logs of the previous day.
The solution
UX improvements
The very first solution that I suggested was having a simple questionnaire that would have no more than three options (or no more than three options for each tab) and the scale would be measured from one spectrum of the state to another, i.e. fatigued→ energetic; with a pointer placed in the centre, showing it as a neutral state when untouched.
Having a pointer in the centre of the scale could also help avoid the friction of having to evaluate how one feels on a scale from one to six (low/high ‘ticks’ in the current app) and would help users to have a nicer flow in the graph of their stats if they skip a day or two, placing the positive evaluations above the zero point, the negative – below in the ‘Results’ screen, thus making it easier to read the graph curve at a glance.
I thought it was essential to have the date clearly stated at the top of the screen and the toggles left in the same place in the scales, should the user open the ‘Log’ screen a few times a day, thus creating the feeling of the input data being successfully stored within the app. Right now the app shows the pointers at the far left (untouched) each time the user opens the ‘Log’ screen.
In addition to the above, I recommended having a reminder notification with a friendly/gentle message about the importance of selfcare and how logging their data in will take just a few seconds. This notification should pop up on the screen once a day (probably, best to see the stats when the majority of the users are logging and setting the notification to pop up at that time or just a few minutes before) and it should be easily to find it and change the time of the notification or turn it off within the app.
Visual design
Colour scheme
I also recommended adding a couple of contrasting/complimentary colours that would look more cheerful than the current ones and set up a more pleasant mood for the users. Below is a colour scheme I generated on Coolors.co based on the company’s teal brand colour.
User interface
I used the colour scheme with the complimentary colours of the teal brand colour, kept the layout minimal and tried out gradients and the water ripples effect which I noticed was used in the current App Store version app splash/load screen.
I hid the ‘Edit/AddCategories’ button into a small cog icon, as the button had been grabbing too much attention and I had clicked it a few times previously instead of the ‘Save’ button.
I got rid of the ‘Cancel’ button and replaced it with the cross icon to save space and to put the main CTA in the spotlight. On the tap of the ‘+’ icon, a page with the list of symptoms should pop up, where the symptoms would be displayed as icons and small tooltip text under the icons.
Visual design — variation
I then tried playing around with some mesh gradients from LStore, those, in my opinion, looked feminine and a bit dreamy, which I thought would work great with the female audience.
Testing
Should this solution be implemented as an AB testing, I would’ve recommended testing it on the new users to see if this layout had felt organic and pleasant. Had there been an increase in conversion rate, I would have then recommended updating the layout for the existing users too.
