Transform fitness mobile app

A fitness and nutrition mobile app based on program developed by TV personal trainer Chris Powell

Worked closely with stakeholders to understand program and organize ideas into an interactive mobile design, from concepts to prototypes, to testing and refinement.

  • Produced wireframes, flow diagrams, prototypes, and customer journeys
  • Developed on-boarding flow and freemium model
  • Dashboard customized around user behavior
  • Meal planner with library of meals and nutrition facts
  • Custom workout timers and logging

Retrospective

Chris and Heidi Powell are personal trainers, widely known for hosting the reality TV series Extreme Weightloss on ABC. Chris Powell has authored several books in which he has developed a workout and nutrition program. The goal of their app was to offer the program in a guided interactive format for their fans to "transform" their body.

Information architecture

My work began with initial research, reading through Chris's latest book, and meeting with him regularly to discuss the book and better understand his training approach. This lead to figuring out the app's structure and putting together notes and rough sketches.

The final top level navigation would consist of an overview dashboard, meal planning, guided workouts, personal stats, and community sharing options.

Wireframes

As you can probably imagine, the app was turning into quite an ambitious effort! Not only did it require translating a full health and nutrition program into a simple, guided plan, but the meal and workout features were extensive enough that they could each be their own standalone apps!

Wireframes were initially made as rough sketches of key screens and eventually turned into black and white mock-ups using basic design patterns.

Work that was fleshed out would also allow for setting up the meals and workouts databases. The meals entailed breaking down individual ingredients to use for categorization and the shopping list, as well as recipe instructions. While the workouts required individual workout movements, grouped sets with a set time for each set, and categorized into a workout schedule.

Interactive prototype

As more black and white wireframes were being produced, I decided it would be helpful to put them together in an interactive prototype as a way to show how a user would go from screen to screen. Tapping on regions on each screen would link to other screens as if using the app, and it was accessible via a URL the team could pull up on their iPhones and turn into a mock app with the "Add to homescreen" feature.

We would end up using this prototype throughout the duration of the design stage, with updates pushed to it regularly as we would continue to brainstorm and discuss ideas. We went through several iterations of the black and white wireframes, getting into key secondary screens before turning to branded, high-fidelity designs. From around ten starting screens linked together, to over 100, as we refined design elements and figured out interaction details that we would provide to the dev team.