Updating and redesigning Cali Move’s online fitness product pages
Discovery
Brand strategy
Web design
UI design
Content writing + editing
LEIPZIG, GERMANY
The client
Calisthenic Movement, aka Cali Move, delivers online exercise training videos and fitness programs that focus on skills development, strength, mobility, and nutrition. The Cali Move YouTube channel has over 4.1 million subscribers.
The goal
With a growing subscriber base on YouTube, Cali Move wanted to redesign and update its program product pages to appeal to the diverse fitness needs of its users.
The aim was to help users better understand the benefit and scope of Cali Move exercise programs, including the level requirements and training focus for each.
The challenge
Cali Move wanted to show that their paid programs expand on exercise techniques found in their free YouTube videos and that users can get fit within a reliable, long-term training framework.
To highlight the benefits of the programs, we separated page information into smaller sections to help users connect their individual needs with Cali Move programs, beginning with program overviews and gradually moving to fine details. We also focused on designing and writing headlines for an international audience who may not be fluent in English.
The design solution
We created a standardized layout and information flow for all programs, including Complete Calisthenics, Mobility, Body Transformation, and Home Workout.
We saw a lot of dark design motifs in our fitness market research. To counter this darkness and match Cali Move’s scientific approach to fitness, we designed a bright and spacious layout with lots of white space and contrast between colours and text, including Cali Move's signature blue.
Simplifying the Requirements section
Users new to exercise might not be familiar with exercise names but may recognize them with the help of images.
To show what kind of exercises users need to do in the Requirements section, Sven and Alex provided photographs. I created silhouettes and a simple information panel to display the various exercises and their rep/time ranges.
Understanding the Phases
Cali Move programs are divided into phases, each with its focus and benefits, including periods for rest and regeneration. To summarize this information and show users the scope of the programs, we designed cards, allowing users to cycle through program levels using the numbered buttons above.
The site-building process
We did extensive discovery sessions before development, followed by an analysis of competitor websites. We wanted to understand Cali Move’s place in the online fitness market and evaluate competitor design and presentation.
With our discovery brief and market analysis we collaborated online between Canada and Germany to determine the content and page flow. I built low-resolution monochrome page prototypes in Adobe XD and later high-resolution layouts. I also helped write and edit page content to accommodate Cali Move’s international audience.
The final page designs were delivered to a CSS web developer to create layouts and adapt everything to the Teachable platform.