Simple Health

Simple Health is a healthcare startup which provides online prescription renewals. With the launch of our 2nd vertical, the company began its transition from SimpleContacts to SimpleHealth.

 

For our 2nd vertical, the team designed, built, and launched an online birth control prescription renewal service in less than 3 months. I led the design and creative direction efforts around our brand transition from Simple Contacts to Simple Health.

Role

UX Design

UI Design

Creative Direction

Research

Collaboration with

Marketing

Design Lead

Product Manager

Front/Back-End Devs

Project Brief

  • Create a SimpleHealth.com MVP site

  • Create a SimpleHealth.com/birthcontrol landing page

  • Educate users on SimpleHealth's offerings

  • Educate users on how SimpleHealth's online birth control prescription renewal works

  • Launch a MVP SimpleHealth.com and its birth control prescription renewal service by the end of the quarter 

Generative Research

The initial part of my design process was to uncover our biggest questions and assumptions about the world of online birth control. I collaborated with marketing and project management to create a survey. Then, we began systematically asking female SimpleContacts patients, friends & family, and social contacts about their birth control experiences.

We gathered feedback from approximately 1000 female participants currently on birth control or considering birth control. Answering these questions helped me to gain empathy for the users, and feel out the lay of the land before jumping into the design.

Main questions we wanted to answer:

  • How much awareness do women have about online birth control? 

    • Approx. 2/3 women didn't know that online birth control existed ​

    • Online birth control services were found through word of mouth or social media ads
       

  • What's kept women from going on birth control? 

    • Lack of time

    • Unknown side effects

    • Unable to keep up with birth control routines
       

  • What pain points are there around getting birth control? 

    • Taking trips to the pharmacy esp. when it's not close by​

    • Lack of access to doctor to prescribe medication

User Personas Based on Early Investigation

While we were not absolutely certain which persona would be our main customer type, we knew we had to accommodate both first-time birth control users, as well as users who are already on birth control. Based on insights from the generative research, and an accumulation of experiences of women in our office, I noted these high level persona characteristics:

"I remember being younger and wanting birth control but being too embarassed to see a doctor or tell my parents"

Never been on birth control 

  • New to birth control

  • Late-teens and early 20s 

  • Wants to keep birth control discreet from parents

  • Limited access to healthcare and doctors

  • Wants more information about birth control options, benefits, side effects, etc

"I just hate going to the pharmacy."

Already on birth control

  • Currently on or have been on birth control

  • Working professional

  • Knowledgeable about their choice of birth control 

  • Limited access to pharmacies and doctors due to location/time

  • Wants an easy, quick way to transfer prescriptions

Site Map

Cross sell birth control through SimpleContacts.com

I began by creating site maps which would help the team get an overview of the pages that needed to be built. Working closely with the product manager and developers, we used the site map to evaluate the requirements for an MVP launch.

Below is a sitemap of SimpleContacts.com and touch points where we could cross-sell birth control (shown in grey).

Sitemap (BC touchpoints on SC).png

Site map of SimpleHealth.com

SH homepage- our mission v2.png

Navigation Explorations: Scaling for Future Verticals 

While exploring navigation options, I had to consider current needs while also building a foundation for future expansion. I knew that over time many verticals would be introduced. It was important to consider how navigation and branding would work as SimpleHealth grew. With the PM and senior leadership, I facilitated discussion around the pros and cons of different directions.

I presented several options to help the team visualize how the site nav would look depending the way we presented the new verticals.

Design Explorations: Modular Homepage Components

When designing the homepage, there was ambiguity from Product Management around how the product would work and what it’s differentiator was. To help navigate the ambiguity, I suggested stories and selling points we could communicate through “modules”.

The product management and marketing team then re-ordered the different modules in a sequence that best communicated our story. Afterwards, the PM and I worked closely with an external copywriter to refine our copy. This process didn’t only help with our messaging, but also helped internally to clarify product vision.

SimpleHealth Hompage Modules

Frame.png

Birth Control Homepage Modules

Frame.png

Mid-Fidelity Explorations

Color Exploration

I pushed for re-consideration of our brand’s colors. Our original colors were vibrating whenever white text appeared on a purple background. I explored various color combinations, applications, and accessibility considerations. Ultimately, this process resulted in a set of color guidelines, and new colors for the brand. 

Final Colors for MVP Site

High Fidelity Explorations

Simple Health Homepage

User Testing

Once we had the homepage design and the birth control online renewal test at a place where we could test the concept, we conducted user interviews with 5 participants- 4 returning birth control users and 1 new to birth control.

Throughout the interviews, we learned how users were interacting with and approaching our offering. This was a great window into behaviors into attitudes, which helped the team to fine tune our copy and imagery.

Photography/Art Direction

I advocated for taking our own photos versus using stock photos for the MVP launch. In one week, I was able to coordinate the photoshoot, secure a photographer, 4 models, props, and the location. 

I led the creative direction of the homepage photography, collecting sample images to communicate mood and tone, and gathering a list of scenes. Pulling this effort together also involved coordinating with and getting buy-in from marketing and product management.

Screen Shot 2018-10-27 at 2.07.19 PM.png
 

Final Designs

Below are the final designs for the MVP launch of simplehealth.com

Layout: I kept most of the layout similar to the Simplecontacts.com site to create immediate familiarity and brand connection to our existing contact lens service, simplecontacts.com. I made sure the modules' contents fit above the fold so that the information wouldn't be broken across the page.

Comparison: This modules serves as a quick reference of differences  between existing healthcare services and SimpleHealth's services. After a few iterations and user testing, we took out some redundant text to succinctly communicate our differentiation. 

Module height: In order to show the modules' content above the fold, each modules max height is at 650px.

Doctors Illustrations: Initially in my explorations, I had a photo placeholder for the “doctor advisors” section of the homepage. However, through user testing, I learned that the users were understanding our brand to be a service that matches you with a OBGYN/doctor to consult and prescribe them their medication (like Zocdoc). I suggested using illustrations rather than photography, dropped in placeholder illustrations. We saw an immediate change in the way users perceived our service. 

Value Props: The team tested different value props to see which rings with our users. This is also a new element which serves to differentiate the page from the simplehealth.com homepage. 

How It Works Comparison: I was working with the constraint of keeping each module 650px max height. However, the length of the existing healthcare process was very long vertically. Horizontally, it took up the full width and when all the elements were stacked, the module became too tight. I decided to extend this module outside the 650px height, but keep the most important facts visible within the 650px height. 

Learning From Our Data

In the one month post our MVP launch, we were able to gather data that gave us more insight into our users

  • Majority of purchases are from new birth control users

  • User age trends in the early 20s

  • Instagram ads is the major channel for user landing on SimpleHealth

  • Majority of purchases are made through mobile-web

SimpleHealth UI Style Guide (in progress)

The style guide is an ongoing effort to advocate for consistency across the web and mobile app platform, and provide a single place for the team to reference our styles.

This is a style guide that I compiled during a 2 day hackathon and after 8 months of working on the product. The guide will continue to grow as the UI components are stress tested against an ever-expanding array of healthcare user experiences. 

Takeaways

  • As the designer on the team, it's my goal to put out the best UX possible. However, it's also important to discern when pushing for the best possible design is appropriate based on the timeline.

  • Working on this project, I had to jump between thinking like a founder and a designer. 

  • Trust the team. Trust the process. 

  • Quick iteration and pivots were possible due to daily communication across the team.

  • Although there is still much more work to be done on the SimpleHealth site, I learned what it really means to ship an MVP versus a full product. While working on the MVP, every member of the team contributed to a backlog of quick-fixes and heavy lift tasks for post-MVP.