Koko AI
Designing a website for an online mental health service provider.
UX Designer
June 2021
Aug. 2021
Koko AI
Designing a website for an online mental health service provider.
UX Designer
June 2021
Aug, 2021
Background
An idea born in 2015 by an MIT graduate, Koko is a nonprofit dedicated to ending the youth mental health crisis by reaching young people on popular social platforms. Their product is an integrated chatbot that uses AI-enhanced peer-to-peer support with intervention techniques powered by Cognitive Behavioral Therapy (CBT). Instead of replacing therapy, Koko positions itself as an empathy layer on these platforms, identifying users engaging with high-risk content and steering them towards professional support.
An idea born in 2015 by an MIT graduate, Koko is a nonprofit dedicated to ending the youth mental health crisis by reaching young people on popular social platforms. Their product is an integrated chatbot that uses AI-enhanced peer-to-peer support with intervention techniques powered by Cognitive Behavioral Therapy (CBT). Instead of replacing therapy, Koko positions itself as an empathy layer on these platforms, identifying users engaging with high-risk content and steering them towards professional support.
Challenge
Koko needs a stronger web presence to help grow their platform. Currently, their web presence is confusing and doesn’t reflect the product, organization expertise, or earned legitimacy.
Koko needs a stronger web presence to help grow their platform. Currently, their web presence is confusing and doesn’t reflect the product, organization expertise, or earned legitimacy.
Opportunity
Create a website to help find potential partners and investors, as well as spread awareness of their product’s purpose, mission, and provide users with additional resources.
Create a website to help find potential partners and investors, as well as spread awareness of their product’s purpose, mission, and provide users with additional resources.
Outcome
Since the web launch in 2021, Koko has reached 6 million+ users, and partnered with global brands like TikTok, Open AI, Snapchat, and Pinterest.
Context
Context
By 2020, more than 87.4 million Americans were using a health app at least once a month, with mental health apps in particular gaining traction during COVID-19. With mental health awareness on the rise, self-help apps are supported by psychologists as an accessible method to lead more people to therapy.
By 2020, more than 87.4 million Americans were using a health app at least once a month, with mental health apps in particular gaining traction during COVID-19. With mental health awareness on the rise, self-help apps are supported by psychologists as an accessible method to lead more people to therapy.
Sources: Statista, American Psychological Association (2021)
The Product
The Product
Within a platform, Koko’s integrated intelligence can screen posts and identify individuals engaging in or creating high-risk content. First time users are engaged by Koko's chatbot and receive a brief tutorial on CBT. Users can then respond with a problem they’re facing, and a peer-to-peer support network enhanced by AI will offer guidance. Responses may offer empathy, help users recognize cognitive distortions, or suggest healthier ways to think about the problem. When necessary, Koko will direct users experiencing acute stress to crises lifelines.
Within a platform, Koko’s integrated intelligence can screen posts and identify individuals engaging in or creating high-risk content. First time users are engaged by Koko's chatbot and receive a brief tutorial on CBT. Users can then respond with a problem they’re facing, and a peer-to-peer support network enhanced by AI will offer guidance. Responses may offer empathy, help users recognize cognitive distortions, or suggest healthier ways to think about the problem. When necessary, Koko will direct users experiencing acute stress to crises lifelines.
The Ask
The Ask
Koko's current website consists of only two placeholder pages - a Home and About page. The client requested a full website build featuring Home, About, and Contact pages, along with information on their clinical advisory board and links to relevant research publications and resources. With the website, we would need to develop recommendations for information architecture, content, and overall strategy.
Koko's current website consists of only two placeholder pages - a Home and About page. The client requested a full website build featuring Home, About, and Contact pages, along with information on their clinical advisory board and links to relevant research publications and resources. With the website, we would need to develop recommendations for information architecture, content, and overall strategy.
Home Page
About Page
Competitive Analysis
Competitive Analysis
In 2020, Calm, a meditation app, was the most downloaded app of the year, with Calm and Headspace combined accounting for roughly 90% of total mental health app downloads. Most competitors within the mental health app or platform space share a couple key UX/UI practices:
In 2020, Calm, a meditation app, was the most downloaded app of the year, with Calm and Headspace combined accounting for roughly 90% of total mental health app downloads. Most competitors within the mental health app or platform space share a couple key UX/UI practices:
Imagery or approachable visuals or illustrations that maintain legitimacy and professionalism.
Product value propositions that are above the fold and easily understood with a streamlined call-to-action.
Integrating real user testimonials to demonstrate product efficacy and establish trust.
Imagery or approachable visuals or illustrations that maintain legitimacy and professionalism.
Product value propositions that are above the fold and easily understood with a streamlined call-to-action.
Integrating real user testimonials to demonstrate product efficacy and establish trust.
Wireframes
Wireframes
For the first round of wireframes, we began the foundations of a basic component library and constructed the requested new pages for Koko for all breakpoints. While developing wires, we kept in mind our primary audiences: business partners, investors, and potential end users. We kept the page hierarchy, architecture, and way-finding simple and minimal, leveraging plenty of white space and relevant modules to direct all users types to a low-stakes "Contact" CTA.
For the first round of wireframes, we began the foundations of a basic component library and constructed the requested new pages for Koko for all breakpoints. While developing wires, we kept in mind our primary audiences: business partners, investors, and potential end users. We kept the page hierarchy, architecture, and way-finding simple and minimal, leveraging plenty of white space and relevant modules to direct all users types to a low-stakes "Contact" CTA.
UX/UI Goals
Clearly convey the product and value proposition
Expand the brand identity and design system
Relevant content and visuals to reflect the brand
Streamlined CTAs for partners and users
Simple navigation and wayfinding
SEO Best Practices
Align content with search intent
Unique title tags
Robust use of relevant keywords on the page
Compelling meta descriptions
Robust internal page linking with anchor text
UX/UI Goals
Clearly convey the product and value proposition
Expand the brand identity and design system
Relevant content and visuals to reflect the brand
Streamlined CTAs for partners and users
Simple navigation and wayfinding
SEO Best Practices
Align content with search intent
Unique title tags
Robust use of relevant keywords on the page
Compelling meta descriptions
Robust internal page linking with anchor text
UX/UI Goals
Clearly convey the product and value proposition
Expand the brand identity and design system
Relevant content and visuals to reflect the brand
Streamlined CTAs for partners and users
Simple navigation and wayfinding
SEO Best Practices
Align content with search intent
Unique title tags
Robust use of relevant keywords on the page
Compelling meta descriptions
Robust internal page linking with anchor text
Koko Home
Koko Home
About Us
About Us
Resources
Resources
Donate
Donate
Final Interface
Final Interface
After several iterations of visual design, Koko’s new website was launched. The client landed on a clean visual direction with cool pops of color, gradients, and illustrations that balance healthcare, technology and playfulness with a thoughtful blend of care and empathy.
One key piece of feedback after initial options were presented was that overusing real photography felt awkward and out of place for marketing a mental health platform - by the final iterations, illustrations had largely replaced these visuals, better serving the brand tone and intent to feel more serious and health-centered.
After several iterations of visual design, Koko’s new website was launched. The client landed on a clean visual direction with cool pops of color, gradients, and illustrations that balance healthcare, technology and playfulness with a thoughtful blend of care and empathy.
One key piece of feedback after initial options were presented was that overusing real photography felt awkward and out of place for marketing a mental health platform - by the final iterations, illustrations had largely replaced these visuals, better serving the brand tone and intent to feel more serious and health-centered.
Koko Landing Page
Final User Interface
Final UI
Measuring Success
Measuring Success
After the launch of Koko's website, we used the following metrics to track progress and website performance. The main goal was to accurately convey Koko's mission and product, which would be best measured from qualitative feedback from real users.
After the launch of Koko's website, we used the following metrics to track progress and website performance. The main goal was to accurately convey Koko's mission and product, which would be best measured from qualitative feedback from real users.
KPIs and Success Metrics
Content Engagement
Contact Form and Email Submissions (continue CRM activities)
Reduced Bounce Rate
Time on Page
Repeat Visits
Effectiveness of communicating product and overall mission (UXR)
KPIs and Success Metrics
Content Engagement
Contact Form and Email Submissions (continue CRM activities)
Reduced Bounce Rate
Time on Page
Repeat Visits
Effectiveness of communicating product and overall mission (UXR)
Takeaways
Takeaways
This project required carefully balancing tensions between healthcare and AI, while also designing a site for both potential business partners, investors, and end users of the product. The product was accurately conveyed while leaving room for potential future iterations and scalability. Since the launch of the website, Koko has scaled significantly and reflected their impact with newly added pages on their site, including commitments to maintaining ethical research practices and several new business parters. Their strengthened web presence has helped Koko gain a bigger platform as they continue to pursue their mission of alleviating the youth mental health crisis.
This project required carefully balancing tensions between healthcare and AI, while also designing a site for both potential business partners, investors, and end users of the product. The product was accurately conveyed while leaving room for potential future iterations and scalability. Since the launch of the website, Koko has scaled significantly and reflected their impact with newly added pages on their site, including commitments to maintaining ethical research practices and several new business parters. Their strengthened web presence has helped Koko gain a bigger platform as they continue to pursue their mission of alleviating the youth mental health crisis.