BetterTogether 1.1 helps anyone who wants to lose weight and maintain a healthy lifestyle by facilitating small and intimate group weight loss challenges with friends and family in a fun way. Their main user base is women aged 24-44.

The client wanted to improve the onboarding experience. Many users abandoned the onboarding flow or failed to join or create a group challenge.

We evaluated the existing design measuring it against standard heuristics and similar applications. We improved the onboarding process by personalizing the experience. We asked users to reflect on why they joined BetterTogether, how motivated they are to lose weight and how they feel about their weight loss journey. Reflection helps users become self-aware and develop healthier habits by reshaping a person's mental and emotional approach to weight loss.

• Discovery

• Ideation

• Design

• Dev Handoff

• Reflection

• Figma

• Figma Jam

• Slack

• Zoom

• UX design

• UI design

• Research

• Overall: 8+ weeks

• Discovery & Research: 2+ weeks

• Design & Iterations: 6 weeks

The team held a Zoom call. During the call, we became familiar with the application by reading over the app's description in the App Store, reviewing the client brief and video, and studying the existing screens. We immediately identified opportunities where we could improve upon the design:

• The onboarding process was confusing.

• Onboarding screens were ineffective and overwhelming.

• Users were unsure how to create a group challenge.

• Upgrading to paid account pop-up was annoying.

• Typography and UI styles were inconsistent.

• The sign up form was too long.

We evaluated each screen using Norman Nielsen's Usability Heuristics to find usability issues in the user interface. During the evaluation we found the following issues:

Visibility of System Status 

• The progress bar on the onboarding screens was hard to see.

User Control and Freedom 

• The onboarding screens lacked a back button.

• There was inconsistency in the UI. 

•Sometimes CTAs were blue with a large corner radius.  

• Other times they were orange with a small corner radius.

Flexibility and Efficiency of Use 

• Google sign-on would be helpful.

Aesthetic and Minimalist Design  

• The onboarding screens were overcrowded with UI elements, creating visual noise.

We compared and analyzed the strengths and weaknesses of four competing digital applications from the health and wellness industry We analyzed the following apps:

• My Fitness Pal

• Noom

• Strava

• Lose It

Completing this analysis helped us identify user experiences and features that we thought were successful and could be integrated into our redesign.

User flows are a visual inventory of the screens we need, user decision points, and actions in each flow. When we're designing, we can check against each flow to make sure we've accounted for everything.  We based the user flows on the user stories that were identified with the client. The user flows are:

• I want to create an account and log in.

• I want to create a group challenge and invite others to join.

• I was invited to a group. I want to join a group challenge.

• I want to start a subscription.

Each team member was responsible for creating the wireframes for a flow. I made user flow 1 and created the main components and styles used throughout the app. As lead designer, I also supported my team by reviewing their work, checking for consistency in the user experience and encouraging the use of components and library styles.

We wanted the brand to be:

• Fun

• Healthy

• Inclusive

• Motivational

We wanted the user interface to be:

• Clean

• Modern

• Easy to use

We wanted the user experience to:

• Clearly show progression

• Reward users for achieving goals

• Be personalized

As lead designer, I managed and organized the style guide and component library. I created components, variants, and color and typography styles. This made it convenient for my team to be consistent across screens by quickly and efficiently referencing the library. Our style guided included:

• Components

• Colors

• Typography

• Iconography

• Grid System

As lead designer, I was responsible for the onboarding flow, which set the tone for the user experience. My main goal was to balance personalization with the idea of group weight loss. However, I didn't want each user's individual weight loss journey to be minimized. I achieved a good balance by:

• Prompting users to reflect on their weight loss goals.

• Well-thought-out messaging on key screens.

• Crafting an onboarding experience that focused on the individual user's journey but led to a group weight loss challenge.

In addition, we:

• Updated the dashboard with a more modern and brighter color palette and consistent UI.

• Added clear CTAs like "create a group challenge" and "unlock pro features" to the dashboard.

• Used consistent buttons and forms across all screens creating a more seamless experience.

• Incorporated engaging images and iconography.

• Improved information hierarchy by creating sections and section titles.

We measured the main screens so any developer can understand the layout, padding, margins, and the characteristics of UI elements. We also annotated the screens that included complex interactions.

• Onboarding is a crucial part of the user experience. It's imperative to get this right because it sets the tone for the rest of the user experience.

• Clear messaging guides users through the app's experience. It should match the tone of the brand.

• Using a design system is the most efficient way to achieve consistency across all screens.