Embedded Files
A redesign of the mobile app OvaGraph to revitalize the visual design, and create a more enjoyable user experience by eliminating pain points
Overview
Opportunity
OvaGraph is the official tracking app for one of the most popular Fertility Awareness Method (FAM) books, Taking Charge of Your Fertility, by Toni Weschler. FAM is an increasingly popular method of natural birth control. According to the World Health Organization, studies have shown this natural birth control method has doubled in popularity in only a matter of five years. OvaGraph has a clear demand, for women looking to find a natural alternative to hormonal birth control, to women attempting to conceive, as well as women learning to overcome their PCOS. While the current product has many capabilities, it can appear overwhelming to those who only use specific features. OvaGraph appears outdated, visually unappealing and has many reviews reflecting it's clumsiness, and lack of user friendliness. As an app that is intended to be used daily, it could benefit greatly from a redesign to promote current user satisfaction, as well as attract new users.
Goal
Update an outdated and cumbersome product, to promote a more enjoyable and successful user experience
Role
UX Designer and Researcher
Design Process
Design Process
Personas
Persona Creation
Three personas were created based off of user feedback in the iOS App Store. A combination of positive, negative and neutral reviews provided insight as to how current users feel about the OvaGraph experience. Many express how much they value the idea of the product, but struggle with it's design and functionality. Women use this app to prevent pregnancy, conceive, and many wish it had more tools to balance hormones and promote an understanding of their cycles.
Sierra, Natural Birth Control
Goal: Manage and understand cycle in a way to track fertility and prevent pregnancy
Problems:
Current homepage is confusing
Feels the app is only geared towards those trying to conceive
Current app lacks a calendar view option
Mandi, Wishing to Conceive
Goal: Track ovulation and fertility cues to recognize best time to attempt conception
Problems:
Chart feature is glitchy and icons are unlabeled
Confusing FAQ section
Need more guidance and tips on achieving pregnancy
Riley, Manage PCOS
Goal: Balance hormones and control PCOS symptoms to live a pain free life
Problems:
Lack of support on how to balance hormones
Wish app was more customized to my goal
Screen to track daily info is overwhelming
Problem Definition
Focusing on Key Usability Issues
The usability research I conducted regarding user paint points helped to generate a lot of design ideas to better support the user's experience. Overall, the frustrations and usability issues were very similar amongst all users. The main user pain points are below:
Outdated and visually unappealing
Confusion on how and where to input daily information
Slow and cumbersome navigation
Too many steps to complete one task
User Flow
Imagining the User Experience
Keeping in mind the personas, I created three user flow diagrams of three main tasks. This process aided in planning what the interface needed to better support each user.
Ideation
Sketches
I began sketching design layout concepts, while keeping in mind the tools the current app offers. I wondered how the homepage layout could include many user desired features, without becoming overwhelming. My main goal was to create visually appealing screens, while still providing all necessary tools and more to ensure all user needs are met.
Wireframe
Low-Fidelity Wireframing
Using my sketches as a guide, I created lo-fi wireframes. Translating the sketches into wireframes challenged my concepts of how to create a simple yet multifaceted tracking interface. Users expressed they didn't want a "one size fits all" product, so I imagined how the app could become more tailored to each user.
Final Product
High-Fidelity Prototype
Starting the hi-fi prototype is always very exciting for me because I'm finally able to make ideas that have been circulating my mind come to life. Using Figma, I created the shown high fidelity redesigns for OvaGraph. My main focus was to eliminate the following user frustrations: confusing homepage, lack of customization, and counterintuitive design.
Problem Focus
Dated and Confusing Homepage
Reinventing the app home screen was guided by user's reviews. The visual design was dated, and doesn't visually guide users to important tools in the app. A common user pain point was constant confusion on how or where to simply track daily information. The main action in the original product could only be accessed one way as well.
To alleviate these frustrations, the home screen was the first I reimagined. The color palette was given a refresh and visual cues guide the eye. Labels for icons and actions are easily identified to alleviate user pain points. The main task of tracking fertility symptoms can be completed via a variety of paths.
Lack of Customization
In reviews, users wished for a more customized experience in OvaGraph. The app was designed with the goal of conception, but did not take other user needs into account. A user expressed she feels frustrated when receiving alerts that she is potentially fertile and should take a pregnancy or ovulation test. Users with the goal of preventing pregnancy felt unaccounted for and unsure if OvaGraph truly meets their needs. Moreover, with the lack of customization, the tracking interface is overwhelming. Too many tracking options are offered to the user at one time, most of which are not applicable to the goal/need.
To overcome user concerns and combat overwhelming tracking interfaces, I created a flow with the goal of personalizing the app experience to the needs of each user. Upon opening the app for the first time, the user is met with a welcome screen. Profile information is promptly requested, as well as the user's goals with OvaGraph. Now, the app can determine what tools are to be provided based off of user needs. The user always has the option to update the tracking goals with OvaGraph, and can do so from a variety of screens. The trackable symptoms can also be customized individually so the user can determine what best suits them even further.
Counterintuitive Design
A common theme in the original OvaGraph is counterintuitive design. Important actions in the app are not labeled in ways that is recognized by most. Icons, visual hierarchy or emphasis are not utilized to guide users. This theme presented itself throughout the app, but heavily affected the chart interface. The chart feature is a meant to be a visual representation of significant cycle days. However, users reported having a difficult time interpreting the chart. The chart also glitched whenever a user tried to zoom in or out for a better view.
Designing to solve this user pain point, I associated important actions with large buttons, added emphasis by using contrast, and implemented well known icons to further user understanding. These design techniques made for a more visually pleasing, yet functional interface. The chart can be accessed by the home scree, and is designed to show the current week, or zoom out and show the entire cycle up to the present day. Significant days in the cycle are emphasized, and when clicked indicate why.
Reflection
What did I learn from redesigning OvaGraph?
From this project, I was challenged on how to improve visual aesthetics while establishing functionality. I spent a lot of time considering how to organize a lot of information in a cohesive and effortless design. I was very invested in redesigning OvaGraph because I believe in the product and need to liberate women's bodily autonomy. At times it was a little daunting, taking certain interfaces and reinventing them to provide necessary information and actions. However, the goal of this app is to provide women with the ability to take charge of their fertility; whether that be to prevent pregnancy, achieve conception, manage a hormonal imbalance, or all of the above. To have the privilege in furthering that pursuit in any way is something I'm very proud of. Please check out the prototype below, and let me know your thoughts! :)
See more of my work:
Page updated
Google Sites
Report abuse