BetterHelp.com RedesignVisual/Interaction Design and Front-End Development

Sessions Redesign v. 1 (Clients) - One of my main projects at BetterHelp was redesigning our main page, the "sessions" page where clients and counselors communicate. This is one of two designs we tested against the original. It keeps much of the original design's structure while adding a visual refresh and making some functionality improvements. Sessions Redesign v. 1 (Counselors) - This is the counselor's version of the previous design. Sessions Redesign v. 2 (Clients) - This is the second version we tested against the original sessions page. This redesign is drastically different and uses an entirely new structure. My goal here was to create the left side bar that allowed us to expand on the functionality we could add to the page. It also moves the message editor to a position that fits better with the flow of the messages. Sessions Redesign v. 2 (Counselors) - This is the counselor's version of the previous design. Homepage - This is a redesign of the BetterHelp homepage. This design takes into account what aspects about our service we wanted to emphasize, ie. our apps. It also includes logos from press articles and a wider ranger of counselor images. This page was also tested as a landing page where we saw better performance. About us - The purpose of our about page is to give a small background of who we are and highlight our mission statement. About us, selected section - I created this circle module for the about us page, because I wanted to highlight what the various parts are of BetterHelp that make up our organization and keep our wheels turning. I felt this would give our users insight into how our operation runs in order to build their trust. Header & Footer (Desktop) - One of my first projects at BetterHelp was a redesign of our header and footer. The goal was a clean, clear and scalable header. Header & Footer (Mobile Web) - This is the mobile version of our new header/footer design.
Header (Mobile App) - The header for the mobile application was designed differently from the mobile web. It's height is reduced and the logo was removed.
Open Header (Mobile App) - The mobile app uses an off-canvas menu.
In-Page Menu (Mobile App) - Multiple of the pages in the mobile application have an "in-page" menu. This allowed me to move many of the in-page functions to this menu and clear up the page.

Project Goal

Explore the existing pages of BetterHelp.com and improve their usability and design.

Tools

HTML5, CSS3/SASS, JQuery/JS, PHP/Twig, Adobe Photoshop & Illustrator

Project Overview

At BetterHelp I act as the sole designer and a front-end developer on our development team. The goal of these pages was to improve conversion and user experience on BetterHelp.

Team

I worked as the sole designer on the project. In most cases I handled all design, front-end development and backend development. In a few select cases (noted below), I handled design and front-end and worked with a back-end developer.