HABFIT Fitness App

Sketch, InVision, Adobe Creative Suite

HABFIT Fitness App

Sketch, InVision, Adobe Creative Suite

Week 1: Project background and process

I designed this brand and app for mobile iOS. I designed with a user-centered approach including a persona, problem statement, design principles, mood boards, style tiles, prototype, a style guide. A team of UX designers at Designation provided a user journey map and a set of wireframes to assist the UI designers.

The persona was useful for understanding the user. The wireframes were annotated by the UX team with recommendations for iOS interactions and opportunities for micro-interaction.

Visual competitive analysis: Icreated a visual competitive analysis to understand the marketplace and find opportunities for the product to differentiate and present users with a better value proposition.

I analyzed in-market fitness apps like SWORKIT, FITSTAR, FITOCRACY, and The 7-MINUTE WORKOUT, and learned what was in the marketplace in terms of content, how it was organized, visually represented and designed for user navigation and interaction.

A few screens from my visual competitive analysis. FitStar is now Fitbit Coach therefore no link exists. PDF files for each can be viewed at the following: SWORKITFITSTARFITOCRACY and 7-MINUTE WORKOUT.

Week 2: Creating the brand

Design principles: The UX team developed design principles for the functionality and user experience of the app but the UI designers were challenged to create our own set of brand pillars and design principles to inform and validate our design decisions.

Above are the brand pillars and brand statement I wrote for HABFIT.

Logo design and branding: As always, I started the logo work with sketching and idea generation. until I came up with 3 compelling concepts. I show my two favorites below.

Each one below represented a concept focus but still aligned with the four basic design principles that I wrote previously. Each logo was presented in black & white and color with a description of the concept and usage.

Week 3: Defining the mood and style

Mood boards: I created three mood boards to further define the design direction that would fit the user persona. All of them were created with the design principles in mind. Each mood board was inspired and designed with a specific logo concept in mind.

Style tiles: Once the mood boards were defined, I created a style tile for my two favorite directions. The style tiles not only reflected the mood but proceeded to define the UI elements that would be used in the screens.

Creating style tiles was a good learning experience for me. This new step in the design process helped me more confidently evolve the design to screens by exploring and defining the typography, icons, buttons and general UI elements. Left style tile is for Simple and Dependable concept and the right one is for the Strong and Bold concept.

Week 4: The screens & prototype

Screens and iterations: I then used Sketch to create the visual design for the user flows.A sampling of screens is shown below. The center image contains a link to the prototype and here is a link to the PDF file for the screens produced in Sketch.

Week 5 & 6: Styleguide and RWD Marketing

Style guide: After completing the final screens I created a style guide. This was one of the last steps in the design process. It provided information for future content for the design.

Marketing: I designed a responsive marketing page for desktop browser and mobile viewing that presented the information hierarchy so it would make sense on both devices.

I solved this by starting with the mobile version first and then translating to desktop.

I wrote all the copy for the marketing page. I started with the value proposition and followed with the main benefits. I then detailed the features by showing them on a mobile screen in a carousel to engage the viewer. I then showed the motivational badges and social sharing functions that differentiates this product from competitors. The marketing ends with a strong call-to-action and links for purchase.