Design Brief To Design Systems
ReFitt is a responsive web app that aims to help people get into an exercise of their choice by holding their hand and providing routines, guides, interactive examples, and info. This project was part of my CareerFoundry UI course.
Role:
My Team:
Stakeholder
Project Scale:
Tools used:
UI Designer
Just me!
ReFitt (CareeFoundry)
October 2022 - December 2022
Figma, FigJam, Lucid Chart, Loom, Adobe Photoshop
The Problem & Brief
Finding exercise routines for your level can be difficult, especially if you want to try something new. Refitt aims to help people get into an exercise of their choice by holding their hand and providing routines, guides, interactive examples, and info. This web app is designed to encourage people who want to exercise get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
What?
A responsive web app where users can search and view routines, guides, daily challenges, and other information on any device.
They can also keep a schedule by adding sessions to their personal calendar.
when?
As the web app aims to get users into a routine that suits them, the web app can be used whenever they like.
They will use the web app while they are searching for, scheduling, and following routines.
Where?
When on the go or when practicing exercise routines at home, in the park, on the street, etc. Users can stay fit anywhere, as long as they’re logged in on a device.
Why?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)
To save time by fitting exercise into daily routines.
Who?
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Refiit
Rebecca
- Software Developer
- 26
- Master’s in Software Development
- In a relationship
“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise
Goals
- Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
- To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
- As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
- Rebecca wants help finding routines she can enjoy.
Tasks
- Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.
- In addition, she wants to find short exercises that she can do multiple times per day in between other activities.
- She wants the tool to keep her motivated as well, as her schedule can often be distracting.
Environment
- Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
- Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.
- Technological: Rebecca is very tech savvy, as she works on computers every day.
User Stories
- As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
- As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
- As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
- As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
- As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
- As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
- As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.
Feature Requirements
- Search and filter exercise videos (based on type, difficulty level, length, etc.)
- Exercise scheduler (based on exercise interests and actual daily routine: commute, sit at desk, etc.)
- Option to add sessions to calendar
- Create user accounts
- Tracking and charting of users’ progression over time
- A game layer with individual daily challenges, achievements, and/or rewards
- Social sharing for routines or favorite exercise
Brand Guidelines
Key Messaging:
- “Exercise is something anyone can pick up, find something they love, and fit it into their daily schedule”
- “Getting back into exercise doesn’t have to be an ordeal”
- “Track your progress to see how a little effort goes a long way”
Style:
- Easy, informative, fun
- Orange, black
User Flows
User flows enabled me to see which pages of the application Rebecca would interact with when carrying out specific tasks.
User flow 1
“As a new user, I want to learn about different exercises, so that I can figure out what is best for me.”
.
User flow 2 & 3
2) “As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.”
3) “As a frequent user, I want to complete daily challenges, so that I have an additional way to stay motivated”
.
Entry Point: Push notification
Success criteria: Has completed the recommended daily challenge and recorded it in the app.
Wireframes & Prototyping
With user stories, user flows and required functionality determined I began sketching out as many viable solutions for the different features/requirements.
Low Fidelity Wireframes
I then chose the best solution for each of the features and created low fidelity wireframes
Grids
& Spacing
Before building out the designs into higher fidelity versions it was important to determine the grid and spacing guidelines that were to be followed throughout the project to ensure consistency and responsiveness. These were added to all the low fidelity wireframes.
Visual Style
The aim of Refiit is to help people get into an exercise of their choice by holding their hand and showing them suitable options, whilst also encouraging people to get into an easy fitness routine, which could be as little as 5-minutes.
Fitted needs to be easy, uncomplicated and welcoming. Mood boards that evoked such feelings were created to help govern the visual style.
Colours
& Typography
Suitable
Imagery
Using images that matched the colour palette and mood board were important to help the overall visual design to gel well, so images containing orange accent colour are perfect, as are clean and brightly light photos.
It’s important to use images Refiit's users can relate to including a mix of genders, ethnicities and body types. Images showcasing workouts at home that don’t need expensive gym equipment and look relatively easy to do are important as Refiit s aimed at beginners or those coming back to exercise.
An Iterative Process
Responsive Design
As this was a web app product, that could be accessed on a variety of screen sizes, I created designs for the 3 breakpoints previously established.
The Final
Product
The full figma file with wireframes, components, style guide and mockups can be viewed here.
Click the image below to view the interactive prototype.
My Work
I overhauled a struggling mobile app quiz feature, boosting engagement and knowledge retention. This repositioned the web and mobile apps as valuable e-learning tools for educators and helped initiate B2B discussions with Disney.
Role: UX Designer
Stakeholder: Da Vinci (Macademia)
Industry: Ed-tech, Entertainment
Unlocking success with a friction free onboarding redesign
90% of users who downloaded the mobile app dropped during the onboarding journey. I designed a friction free, “try before you buy” experience with the goal to reduce this number to 60%.
Role: UX Designer
Stakeholder: Da Vinci (Macademia)
Industry: Ed-tech, Entertainment
Coming VERY soon!
A native mobile app with the mission to make finding financial advice easy and accessible for millennials. As the sole UX/UI designer I was responsible for all research and design work.
Role: UX/UI Designer
Stakeholder: SET
Industry: Finance
