How I redesigned Flo cycle tracking iOS app in Figma

Redesign of a popular cycle tracking app Flo

Hi! I am continuing my journey to become a UX designer and as I am moving forward, I start noticing things around me from a perspective of a UX designer.

I have decided to take an app I have been using for over a year and try redesigning it and suggesting some solutions to the problems I have noticed.

Disclaimer: This is not a full case study, it is my first attempt at the design process in order to learn and get feedback :)

About the app

Flo is a period and cycle tracking app that allows you to learn more about your body and how your cycle can affect everything from your mood to your energy levels.

I have personally been using it for over a year and I know all nooks and crannies of the app.

👍Things I love about the app from a user perspective:

1. I love the overall look of the app, the color palate is very feminine and suits the purpose of the app

2. The app provides you with information about your cycles and predicts your next period

3. You can get additional information on your well-being and some intimate topics.

👎 Some flaws I have found:

1. The home screen is too cluttered with images and articles that take up a lot of space. Sometimes it distracts and I forget the main reason why I opened the app - to log in to my period

2. The navigation is not always clear. For example, the calendar is the most important feature for me and I see an icon in the bottom corner but when I press it, it shows me that the calendar is actually in the top corner (why?)

3. A lot of pop-up windows and paywalls and it can get quite confusing to navigate and understand where you are.

4. A lot of the basic features like seeing your current state and hormone levels are getting locked and only available in the premium version even though they used to be available for everyone. Every update seems to take one free feature away.

Emphasize and do your research

The next step in my redesign project was to find out if other people had the same problem. So first thing I read and analyzed reviews to see what people were saying about the app.

This is what I found:

1. Even though the overall rating is quite high, a lot of recent reviewers are unhappy with the app’s new policy to aggressively push their premium version.

2. Some of the content they are providing is distracting users from the main purpose of the app.

   

I love how this quote I found in the review section summarizes the experience of using the app:

I’m hormonal and short tempered. I just want to log my period and get back to feeling misarable. I don’t want to figure out where the hidden close button is just so I can get into the app

The next step: find out users’ needs

As the second step in my research phase, I decided to find out more about users’ needs and I used one of the most common methods of research - a survey.

I chose a survey because it is the faster and easiest way to find out about your users’ needs and pain points. So I used the resources available to me at the moment - I turned to friends. I asked all my female friends and their friends to complete a survey about cycle tracking apps.

These are some of the questions I included:

1. What is your main goal when using a cycle tracking app?

2. Would you like to see more information (posts, articles) on women's bodies and sexuality in the app?

3. What kind of design and colors do you prefer for this kind of app?

4. Do you want any additional features like tracking sleep or exercise, setting reminders to take pills, and so on? 

As a result, I got 50 responses and useful data to use for my redesign project and it was more than I could ask for.

Findings important for the redesign:

• 70% of participants admitted that the main goal of using a period app is to track and predict their cycles.

  Conclusion: I will make sure that it is very easy to log in cycles and get predictions about the next one

• 50% of participants would like to learn more about hormones and how their bodies work.

  Conclusion: I will include additional articles and information but in a way that doesn’t distract users from the main goal.

• 63% of participants prefer gentle pastel colors for this kind of apps

  Conclusion: I will choose the color theme from pastel colors and make sure the aesthetics match the purpose of the app.

Suggested solutions

Since it was my first time using Figma for designing and prototyping I was learning as I go and doing a lot of things based on the combination of common sense and intuition.

1. Home page

I decluttered the Home page and put the most important information about your cycle day and predictions in the center of the screen. I also added Your cycles, Calendar, and Articles below in the main navigation.

2. Calendar

I have removed the double pop-up window to make the navigation easier and removed the clutter to make it easier to just log in your period without getting distracted.

3. Additional info

I added a pop-up window with information about the current state of the body and hormone levels as it is an important part of understanding your cycle whereas in the original app this information is locked for the premium version.

Final Design

This was a challenging project for a beginner but it taught me so much and made me even more eager to continue this journey.

Here are the top things I’ve learned while redesigning the Flo app:

1. Research and identifying users’ pain points is crucial to any design

2. Functionality always comes first and the look and aesthetics come later

3. I have learned that a good plugin for icons can save you a lot of time

4. I realized how much work goes into every element of the design and how much more I want to learn

Getting feedback from a senior designer

I know that getting feedback is an irreplaceable part of any design and I wanted an opinion of a professional.

I reached out to a Product Designer with 5 years of experience and showed her my first project and received invaluable feedback and suggestions on how to improve my design

This is the main point of the feedback I have got:

1. I should spend some time on a problem statement and pain point and document my thought process

2. Next time I should start with visualizing the whole project and make an informational architecture to make navigation clear and simple

3. I should be cautious with "busy" backgrounds in UI, sometimes they are appropriate (more likely on websites and landing pages) but most times in software and apps they just distract from the goal someone is trying to achieve.

---

Coming next

I am planning to do more designs and I will try a web design next

Follow me on Twitter

Follow me on Twitter.

Subscribe