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 AM I PARTNERING WITH TO DESIGN THIS ?
Product Owner, Head of Design, UX designer, iOS developers, Photography and Video Director.

WHAT IS MY ROLE?
Sr. Visual Interface Designer. Supporting UX designer with light wires.

WHO AM I DESIGNING THIS EXPERIENCE 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, and celebrity trainers advice.

Wireframes + IA were in place.
 

WHAT ARE THE DESIGN PROBLEMS I NEED TO SOLVE? (HIGH-LEVEL)
• Establish a modular system to give the app structure & consistency. The system should accommodate full-width photography, headers, cta, infographics, video, and more.

• Craft a coherent look + feel of the interface and 20 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.

DESIGN PROCESS

RESEARCH PHASE:
• For this project, I worked with a  product owner, CD, UX lead, and copywriter. The team meets weekly to discuss project business goals and model, users goals, scope, and technical capabilities and limitations.

• The team has raised one concern that has to do with the way the UI will look in Android tablets, especially in landscape mode. To try to solve for this I quickly do android tablet best practices for video controls.

• The team discusses potential ways to market this product. Discussions revolve around doing a comprehensive e-mail campaign, personalized landing pages for users coming from different entry points or touchpoints.

• In parallel, I am directly collaborating with CD and showing him a design competitive analysis, usability best practices for tablets, paper prototypes.

• In parallel, I am directly collaborating with UX designer to review wires and flows and suggest ways to improve the experience.

INTERFACE VISUAL DESIGN PHASE:
• The team agrees that this experience needs a modular system so I start crafting at least 2 design solutions and present to the team twice a week. The main feedback I receive is that the message on modules need to fit for smartphones and there should be more visual treatment continuity from screen to screen.

• I create high fidelity prototypes using Invision and test it out with colleagues and other users. Document the pain point screens(users were tapping on the video time stamp, which is static) and share with my team. Reiterate and improve the experience a bit more.

• This project goes through at least three rounds of design reviews in a month until it is approved.

DESIGN HAND OFF PHASE:
• I create a components style guide documentation and share with developers.

•  I create functionality/interface behavior specs for not only devs but also for our internal designers so that they are all followed and achieved consistency moving forward. 

• I did Visual QA of the product before final launch.

This app was downloaded an estimated 1,500 times during the first week and got about 5,000 paid subscribers during the first two months.