PRODUCT and visual DESIGN
Flo app for Wear OS
Flo is the #1 women's health app worldwide. And the
app for Wear OS (powered by Google) is a great extension to the experience of users with Android smartwatches.
Background & Goal
There was no Flo companion watch app for Android smartphones for an extended period, and when it came to its design and development, we had to start from scratch, and there was a reason. An existing watch app for Apple Watch couldn’t be a reference since it was designed a while ago, but the core mobile app has evolved. Lots of new features appeared, and lots of new knowledge we gained from our users. So we started from the beginning.

Our main goal was to create and launch the Flo app for Wear OS 3.0 with support of main modes and users’ goals to fulfil the gap in user experience via the most popular touchpoints.
Team
There was a team of three on the project: me as a Product Designer, Product Manager and UX researcher.
Approach
The work on the project was based on the Double Diamond approach starting with the Discovery phase to understand existing users' behaviour, needs, and problems, going through ideation, scenarios and users' jobs mapping, to user testing and finalizing design for development.
Discover
During this phase, we kicked off the project with the Feature canvas, conducted user research to understand an experience around wearable devices, mapped core user jobs for existing Flo users, and ideated on possible solutions.
Define
At this stage, we deep-dived into existing Information Architecture principles for Wear OS, and mapped key user scenarios based on that.
Develop
Finally, it's time to build and test the prototype. We had three main goals for the upcoming user testing:
  • Test overall initial reaction to the concept
  • Test perception of certain features and their value
  • Test clarity of main user scenarios: check where I am in my cycle, what to expect next, how to log my period, how to log my symptoms, etc
Fun fact: when we were creating this prototype, there were no convenient ways to test the design inside the smartwatch, so we decided to test it as a regular mobile app. And that worked well!

Results & updates
The overall impression of the layout is great; there is no evidence of any significant barriers to using it as it is, but several UX issues hinder the experience.

After prioritization activities (considering users’ feedback, time, value, and effort), we devised a structure for the first release that covers the most significant and easy-to-build features.
Design
Since the Wear OS is powered by Google, it's compatible with the Android ecosystem. With some minor tweaks, that allowed us to reuse components and styles from the existing Design System used on mobile devices. The only essential difference was in using dark mode styles only because of watch design guidelines.
Sign-in flow
The main challenge was that Android smartwatches represent a different client from a technical standpoint. So we had to consider all possible ways to sign in to make the flow as smooth as possible. As a result, we designed a flow that covers cases from auto-pairing to backup pairings via sign-in code and others.
"Circle" states
The circle in Flo is the main part of an overall experience which provides glanceable info on where users are in their menstrual cycle. It was essential to preserve the circle’s states and bring a similar experience to the watch.
Logging period
The logging period is an essential functionality for the Flo experience. For the watch app, we designed the feature according to the watch IA principles and key user scenario: I'm using a smartwatch as a quick way to log what's happening to me at the moment. That means the watch user can log a period only for today. Logging for the past appeared to be more "nice-to-have" than "must-have" functionality.
Predictions
The Predictions feature provides information on “What to expect in my cycle” based on the user’s current cycle day. We had similar functionality in the mobile app but had to adapt it according to users’ contexts using smartwatches.

To design prediction insights, we mapped a timeline with the key cycle phases and events, put possible users' app settings/modes, and created a unique logic on ordering, prioritization, and wording suitable for the users' context.
Pregnancy mode
While designing the first version of the watch app, our primary focus was on Track and TTC (trying to conceive) modes. However, we wanted to make the first version support all modes available in the app, even if it will have limited functionality.

So the pregnancy mode functionality covers primary users’ jobs such as “Know my pregnancy week” and “Know my due date.”
Complications
A complication is any feature in a watch face that is displayed in addition to time — for example, a battery indicator, weather condition, calendar, etc.

For the first release, we started with basic functionality covering the essential need of “Where am I in my cycle?”: display the current cycle day or pregnancy week without the support of color coding for different cycle phases and states.
Tiles
Tiles provide easy access to the information and actions users need to get things done in a matter of seconds. Tiles are available with a simple swipe from the watch face.

Tiles are designed to display critical content. In our case, the first tile we released focuses on two primary users’ jobs: “Where am I in my cycle?” and “How to log my period.”
Outcomes
The watch app was successfully launched on time, which got us featured by Google. Also, launching an Android watch app resulted in a noticeable improvement in Android users’ experience, followed by new endeavors to provide more value for our users.
2021
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website