Fit Habit, UI Case Study

A user Focused Approach

Project brief included all user research, an outline of the target user and user stories, as well as list of feature requirements. I quickly created a user persona and selected key user stories to help me focus on exactly what the user needs and wants as I started the design process.

Birds Eye View of the Product

I created user flow charts to investigate different possibilities and connections of the product architecture. This was important because it gave me a birds eye view of the entire product and ensured that all product requirements, as well as user needs were accounted for. This process gave me some structure to tackle ideation with pen and paper sketches and beyond.

User Flow Chart

Taking a Mobile First Design Approach

I began the design process by setting a timer for 20 minutes, doing pen and paper sketches of mobile screen versions. They were rough, but they also allowed me to get out a lot of ideas, then I selected the most compelling sketches to move forward with and create low-fidelity wireframes in Figma.

Why focus on mobile first? With mobile screens you have limited space to work with and the challenge of distilling the most important content into a small space. I like identifying/ clarifying core features and content and exploring how to best present on mobile then moving to larger screens.

Defining Breakpoints

Defining breakpoints for responsive design for each screen type early in the design process ensured that I thought about the best user experience for each screen type. This also set me up for visual consistency at every fidelity level in my design process.

Clarifying Visual Mood

Clarifying visual mood was key before moving into the next stages of visual design. I had clear brand guidelines which included fun and easy to navigate, as well as some colour direction with orange and black as anchor colours.

At this stage sharing the mood board with stakeholders can be a great way to check on visual alignment of designer and stakeholder and make adjustments before diving into the details.

Design Documentation

I created a Style Guide to document and clarify the current visual identity of FitHabit across all platforms. This ensures brand consistency, keeps everything in one place for team reference and offers a space to make updates. This guide includes Typography, Icons, Colours, Image guidelines and more.

While working on the Style Guide and iterations of the product design in Figma I also created text and colour styles as well as reusable components to speed up my work flow in High-Fidelity iterations. Not only is this helpful during design stages, but also helps prepare assets for handoff to developers, and makes workflow more efficient with other designers on the team.

A Closer Look at Meeting User Needs

In this section I’d like to show product screens and discuss the reasoning behind my design decisions.

LANDING /MARKETING PAGE

Landing Page/ Marketing Content focuses user attention on the purpose of the product. Large, real photo of user provides visual inspiration. ‘7 Day Free Trial’ no barrier to entry to reach fitness goals. Every aspect of the landing page is focused on converting user from all aspects (visual, intellectual and experiential).

‘Try a workout’ option lowers barrier to experience a workout video and prove the value of the product.

Track you fitness/ progress with a minimal progress interface does not intimidate users by all the possible data.

Full screen view for mobile optimized mobile workout experience and aligns with the user need to play a workout on any device that’s available.

Dashboard

Today’s Workout is the most prominent feature on the screen to capture the users attention and next click.

Schedule Workouts leads to a screen with workout options and easy scheduling.

Simplified progress/ stats keep user informed, but not overwhelmed.

Try a Challenge a bonus feature to keep user engaged with new challenges and community.

‘Up next’ video’s gives user a heads up and on track with a lineup of workouts aligned to user goal.

Solution

Below is the mobile prototype of FitHabit. The solution specifically focuses on the user ‘Rebecca’ from the project brief and addresses her need to lose weight and be time efficient with workouts. However, from a big picture view, the solution creates a solid foundation to evolve the product and serve more users and their needs.

Outcome & Impact Reflections

Given that this was a student project with focus on visual design, it did not go through every stage of the User Centered Design Process, it also did not ship. As a result, I don’t have real metrics to show impact, but I do have reflection on the potential impact that my UX/ UI design decisions could have.

1. Minimal, Clear and Inclusive Design makes it accessible to many users.Opportunity to cast the net wide and appeal to a wider user base. ‘7 day free trial’ eliminates barriers to entry to experience product.
2. Show progress and achievement, but not too much. This was intentional because it is easy to get lost in all the numbers and graphs.
3. Choose a goal, then choose a program that focuses on the user's goal. This algorithm goes beyond access to all the workouts to target user specific goal.

Next Steps

• This project has taught me the value of creating design systems and reusable components. As a next step, I am working on improving my work flow and efficiency in Figma.
• The project brief focused solely on user needs, I am also interested in designing solutions for the profit aspect of the product. For example, exploring different subscription and referral options.

More Projects:

Parent Toolbox: iOS Native app

View Case Study