Yellow Submarine Design – UI/UX by Lynn Chang

BACK

Designing a Unified Fitness Experience Across Devices

I led visual and interaction design for new Beachbody app features, focusing on creating a cohesive, motivating experience across TV, mobile, tablet, desktop, and connected bike platforms. The work centered on translating fitness data, content, and brand energy into consistent, scalable UI patterns across very different screen contexts.

Role

Sr Product Designer

Focus

Visual Deign

platform

iOS, Android, Desktop, Bike

Users

Weight Lose Users

Role

Sr Product Designer

Focus

Visual Deign

platform

iOS, Android, Desktop, Bike

Users

Weight Lose Users

Role

Sr Product Designer

Focus

Visual Deign

platform

iOS, Android, Desktop, Bike

Users

Weight Lose Users

The Challenge

Meeting diverse device demands while preserving motivation and clarity.

Highly fragmented device ecosystem

Beachbody experiences spanned TV, mobile, tablet, desktop, and connected fitness hardware—each with different interaction models, screen sizes, and usage contexts.

Highly fragmented device ecosystem

Beachbody experiences spanned TV, mobile, tablet, desktop, and connected fitness hardware—each with different interaction models, screen sizes, and usage contexts.

Highly fragmented device ecosystem

Inconsistent visual and interaction patterns

Existing features often diverged across platforms, weakening brand cohesion and increasing user friction when switching devices.

Inconsistent visual and interaction patterns

Existing features often diverged across platforms, weakening brand cohesion and increasing user friction when switching devices.

Inconsistent visual and interaction patterns

Data + motivation challenge

Fitness metrics, progress indicators, and content recommendations needed to feel encouraging rather than overwhelming.

Data + motivation challenge

Fitness metrics, progress indicators, and content recommendations needed to feel encouraging rather than overwhelming.

Data + motivation challenge

Balance between brand energy and usability

Interfaces needed to feel energetic and aspirational while remaining readable and easy to use during workouts.

Balance between brand energy and usability

Interfaces needed to feel energetic and aspirational while remaining readable and easy to use during workouts.

Balance between brand energy and usability

My Role + Scope

SCOPE

Led visual and interaction design for new product features across multiple platforms

Defined shared UI patterns that could adapt to different input types (remote, touch, bike controls)

Collaborated with product, engineering, and content teams to ensure cross‑platform consistency

Designed high-fidelity exploratory concepts to communicate future-state possibilities

SCOPE

Led visual and interaction design for new product features across multiple platforms

Defined shared UI patterns that could adapt to different input types (remote, touch, bike controls)

Collaborated with product, engineering, and content teams to ensure cross‑platform consistency

Designed high-fidelity exploratory concepts to communicate future-state possibilities

SCOPE

Led visual and interaction design for new product features across multiple platforms

Defined shared UI patterns that could adapt to different input types (remote, touch, bike controls)

Collaborated with product, engineering, and content teams to ensure cross‑platform consistency

Designed high-fidelity exploratory concepts to communicate future-state possibilities

TEAM INVOLVED

Product Manager

EngineersSystem Team

Design System Team

UX Copywriter

Research

Beachbody’s fitness platform attracted nearly a million active digital subscribers and sustained notable app store visibility, reinforcing the strategic importance of cohesive cross-device design.

USER PERSONAS

Jimmy

Age

Location

New York, NY

Occupation

Computer Engineer

Income

$140000

Health Condition

None

Need

Be more healthy

April

Age

Location

San Francisco

Occupation

Accountant

Income

$160000

Health Condition

diabetes

Need

Lose Weight

COMPETITORS

Primary competitors each offering subscription-based workout content across mobile and connected devices.

Analysis focused on identifying opportunities in cross-device cohesion, motivational data presentation, and scalable UI systems that could differentiate Beachbody within an increasingly crowded fitness ecosystem.

My Progress redesign

Redesign

Original design

Goal

Redesign progress section with new updated visual and new brand looks and feel. The updated UI should allow user to have more interaction options with clear data represented, and also be able to compare up to 3 index at the same time.

Process

Redesign progress section with new updated visual and new brand looks and feel.

The updated UI should allow user have more interaction options with clear data represented.

Compare up to 3 index at the same time.

Intro

MyLab assignment manager is assignment management tool for college instructor to assign assignment for student to work on

Note

What is needed in the list view verse the calendar view? For calendar view, user can browse at the glance what is going on in the whole month and provide a visual clue of what is scheduled. As for List view, it is easy for user to change ordering of what students are receiving. We provide these options for user to toggle between to achieve the best result.