Case Study: Landing page design for mental health platform
Designing a landing page for Rose, a mental health platform with a mission to increase patient engagement.
Background
Rose is a mental health startup that offers a platform that connects patients and providers for early detection of depression and mood disorders. Rose has a mission to transform the mental health industry and increase the efficiency of provider-patient engagement.
I was tasked with designing a hi-fidelity landing page for a week-long rapid-prototyping sprint. As the sole designer for this project, I was in charge of all aspects of the design process.
Discovery & Research
Going into this project, I did not receive much direction on the purpose of the landing page, other than it needing to be informative, purpose-driven, and to drive conversions. It was my job to contextualize these functions to define the specific purpose of the page.
Business Analysis
I began by learning as much as possible about Rose through its existing website and various articles it had been featured in, while simultaneously taking notes on its business model.
At first, it was unclear to me if Rose was trying to cater to providers, patients, or both. While the website seemed to speak primarily to providers and how they would benefit from using Rose, the articles I read made it sound like patients were the primary customers.
Rose’s homepage:
Quote from Rose’s CEO, Kavi Misri:
Rose is a technology driven mental health company simplifying the way patients experiencing stress, depression, and anxiety seek and receive care.
I eventually realized, that while Rose’s platform is meant for use by both providers and patients, it currently only reaches patients through providers i.e. providers have to refer their patients. Thus, the target audience for this landing page should be mental health providers.
Landing Page Heuristics
I then researched landing page best practices, which I used to conduct a quick heuristics evaluation to use as a starting point for the landing page.
With these heuristics in mind, I looked up a few landing pages of similar companies, such as Blueprint, Talkspace, and Ginger to see how various competitors were incorporating these heuristics into their landing pages.
SWOT Analysis
I also conducted a SWOT analysis of Rose’s current website to use as another baseline for my design. I found that while Rose’s website is generally pleasing to the eye, it is lacking in a few key areas:
- The calls-to-action are not prominent.
- The hierarchy of information on the page do not seem purposeful, which made it difficult to understand what Rose offers.
- It doesn’t clearly emphasize its value proposition.
Define
Using the information that I gathered from my research, I defined a target audience, branding, and content for Rose’s landing page.
Proto-Personas
Because of the limited timeline of this project, I did not conduct user interviews, however, I created proto-personas to help me empathize with Rose’s target audiences. While I intended for the landing page audience to be for providers only, I created a patient persona as well.
Note: In the future, I would conduct interviews to validate or invalidate my hypotheses about these audiences.
Making these personas was extremely helpful in determining the visual style and content for the landing page.
Branding
I also participated in a branding workshop that helped to define Rose’s brand in different ways. Through this workshop, I came up with a brand statement, personality, affinity, and voice for Rose.
Brand Statement: We’re the company that can strengthen connections between patients and mental health providers more than anyone else.
Brand Personality: Up-to-date/contemporary (but not trendy), secure (bus not inaccessible), intelligent (but not genius)
Brand Affinity: Nike, Spotify, Emma Watson, Tina Fey, Tesla
Voice: Warm, trustworthy/responsible, positive, intelligent, mission-driven,
This workshop was meant to help me get a better feel for the overall vibe and communication style of my landing page.
Content
One of the toughest parts of this project was deciding on the content to include on the landing page. There was so much information scattered around Rose’s existing website, that it was difficult to know what was most important to communicate.
I came up with a general outline and some key information to include on the page (e.g. emphasize artificial intelligence, “How It Works” section, platform features), but left most of the decision-making for later.
Ideate
In this stage, I decided on a visual style for Rose and began sketching layouts for the landing page.
Visual Style
As you can see from my style tile below, I maintained many of the visual elements from Rose’s existing website because it was effective in conveying a sense of trust and security, but also modernity and approachability.
For typography, I chose to use a combination of Raleway (which Rose was already using) and Roboto, two sans-serif typefaces for friendliness and a tech-savvy vibe.
Sketches
I then sketched out various layouts and concepts for Rose’s landing page. Here are a few of my sketches.
Prototype
Wireframe & Iterations
I built a wireframe in Adobe Xd based on my sketches, then created an initial landing page design and received feedback from 17 people about what was and wasn’t effective about it. Here are is an evolution from wireframe to final landing page.
Landing Page
This is the final landing page design:
Next Steps:
- Make some visual adjustments, more consistency in spacing, etc.
- Once available, add social proof in the form of reviews of the platform to increase credibility.
- Share with mental health providers for their feedback, and make adjustments as needed.