Simple Health, a healthcare startup initially focused on online contact lens prescription renewals, underwent a significant transition with the launch of our second vertical, birth control prescriptions. In three months, the team successfully designed, built, and launched an online service for renewing birth control prescriptions. In this project, I lead the design and creative direction efforts during our brand transition from Simple Contacts to Simple Health.
Role
UX design
UI design
Creative direction
User research
Team
Marketing
Design lead
Product manager
Engineers
Project Goals
-
Develop the MVP site for SimpleHealth.com.
-
Establish a dedicated landing page at SimpleHealth.com/birthcontrol.
-
Inform users about the range of offerings provided by SimpleHealth.
-
Educate users on the process of renewing online birth control prescriptions through SimpleHealth.
-
Successfully launch the MVP for Simple Health's birth control prescription renewal service by the end of the quarter.
Generative Research
I started by identifying key questions about online birth control. Collaborating with marketing, I crafted a survey and gathered insights from around 1000 female participants, including SimpleContacts patients, friends, and family. This process provided valuable user empathy and insights, shaping our design approach.
Key Learnings
Awareness:
About 2/3 of women are unaware of online birth control; discovered through word of mouth or social media ads.
Barriers to Use:
Common reasons include lack of time, unknown side effects, and difficulty maintaining birth control routines.
Pain Points:
Challenges include inconvenient trips to the pharmacy, especially when not nearby, and limited access to a doctor for prescriptions.
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 embarrassed 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 the existing SimpleContacts site.
I crafted site maps to outline the pages for the SimpleContacts.com MVP launch. Collaborating with the product manager and developers, we used these maps to assess project scope/requirements. Below is the SimpleContacts.com sitemap, highlighting touchpoints to cross-sell birth control (shown in gray).
.png)
Site Map of SimpleHealth.com
Navigation Explorations: Scaling for Future Verticals
In designing navigation, I balanced current needs with future expansion, anticipating the introduction of various verticals. Collaborating with the PM and senior leadership, we discussed different directions for navigation and branding for SimpleHealth's growth. I presented multiple options to visualize how the site navigation could adapt to 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 rearranged the modules to convey our story effectively. Collaborating with a copywriter, the PM and I refined the copy, not only enhancing our messaging but also clarifying the internal product vision.
SimpleHealth Homepage Modules
Birth Control Homepage Modules
Mid-Fidelity Explorations
Color Explorations
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.
High Fidelity Explorations
Simple Health Homepage
Birth Control Homepage
User Testing
After finalizing the homepage design and the birth control online renewal test, we conducted user interviews with 5 participants, including 4 returning birth control users and 1 new user. These interviews provided insights into user interactions and attitudes, guiding adjustments to our copy and imagery for improved user engagement.
Photography/Art Direction
Despite limited resources, I advocated for using original photos over stock images for the MVP launch. In just one week, I orchestrated a photoshoot, arranging a photographer, 4 models, props, and a location. Steering the creative direction, I compiled sample images to convey the desired mood and tone, outlining specific scenes. I collaborated with marketing and product management, ensuring alignment and obtaining their approval.
Final Designs
Below are the final designs for the MVP launch of simplehealth.com
Layout: I kept most of the layout similar to the Simple Contacts 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.
Illustrations: In initial explorations, I used a photo placeholder for the "doctor advisors" section on the homepage. User testing revealed a misconception – users thought our service was like Zocdoc, matching them with an OBGYN/doctor. I proposed using illustrations instead of photography, quickly incorporating placeholder illustrations. This led to an immediate shift in how users perceived our service.
Value Props: The team tested different value propositions to resonate with users and differentiate the page from simplehealth.com.
How It Works Comparison: Faced with a 650px max height constraint for each module, I extended the module beyond this limit to accommodate the lengthy healthcare process. While exceeding the height, I ensured the most critical information remained visible within the 650px limit.
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
Compiled over a 2-day hackathon and 8 months of product development, this style guide evolves as UI components undergo continuous testing against diverse healthcare user experiences. It serves as an initiative to ensure consistency across the web and mobile app platform, offering a centralized reference for the team.