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.
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
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
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
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).
Site map of SimpleHealth.com
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
Birth Control Homepage Modules
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
Birth Control Homepage
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.
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.
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.
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.