Website Design | Branding
Website Rebranding
Enhancing billing team efficiency by implementing an optimized payment system.
My Role
Market research, sitemap audit, wireframing, prototyping, UI, visual design
Team Members
Project Lead
Product Designer
Sr. Copywriter
Visual Designer
Duration
MVP Launch: 3 months
Platform
Web, Tablet, Mobile
Overview
Foresight’s marketing site is a critical component for achieving cross-functional departmental goals and aligning with the company’s mission of expanding throughout the United States to make mental healthcare affordable and accessible. The new content management system (CMS) website will serve as the central platform for the new brand launch, positioning Foresight as a national brand that attracts members, providers, and talent.
Objective
Improve how we communicate and serve our member and provider communities
Discover
Key objectives identified:
To kick off the new marketing site project, the team conducted a discovery phase to understand the goals and needs of various departments and align them with business objectives.
Increase New Member Conversions: Drive users to the booking flow across new states.
Scalable Platform: Build a site that allows for continuous content updates and accommodates extensive clinic location expansion across many states.
Mobile-First Experience: Cater to the majority of site visitors (73%) who access the site via smartphones.
CMS Back-End System: Serve multiple department content and marketing needs.
Enhanced Content and Visual Storytelling: Improve storytelling around services and the organization’s mission.
Technical Integrations: Incorporate live chat, Greenhouse, personalization, email, and landing page campaigns.
Evaluation of the current site
After evaluating our current site, we identified several areas for improvement, with the exception of technical integrations for live chat and Greenhouse.
Navigation
Content
Technical integrations
Functionality
Mobile/responsive viewports
CMS back-end capabilities
Home page (mobile)
Home page (web)
Define
Information architecture
The current website had unclear architecture and unclear call-to-action (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 sitemap
Redesigned sitemap in development
📌
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
The structure of information on the website directly impacts how we deliver information and communicate with each user.
Here's our plan:
Enhance website architecture and navigation for clarity
Develop a scalable site using a headless CMS powered by Material UI React components from the Foresight design system
Create a more accessible and engaging interface for users
Balance technical constraints with ease of use to ensure a seamless experience
User personas
The website serves as a critical step for both prospective members and providers, who may find us through mental health affiliate sites like Psychology Today or ZocDoc, or via search engines.
Potential Member
Seeking mental healthcare services and information about Foresight's offerings to make an informed decision.
Potential Provider
Interested in clinical career opportunities at Foresight, seeking information about the company's mission, benefits, and services.
Additionally, secondary user personas (not shown) are insurance providers, potential partners and investors.
Design
Wireframing
Using the sitemap and research findings, we began constructing wireframes for mobile, tablet, and desktop views. During this phase, we prioritized structure over color, focusing on UI components to envision how the layout might translate to the final design. Collaboration with the marketing team and our agency partner ensured alignment with user needs, business objectives, and technical constraints. These wireframes served as discussion tools to refine the website framework and ensure cohesive navigation.
Given the diverse page requirements of the CMS website, we opted for a template and component-based approach. This methodology allows us to establish a system for leveraging various pages and components in future iterations. Central to this process were the user journeys of members and providers, with clear calls-to-action guiding them to book appointments, inquire for more information, or apply for careers.
The primary objective of the final UI development was to create a universally functional website across platforms, setting a high standard for quality and positioning Foresight as a tech-forward national brand.
Key focus areas included:
Designing versatile UI components to accommodate diverse use cases.
Addressing content visual and copy needs effectively.
Extending the new brand's visual direction.
Optimizing designs for mobile viewing.
Leveraging Material UI design system components for consistency and quality.
Implementing WCAG 2.1 accessibility guidelines to ensure inclusivity in color contrast, typography, spacing, and interactions.
