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?

Crossfit

Games App

[ 1 ] THE CHALLENGE

Let’s create the best measuring stick of fitness in the world.

[ 2 ] THE BASICS

Creative direction and design for web, print and motion graphics.

[ 3 ] THE DETAILS

Proflific Interactive 2017, 8 months

Background
Constantly varied, high-intensity, functional movement. CrossFit has been championing this philosophy of fitness for nearly two decades. They’ve created a tribe of nearly 4 million people in all seven continents. And the Games is the yearly culmination of it all.The CrossFit Games is comprised of five competitions, peppered throughout the year. The Open is the first competition of the season and is open to all CrossFit athletes. Five workouts are done in the five weeks of competition. Everyone submits their score and their results are put on a collective leaderboard. Immediately see your fitness level compared to 500,000 other CrossFit competitors. So how might we create the best measuring stick of fitness in the world? How might we leverage and display the fitness data of over half a million competitors? And how might we create a tool that is scalable for all the other competitions of the CrossFit Games?
[ 01 ]

The main leaderboards for the Crossfit Games App

A Visual Identity Full of Depth and Life
Using the Twitter parent brand as a starting point, the Developer Platform evolves the use of texture and collages to celebrate the creativity of our developer community. Color palettes are simplified to create focus and clarity. Tears on the edges of compositions reveals code underneath, symbolizing the technology that powers everything we do.
[ 02 ]

Personalized cards show your rank compared to different regions.

[ 03 ]

Tap in to see your rank, percentile and workout scores.

Follow the Competition

The hero of the Open competition is the Leaderboard. The Leaderboard is the ultimate source of truth - it never lies! After submitting a workout, every athlete shows up here, ranked by performance. But with half a million competitors, athletes need a way to quickly view and filter through the Leaderboard to see what’s important to them. We developed the Leaderboard as a tappable cell that expands to reveal more stats and additional workout data. We made filtering intuitive and quick, keeping the user in the Leaderboard view.
[ 04 ]

Filter down the Leaderboard to see what’s relevant to you.

[ 05 ]

Tap and expand to see more info on an athlete.

[ 06 ]

Follow your favorite athlete’s progress right on your dashboard.

[ 07 ]

The main leaderboards for the Crossfit Games App

Android Ready
Our team was tasked to design and develop in both native iOS and Android. We worked closely with our development team to create a workflow that was fast and efficient to meet our Version 1 build date.
[ 08 ]

Exploring to find the perfect composition.

A bit about process

Our product team was designed to be nimble and tight – small enough where we could integrate and collaborate with the larger CrossFit office. We start the whole thing off by investing time at CrossFit HQ building relationships and learning about the CrossFit movement. We also spend time interviewing key stakeholders and listening to whoever would talk to us. Through a series of design activities and exercises, we develop an app strategy for the team to align on.  After prioritizing needs for a Version 1 release, we are off and running with short design sprints.
[ 09 ]

On-site workshops (and workouts!) at the Crossfit HQ in Santa Cruz, Ca.

Design sprints are highly collaborative with designers, developers and our CrossFit partners. By tapping into the expertise of the whole team, we’re able to find unique solutions to design challenges. Starting from initial sketches, my UX partner and I bring them from low fidelity wires to high fidelity final designs, building prototypes and iterating along the way. After user testing different prototypes, we go through several design iterations before landing on something we feel confident about.
[ 10 ]

Here are some early designs for the Dashboard view.

Not too shabby. Keep exploring below.

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