B.FIRM Tagline
Overview
As the sole designer of B.FIRM, I went through an end-to-end user experience design thinking process to create a solution to improve overall health and fitness. B.FIRM is a mobile app that allows users to track food consumption and exercise, find workout videos and recipes, meditate for mental wellness, compete with friends, and more.
PROJECT BRIEF
Allow health-conscious individuals to log in to a responsive health and wellbeing portal to record their health, and access general physical and mental wellbeing features.
ROLES: UX Research, UX Design, Visual Design
TIMELINE: 3-Months
CLIENT: CareerFoundry, UX Course
TOOLS: Balsamiq, Figma, Draw.io, Xtensio, Canva, etc
B.Firm Onboading Screens
Problem Statement
I came up with a list of possible problems and solutions to make sure I understood the problem B.FIRM would be solving. I then drafted the following Problem Statement to help me to more easily engineer solutions that work.
Users need an inexpensive and convenient way to track their overall health and fitness goals without disrupting their busy schedules.
We will know this to be true when users connect their existing devices to the app, interact with the app's features, and connect with community members.
A person getting ready to search the B.Firm app for a workout or meditation.
"I don't have time to go to the gym. I want an easy way to learn workouts and track them from home."
Amy, B.FIRM Usability Test Subject
Personas
To see the product through the user's POV and to generate empathy for them, I created two proto-personas: Jon and Julianna.
These proto-personas helped me to conceptualize my target audience and to better understand the demographic, needs, goals, emotions, behaviors, fears, and limitations of my app's potential users. I referred to Jon and Julianna throughout the entire product development process to guide design decisions and prioritize goals.
Jon and Julianna, B.Firm Proto-Personas
User Flows
I mapped out the personas' user stories steps to see how I could simplify their journeys and help them reach their most important health and fitness goals with the app.
I determined success criteria, task flow, and designed a user flow for each objective.
Objective 1: Sync Wearable Device (Julianna)
"As a busy working mom, I want an easy way to sync my Garmin watch to the B.Firm app so I can track my workouts in one place."
Objective 2: Log a Workout (Jon)
"As a student-athlete on the football team, I want to track my sets, reps, and weights so I can see my progress and track my muscle gains."
Objective 3: Challenge a Friend to Compete (Jon)
"As a competitive athlete I am motivated by healthy competition so I can push myself to do my best and have fun in the process."
One of the user flows for B.Firm: Sync a Wearable Device
Sketches
I usually start the design process with low-fidelity wireframes created with pencil and paper. This is the way I iterate through many design options quickly.
My sketches were influenced by the users' goals and their flows. I sketched out a few different versions before deciding on the ones that seemed to get users to their goals the easiest with the cleanest looking design. I incorporated elements by ensuring they would be of familiar look and location to users.
Wireframes
At the beginning of my design process, I created wireframes based on my sketches for testing purposes.
I started with mid-fidelity wireframes created in Balsamiq followed by high-fidelity black and white wireframes created in Figma. I used high-fidelity wireframes for testing. After each round of feedback, I iterated on my designs to further refine them.
UI Design
Once I tested and fixed usability mistakes, I started designing the final screens in Figma.
I created a Style Guide and a Design Language Document outlining visual style and guidelines for the B.Firm app based on principles of Material Design and the iOS Styleguide such as color, typography, iconography, imagery, grids & columns, UI elements, animations, tone of voice, and accessibility.
Colors Style Guide from the B.Firm Design Language Document
View the full project on my porfolio: https://uxfol.io/project/0319dc7d/B-FIRM
I'd love your feedback!
Please reach out if you'd like to connect.
