#HealthIsWealth

Mobile App

Introduction

#HealthIsWealth by André Crews originated as a newsletter filled with workout regimens, fitness and nutrition tips, as well as motivational messages. It evolved into a blog, but André wanted to create an app that would allow his followers to further engage with his workouts by being able to save and track progress on workouts right on their phone.

Problem

The development team and I needed to figure out an intuitive way to implement saving + tracking personal progress. As this was an MVP, we didn't want to overbuild this feature and instead focused on keeping it as simple as possible.

Solution

We built a news feed to display all WODs (Workout of the Day) as well as André's blog posts. Users can add a note to each WOD where they can save personal information relevant to their workout, such as reps completed and weights used. After a note has been saved, the workout is added to their in-app calendar so they can reference it at a later date.

Timeline

4 weeks

Role

UX/UI Designer

Team

Marlon Brillantes (FE), Darnel Clayton (BE)

SketchInVision

User Flows + Wireframes

Knowing we wanted to keep the MVP pretty simple, I created user flows and wireframes to share with the development team to ensure the designs would fit within the scope of the project.

Each blog post or "episode" of Health Is Wealth contains a workout of the day (WOD) and relevant fitness or nutrition tips. While our goal was to allow the user to save a WOD to their app with their own notes, one of the challenges was that we could not attach notes to blog posts in the app.

To work around this, I created two card types: blog posts and workouts. Users could read blog posts in a web view in-app, but then visit a native view of the WOD, allowing them to add their own notes and save it to their calendar.

Style Guide + Prototype

We modeled the color palette after André's existing site. Turns out, he's a big Steelers fan.