How might we empower thyroid patients to learn more about their condition and improve their wellbeing?

Project Background

Objective

Improve enrollment in a virtual health program by 20% or greater.

Client
Thyroid Recovery Program
Sales Conversion

Timeline and Tools

I researched, designed, developed, and launched the website in two weeks.

Tools
• Figma for low-fidelity prototyping
• Google Analytics for analysis
• Webflow for development
Freelance

Approach

A reiterative human-centered process was followed: empathize, define, ideate, prototype, test, and launch.
Tradeoffs
Simplicity vs. Complexity
Aesthetics vs. Functionality

Impact

The design was successfully handed off in two weeks.
Impact
• 68%+ Ease of Use
• 1.5 minute Average Engagement Time
• 100% Preferred New Design
Deliverable

Final Design

Responsive Landing Page

• Revised program offerings
• Virtual community spotlight
• Pricing comparison and CTA

One-Click Enrollment

• Pricing comparison feature
• Integration with Thinkific

Dynamic (CMS) Blog

• Thyroid articles with option to subscribe to the newsletter

Approach

Understanding the needs of target users required a reiterative human-centered approach.

Competitive Analysis

To ensure the design provided a competitive edge, I performed a market analysis to learn from industry leaders and identify gaps in the market.

Research Goals

• Benchmark against similar health programs
• Uncover potential competitive advantages

Limitations

• Analysis only included thyroid programs
• Personal subjectivity and bias

Interviews

To understand why the existing website had a poor conversion rate, I spoke with 4 people between the ages of 25 and 68. Two of the participants had experience in the medical field. From these conversations, I discovered:

Original Landing Page

• Graphics do not clarify what members get
• Module photos are incompatible with screen readers
• Services are not logically grouped together
• Poor color contrast sitewide
Dashboard mockup

Journey Map

Having uncovered numerous pain points in the interviews, I created a journey map to synthesize the issues users faced when reviewing the program. I shared the results with the founder to ensure our goals aligned.

Research Goals

• Identify ways to improve program credibility
• Explore how to clarify program services

Limitations

• Limited user representation
• Potential to overgeneralize results

Research Conclusions: Primary User Concerns

1. What will I learn and is it credible material?

Users were not sure why they should invest in the program when functional medicine is an option.

2. Are current members' health improving?

Users lacked the social proof needed to gauge whether the program would address their specific needs.

3. What exactly do I get with each plan?

Users are hesitant to commit because they don't understand what services are provided with each program plan.

Problem Statement

The website lacks a clear path for users to view available services, assess the program's credibility, and commit to the plan that best supports their individual health needs.

Ideation

User Requirements

I leveraged my research insights to develop two high-level goals and user requirements for the new website:

Goal 1: Build Trust with Prospective Members

1. Clear and prominent call-to-action for program enrollment

2. Social proof from previous program members

3. Easy comparison of payment options

4. Graphics that showcase program resources

5. Simple, one-click checkout that integrates with Thinkific (learning platform)

Goal 2: Highlight Competitive Advantages

6. Spotlight founder's credentials and experience

7. Emphasize community support options for prospective members

8. Differentiate optional functional testing plan from virtual course only route

Prototyping

Low-Fidelity Landing Page

Designed in Figma to collect early user feedback.

Mockups for other pages, not shown here, were also presented to users.
Dashboard mockup

User and Stakeholder Feedback

Before investing time into developing the website, I showed my prototype to 4 users. The goal was to ensure my solutions balanced user and stakeholder objectives. Based on these talks, a two changes were made:

Change 1: Allow Users to Compare the Program to Functional Medicine

Users agreed comparing pricing to functional medicine would help highlight the program's competitive advantages.

Change 2: Restructure the Layout of Program Offerings

Originally, the prototype displayed the founder's welcome video at the top. However, users said their primary goal is to see what the program offers and determine if the services offered satisfy their health needs. As a result, the page layout was reordered:

Design System

Once the founder and I agreed on the low-fidelity design, I developed a barebones design system to give the brand a new visual identity. I only provided the most basic elements to save time and money.

High-Fidelity Design

Key Design Principles Applied

1. Simplicity - Reduced unnecessary clutter and regrouped elements by similarity

2. Consistency - Cohesive use of typography, colors, and layout throughout the interface

3. Visual Hierarchy - Size and spacing highlight salient information

4. System Feedback - Error messages, button color changes, etc.

5. Affordance  - Buttons and links resemble clickable actions

6. Accessibility - Proper legibility and color contrast

New Landing Page

• Organic design targeting young females
• Visual hierarchy guides users to salient information
Dashboard mockup

Resources Page

• Podcasts and blogs consolidated on a single page
• Descriptions and estimated listening time aids content selection
Dashboard mockup

Products Page

• Items link to affiliate pages
Dashboard mockup

About Page

• Images reinforce the text's narrative
• Bolded text allow readers to scan
Dashboard mockup

Testing

Protocol

I spoke with 3 participants, who agreed to review the website on desktop and mobile. These interviews were semi-structured to provide both quantitative and qualitative insights. I asked participants to use think aloud protocol.

Results

The evaluation showed significant design improvements. On average, ease of use, information clarity, visual appeal, and satisfaction improved by 68%, 66%, 69%, and 52%, respectively. Despite a small sample size, I was confident I had enough data to make reiterations and launch, given all three participants echoed the same thoughts.

Reiteration

Clarifying Services: How It Works Section

It was still unclear to users how new members proceed through the program. In response, I added a dedicated how it works section to clarify the order of services and help potential members set realistic expectations.

Welcoming Potential Members

Users felt the design lacked a proper introduction of the program founder and her credentials so I included a section to highlight her experience, which links out to the about page.

Revised About Page

• Updated to include photos of the founder
• Added licensures and certificates
Dashboard mockup

Optimizing for Mobile

Live Website

Lessons Learned

1. Brief Check-ins Beat Grand Reveals

Explaining the rationale behind design choices and how they benefit the user built support for my decisions. Quick, check-in meetings allowed both parties to address tradeoffs early and proceed together in unison.

2. Familiar Designs are User-Friendly Designs

During my competitive analysis, I spent considerable time researching popular health influencers to understand how they convert followers into program members. Doing so provided a solid foundation for understanding the aesthetic, layout, and message thyroid patients would expect, which led to a familiar design pattern users found more trustworthy.

3. Fast-Paced Work is Best When Decisions are Reversible

This project taught me it is often better to launch at 90% complete rather than 100% polished so that user feedback can be leveraged for further reiteration. Getting users involved quickly accelerates the design process without diminishing value to the end user.  

I appreciate your time!

To everyone who has ever read, critiqued, or shared my work - thank you.