WHAT IS COSMOBODY APP?
CosmoBody is an iOS Tablet + Smartphone subscription-based fitness video service that brings you strength, cardio, new yoga, and dance workouts from celebrity trainers.
WHO IS IT FOR?
It is for people who like working out but don't have the time to attend a gym. Users have access to professional workout videos, challenges, trainers advice.
Wireframes + IA were in place.
MAIN PROBLEMS TO SOLVE:
• Define a modular system to give the app structure + achieve internal design consistency
• Craft the look + feel of interface (many modules)
DESIGN PROBLEMS I SOLVED:
PROBLEM: The app content is dynamic. (Workout videos refresh daily). We need a flexible design system.
MY SOLUTION: A card-style design that is attractive and very practical.
Why this UI pattern? Because the card is a small container that allows me to present a beautiful image of our workouts along with one line or 2 of copy with a strong cta.
PROBLEM: We will design a lot of modules (Hero, Editor's Pick, Motivational, Branding-Related, etc.) How do we achieve consistency?
MY SOLUTION: Let's create a design system and organize modules by category + hierarchy. Ex: Hero module will only appear on a landing page and will expand full width. It can only present 4 elements: An image to the right, an eyebrow, title, and a max count of characters for copy deck.
PROBLEM: What's the rationale for establishing the visual treatment of modules/overall look and feel of app?
MY SOLUTION: Look and feel should be coherent with Cosmopolitan Magazine brand attributes: Bold + Sexy combined with elegant typography
We have beautiful licensed photography of the trainers who convey the active style that our audience loves. So let's propose an image-driven app. We should stay away from using embedded fonts and use only system fonts. Follow the Cosmopolitan Style Guide and use Fuchsia as primary color but combine it with black for a contrast and elegance.
PROBLEM: How can we give the app visual structure?
MY SOLUTION: With a grid system we can create any number of columns that will accommodate all the modules and will make it easier for people to navigate and find content. The grid will also allow me to quickly add or delete elements without breaking up design.