Redesigned SoundCloud
Web Design | Brand Identity

CMS Website

Refresh a marketing website to improve how we communicate and serve our member and provider communities

My role
Market Research, Wireframing, Prototyping & Testing, Visual Design
Team members
Kosta K. - Director of Product Design
Piper L. - Product Designer
Jen L. - Sr. Copywriter
Krystal D. - Visual Designer
Timeline
MVP Launch: Dec 2021 - Mar 2022
Platform
Web, Tablet, Phone

Overview

Foresight’s marketing site is a critical experience for cross-functional department goals and needs with regard to the company’s mission of expanding throughout the United States to make mental healthcare affordable and accessible.

The new content management system (CMS) website would be the central vehicle for the new brand launch to establish Foresight as a national brand that attracts members, providers, and talent to Foresight.

Discovery

To initiate the new marketing site project, the team began by conducting a discovery phase to learn about the cross-functional department goals and needs to pair with business objectives.

Identified key objectives:

Increase new member conversions across new states and drive users to the booking flow
Build the site on a scalable platform that allows for continuous content updates and meets extensive clinic location expansion across a large number of states
Mobile-first experience to meet the majority of site visitors (73%) on smartphones
Serve multiple department content and marketing needs through  a CMS back-end system
Improve content and visual story-telling around services, and the organization’s mission
Technical integrations for live chat, Greenhouse, personalization, email and landing page campaigns

Old home page (web)

James Miller

Old home page (mobile)

James Miller

After evaluating our current site, we failed all checks for the items on the right except technical integrations for live chat and Greenhouse.

Navigation
Content
Technical integrations
Functionality
Mobile/responsive viewports
CMS back-end capabilities

Information architecture

The current website had unclear architecture and unclear CTA which caused visitors to have trouble navigating around. Also, it did not capture Foresight’s brand voice. We audited and restructured the sitemap to have clearer navigation that would place Foresight’s website a more accessible and scalable platform for potential members and providers.

Current

James Miller

Development

James Miller

📌 How might we leverage the website to increase conversion of prospect members and providers to meet hyper-growth expansion into new states that increases accessibility to affordable mental health care services?

Proposal

How we structure information on the website shows how we deliver information and communicate directly to each individual user.

1.
Clear website architecture/Enhance navigation
2.
Build a scalable site as a headless CMS powered by Material UI React components (from the Foresight design system)
3.
Create a more accessible and engaging interface
4.
Balance technical constraints with ease of use

User personas

The website would be a critical first or second step in the user journies for prospect members and providers that would find our site through mental health affiliate sites like Psychology Today or ZocDoc or through a search engine.

Secondary user personas (not shown) are insurance providers, potential partners and investors.

Potential Member

Testing result 1

Looking for a mental healthcare provider or location near her to book an appointment. Additionally, she seeks information about Foresight’s mental health services to determine which is right for her.

Potential Provider

Testing result 1

Visits our site to search and apply to clinical career opportunities at Foresight for therapy or psychiatry departments in her area. Also, she is seeking the company information about the company’s mission, benefits and services.

Design

Wireframing

With sitemap and research on hand, we started building wireframes for mobile, tablet and desktop viewports. In this phase of the development, we avoided using colors to focus on the structure but used UI components to understand how the information laid out might be applied to the final design.

We collaborated and coordinated with members of the marketing team as well as our agency partner. These wireframes were used as ways to spark discussions around the framework of the website and to make sure that our conversations meet user needs, business goals, and technical capabilities and constraints.

Testing result 1

Since the CMS website has different pages to cater to a variety of needs, we decided to go with the method of developing templates and components. In this way, we can create a system around how the different pages and components could be utilized for future pages.

The heart of creating this experience was the member and provider user journeys. Both user groups were acquisition targets with all roads leading to call-to-action prompts to book an appointment, contact us for more info or apply for careers for the provider demographic.

Final design

The main goal to ensure during the final UI development is that our new website direction would universally function cross-platform for upcoming marketing & product experiences. Creating a seamless experience that set the bar high for quality and established Foresight as a tech-forward national brand.

Additional focus areas:

Designing universal UI components to meet a variety of use cases
Designing for content visual and copy needs
Expanding upon our new brand's visual direction
Optimizing designs for mobile viewports
Utilizing Material UI design system components for quality & consistency
Implemented WCAG 2.1 accessibility guidelines for color contrast, typography, spacing & interactions

Other projects