Visualizing Fertility Information
I joined Glow in the summer of 2014 when it just turned one year old and had been the lead designer for Glow app’s [iOS and Android design until Fall 2016, for a little bit over two years. Besides product design, I also worked on a lot of graphic design for marketing purpose.
In two years time Glow evolved from a fertility calendar that helps women conceive, into a powerful tool for tracking and understanding women’s health and a vibrant community to talk about sex, health, and life. I designed several important updates including the Advanced Cycle Chart and Glow Premium as well as helped growing Glow’s design team.
Glow is the first app launched by Glow Inc. and has the largest user base. Strategically it is also the most important app to the company because it is the top funnel that brings users to our pregnancy tracker Glow Nurture and baby tracker Glow Baby. At the same time, fertility treatments is an enormous market so it also has a lot of monetization potential.
As of April 2017, it has 18k reviews at five stars in App Store & over 47k reviews at 4.6 stars and more than 1 million downloads in Google Play Store.
Advanced Cycle Chart
Basal body temperature (BBT) is the lowest body temperature attained during rest (usually during sleep). Ovulation causes an increase of one-half to one degree Fahrenheit in BBT for women, so many women monitor of BBT along with other signs such as cervical mucus to estimate the day of ovulation. Glow launched a clean and simple BBT chart at a very early version. But since then we kept receiving user feedbacks on how the chart can be improved. We also have a community group called Chart Analysis where users share their BBT charts and ask for help in analyzing them. But many of the shared charts are from our competitors Fertility Friend and Kindara.
The main problems with the previous chart were:
- Each individual's BBT pattern is unique, so it only starts to make sense when one analyzes it against her own past cycle. It is important to see each cycle on one screen, but the previous chart only showed a continuous graph and user had to scroll in order to see the full cycle.
- The BBT’s fluctuation could be influenced by many factors such as alcohol and fever. It would be very helpful to see other data input from that day, but the previous chart only showed information of one selected day at a time. Users had to scroll to select and view information from different days.
What’s more, powerful BBT charts are usually not offered for free. As we were trying to monetize Glow, revamping the BBT chart and charging for advanced features would both satisfy our users’ demand and our pocket.
While “less is more” has become a design principle, we had to break it while designing the BBT chart because more information helps user better decipher their body. BBT tracking requires serious time and money commitment because one needs to buy a thermometer, wake up early at the same time every day, measure and record the temperature. Users who need this feature are already very committed expert users, some of whom even make their own Excel spreadsheet and chart sets.
The number of things that may influence a woman’s ovulation day is huge because our bodies are intricate systems that cannot be reduced to single cause-effect relationships. The basics data points for the BBT chart include body temperature, period days, fertile window, cycle day number (CD), Day Past Ovulation(DPO) and coverline. Things that can potentially influence one’s body temperature or ovulation day include sex, cervical mucus, ovulation/pregnancy test, cervical position, sleep duration, smoke, alcohol intake, stress level, physical symptoms (21 options in the app) and moods (19 options in the app). That is 49 items in total. The challenge was to find a readable, scalable and interactive way to display these data in one chart.
The legend of the final chart gives you a good sense of all possible information it may contain. I also designed the iconography for Cervical Mucus and Sex Related Logs. All icons must be clear and readable at 10x10px.
Due to the complexity of this feature and the time limit, the product team collaborated very closely with the engineering team. The spec and design were discussed many times with the engineering team before all the details were decided. It could be said that the feature was designed while it was engineered. As the only designer responsible for this project, I communicate multiple times with the engineers every day. During the process, the engineering team also delivered multiple beta-builds instead of just a final one so that I can play with it and give immediate feedback.
By default, Advanced Cycle Chart shows the monthly overview, but users can zoom in to see the details better.
Because of limited space we show all logs as icons. Some are more straightforward such as using colors to show severity, while others can be abstract such as using different icons for each cervical mucus texture. Therefore for the more abstract ones we allow users to tap on the icon to see a little popover explanation.
Advanced Cycle Chart was a huge success for both user engagement and monetization effort:
- There is a 13% increase in the number of users who log BBT.
- 32% of Glow Premium subscriptions were made from CTAs within Advanced Cycle Chart feature as it’s included in Glow Premium subscription service.
- With a direct share-to-community button, the majority charts shared in Chart Analysis group now come from our app instead of competitor apps.
I also helped make infographics for the marketing purpose occasionally, which I enjoyed doing a lot.