Forme Life

Case Study

[ 01 ]

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

[ 02 ]

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

01

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

[ 02 ]

Heading

Forme Life

Case STudy

Heading

Heading

Heading 6
Heading
This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

Forme Life

Case Study

[ 01 ] THE CHALLENGE

What does the future of home fitness look like?

[ 02 ] THE BASICS

A first of its kind fitness machine combines an elegant resistance trainer with a full length, touch screen, mirror.

[ 03 ] THE DETAILS

fuseproject, 11 months

A First of Its Kind
Forme Life is creating the next movement in home fitness. Designed to be free standing or mounted on a wall, the machine fits in the home as a piece of furniture rather than an at-home gym. We aimed to set Forme Life apart in the fitness equipment space by setting the new standard of beauty and craftsmanship.

See some new press on Forme Life here.
[ 01 ]

The Home screen and Workout Preview screen

A Seamless Experience
The physical product seamlessly blends the front full length mirror with its aluminum side and back casing. Creating a digital experience that complemented the physical experience was an important design principle that guided our UI and motion design. From the thin and elegant typography choices to the way elements come onto the screen, each design decision reinforces the magic of the digital mirror.

[ 02 ]

Elements coming into view from the edge of the mirror. (Home screen introduction)

[ 03 ]

We used soft fades on the bottom and sides to hide any sharp edges. (Active workout screen)

[ 04 ]

We chose thin typography for a crisp and elegant feel. (Workout Browse and Filter screens)

A Complete Workout
Each Forme Life workout is created with you in mind. Home athletes take a fitness assessment that tests baseline abilities. Forme Life then creates a tailored plan to meet the needs of each athlete. The workout experience is created by instructor-led video, supported by an on-screen digital interface. Every movement get scaled to match the baseline strength of the athlete, appropriately increasing intensity. Workout summary screens give the athletes data and analytics after they finish their session, offering further context into their fitness journey.
[ 05 ]

Fitness Assessment summary graphs showing exercise tasks and repetition scores

[ 06 ]

Workout Summary screens with summary stats

[ 07 ]

A moveable keyboard that users can adjust to their preference. Input fields and controls stay inside the keyboard view for higher context.

Rethinking the Interface

Designing touch interfaces for the full length mirror demanded that we rethink every interaction and user flow. There were two primary distances that we designed for; 1) interaction distance and 2) workout distance.

Interaction distance was close enough for athletes to reach out and touch the screen. While the whole screen was digital, we quickly discovered that only the top quarter of the screen was usable at that distance. Text had to be at eye’s height to be comfortably legible and touch interactions had to be around chest height to prevent arm fatigue.

At workout distance, athletes would be several paces away from the machine, busy doing their workout movements. Text had to be large enough to be quickly glanceable while keeping the center of the mirror clear to make room for the athlete’s reflection in the mirror. We also designed voice commands for the most often used tasks so athletes could control the station during a workout.
[ 08 ]

Voice commands on an Active Workout screen

[ 09 ]

Custom Workout Creator optimized for desktop and tablet websites. Choose exercises, adjust reps and create sets.

A Seamless Experience
The physical product seamlessly blends the front full length mirror with its aluminum side and back casing. Creating a digital experience that complemented the physical experience was an important design principle that guided our UI and motion design. From the thin and elegant typography choices to the way elements come onto the screen, each design decision reinforces the magic of the digital mirror.

[ 10 ]

Additional Exercise Cell controls - changing the order or duplicating an exercise.

[ 11 ]

Manage the workout library or create a custom workout.

[ AA ]

Early exploration of the look and style of the brand.

A Bit About Process

We base our process on the power of conversations. We believe listening is the ultimate key in understanding what problems to solve. Through conversations with stakeholders, trainers and athletes we begin to collect ideas and concepts that hold impact for them. These rough ideas and concepts need to be developed through the process of design and iteration.

Since we are co-creating the Forme Life brand from the ground up, our visual exploration of UI is an important input in informing the direction of the company identity. We use key screens, like the active workout screen, to explore a wide range of looks and executions to hone in on what starts to become the visual foundations of the rest of the project.

Further designing, prototyping and testing of each piece of the experience is necessary to make sure we’re designing the right thing for the right reasons. Iteration is the craft that brings that magic into what we build. Doing the hard work of designing, testing and iterating over and over again is the core of building these meaningful experiences.
[ BB ]

Home screen layout exploration

[ CC ]

Assessment Summary design exploration.

Not too shabby. Keep exploring below.

// Page load at the top, https://forum.webflow.com/t/load-page-at-the-top-when-the-user-refreshes/62163/6