How we evolved and enriched the main screen of the Flo app. Part 1 — My daily insights
Article by Alina Shipulina, Product Designer at Flo Health Inc.
Home screen is the face of the app, a preview of the diversity of features. It’s where users start their journey. It gives the first impression of the product and usually addresses the key user needs. In this article, I’ll talk about the process of how we managed to bring our rich and insightful content closer to our users and significantly improved the main screen experience.
In 2019, the key and only functions presented on the main screen at Flo were:
- Logging period
- Logging symptoms
- Telling users where they are in their cycle
- Predicting future period and fertile days
We saw from data that users spent a lot of time on the main screen and calendar, but we couldn’t say the same about the tab “Insights,” where the content library with tons of articles and courses was located. We understood that we lacked the opportunity to show the majority of users the richness of our content. A lot of users just visited the main screen to see where they were in their cycle and when to expect their next period and left the app.
New content format
At the end of 2019, our Media team, who was responsible for all kinds of content in the app, successfully launched a new content format — stories, which already performed well and demonstrated great potential from the engagement perspective, suggesting quick and snackable daily content to users.
At the time, this format was already one of the most user-favorite features picked up in thousands of apps in different domains: social media, fintech, health & fitness, meditation, food delivery, taxi apps, and many more. Mobile users are used to bite-sized content that is easy to digest and fits well in their “on-the-go” lifestyles.
Due to this addition of Flo’s stories, our users started to spend more time on the “Insights” tab. Stories helped them feel knowledgeable in a concise and fun way, and users found the content informative without being too scientific. Cute and appealing graphics supported the information and made it easy to grasp.
Opportunity
We instantly started to think of ways we could outstretch the content closer to the user. We opted to add it to the main screen with the aim to increase engagement by providing instant and easily accessible pieces of personalized content based on the user’s logged data.
It’s important to mention the design principles we defined, which guided further explorations:
The UX of the key scenarios shouldn’t get worse
The main scenarios that users perform in the app are logging periods and symptoms, as well as interacting with the main circle and calendar to see future cycle predictions. Users shouldn’t have any obstacles with executing these scenarios; the new alterations shouldn’t be disruptive to existing habits.
Reachability
It’s important that users can explicitly see how what they log impacts the content they get. For example, when users logged “headache,” they expected to see how it influenced their personalized insights right away.
Simplicity
It’s important to keep the content and elements on the main screen clean and concise and avoid a big cognitive load.
Design exploration
We explored different options for positioning the stories on the main screen, and after many discussions with the product manager, UX researcher, and other cross-functional team members, we defined 2 directions for the user testing, providing 2 different mechanics: horizontal scroll and vertical scroll.
Both layouts did not take attention away from the main circle, and at the same time, users noticed the insights instantly. The main wow came when users got the insight after logging—it felt like you had a personal doctor that was giving you tips on how to relieve whatever pain you had.
We decided to go with the horizontal scroll as it seemed a more natural and familiar pattern for users in terms of interacting with stories and worked well in cohesion with logging symptoms functionality.
Results
The section with stories has been successfully added to the main screen, which resulted in an increase in app engagement. It was a noticeable improvement of the main screen experience, which was followed by new endeavors with the goal of providing more value for our users. The second part of the article is here.
If you are interested in creating user-focused design experiences in Flo, you may check our career page https://flo.health/careers.
