Ourself Health

Case Study Summary

Project Type: UX/UI Design for B2C Saas tech startup
Objective: Ideating, Prototyping, User Flows, prep for 2023 launch
Role: UX/UI Designer - Design complex user flows and UI components for new women’s health tracking mobile application, help prepare for app launch in 2023
Team: 4 UX Designers, 1 UX Writer, 1 Graphic Designer, 4 Web Developers, and CEO of Ourself Health
Duration: March - June 2023 (4 months)
Software: Figma, Photoshop, Illustrator

Ourself Health

A Women’s Health Tracking App

UX/UI Design Case Study

by Mackenzie Lisenby

Project Summary

Ourself Health is a B2C Saas tech startup based in San Francisco, CA which is designing a new, innovative women’s health tracking app. The app allows users to track health symptoms, discover trends through analytics charts and calendars, and read articles about women’s health. 

For four months, I worked as a UX/UI designer for Ourself Health and helped their team design complex user flows, create UI components and features, wireframe unique pages and menus, and ideate analytics displays for the app.

I successfully helped the company design 40% of the flows and wireframes needed for their MVP launch in 2023, including the login flows, tutorial flows, homepage, menstrual health and individual health tracking flows and menus, profile menus, analytics charts and pop-up menus.

The Problem

Women frequently experience health symptoms that correlate with their menstrual cycle, hormone cycle, or other body cycles, but it is difficult to keep track of the frequency and severity of these symptoms. Because of this, these symptoms are often left untreated or overlooked, and in some cases could become more serious if left untreated for an extended period of time. 

Ourself Health wanted to build a mobile app to help empower women and allow them to track and visualize all of their health data in one place.

The Solution

Create a user-friendly, all-encompassing women’s health tracking app designed to visualize health trends, track menstrual cycles, educate on women’s health and body cycles, and build an online community.

This app must include over 260 common health symptoms, allow for daily tracking, provide visualization on both data charts and monthly calendars, have a private profile for each user, and be customizable for women of all ages and reproductive stages.

Building Out the App

Using Ourself’s existing style guide and rough wireframes, I helped design 40% of the UI designs, menus, and behaviors throughout the app. I designed the user flows, built the wireframes for complex health tracking lists, and ideated the UI for data analytics for each of the following sections.

Account Creation

Onboarding

Home Screen

Favorites Page

Menstrual Health & Individual Symptoms

The challenge was to design iterations of each of these sections to meet the needs of different users, including:

  • New Users

  • Returning Users

  • Users with a regular menstrual cycle

  • Users with an irregular cycle or no cycle

  • Users tracking data every day, week, or month

  • Users tracking complex medical conditions, symptoms, or customized data points (i.e. prescriptions, birth control, rare medical conditions)

Accessibility and Visibility

Part way through the process, the UX team and I decided to make a global change to our primary card components in order to condense the long lists and questionnaires on each tracking page.

By decreasing the symptom card height and margins by 30%, we successfully decreased the average page height by 5-10% and therefore made the information more visible and accessible.

Data Visualization

The success of the app was heavily weighed upon the design of the data visualization. Users needed to easily view the correlation between their tracked health symptoms and menstrual cycle on a weekly or monthly chart within a small, mobile app display.

I experimented with bar, scatter, and line graphs to accurately display varying types of data points (binary, 1-10 scale, etc.), and also incorporated a sliding calendar x-axis, drop down menus, and scroll arrows to help the user navigate between timelines.

Ultimately, we determined scatter graphs are the most successful, and utilized the brand colors to differentiate between the data points.

Health Tracking

The most complex portion of the app is the tracking system that requires unique sets of cards for a large variety of different data types, such as binary test results, quantity and measurement fields, conditional expanding cards, and severity rating systems.

I helped develop the design for each of these cards and created a collapsible menu UI which would allow for all of the data to be accessible on one page. I also helped with the user flows for favoriting items, and searching for specific health symptoms based on item tagging.

Results

The App successfully launched in December 2023 and is now available on the Apple Store and Google Play. It currently has a 5 star rating, and can successfully track user menstrual cycles, display analytics, and track over 260 common health symptoms.

Take Aways

Working on this project was a fantastic collaborative experience and design challenge where I was able to learn how to implement complex ideas and a large amounts of data into a mobile format.

As a designer who is new to the health tech space, I am grateful to have worked with a team which always put the users first, and which took such great care to consider all of the different practical uses for this app and how it may change lives in the future. I have developed great technical and communication skills through this experience, and look forward to seeing the growth of Ourself now that the app has launched.