Image for post
Image for post

Case Study: Moods Tracking App Main Screen Re-Design

The goal of this assignment was to redesign the ‘Log’ screen in order to help the users create a habit of logging on a daily basis and increasing the ‘App Session and Log/Memo Saved’ conversion rate from 40% to 80%.

Lena Kudryavtseva
Jun 1, 2019 · 5 min read

Today I am going to talk about my process of re-designing the main screen of the moods 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 another 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.

Image for post
Image for post
Current AppStore App Version ‘Log’ Screen

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.

Image for post
Image for post
Current AppStore App Reviews

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.

Image for post
Image for post
‘Log’ Screen UX Explorations

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.

Image for post
Image for post

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.

Image for post
Image for post
UI Exploration Phase
Image for post
Image for post
Final visual solution with multiple log pages

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.

Image for post
Image for post

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.

Quick Design

Find top tutorials & courses to learn UI, UX, wireframing…

Lena Kudryavtseva

Written by

Hi! 👋 I am a Product Designer from Estonia. I live and work in London helping businesses achieve success through intuitive user-centred design. www.kuld.design

Quick Design

Find top tutorials & courses to learn UI, UX, wireframing, design, graphic design, mobile design, web design, product Design, logo design, design thinking, design tools, Sketch, Figma, Photoshop, Illustrator, Flinto, After Effects, Axure RP, InDesign, Farmer JS, 3D design & more

Lena Kudryavtseva

Written by

Hi! 👋 I am a Product Designer from Estonia. I live and work in London helping businesses achieve success through intuitive user-centred design. www.kuld.design

Quick Design

Find top tutorials & courses to learn UI, UX, wireframing, design, graphic design, mobile design, web design, product Design, logo design, design thinking, design tools, Sketch, Figma, Photoshop, Illustrator, Flinto, After Effects, Axure RP, InDesign, Farmer JS, 3D design & more

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store