UX & UI Design

Fit4Life responsive website and app

“Lightweight baby!”
Ronnie Coleman

Passion project

An interactive and responsive website for a fictitious fitness coaching service for people new to technology.
This project was created in Figma.

Check out the final prototype for yourself!
Final Prototype

Responsibilities

• UX designer and researcher
• Created key user flows and wireframes
• Created high-fidelity wireframes to show the full product experience.

Problem statement

Many people cannot go to a gym, or they have no idea what to do for a workout. The solution is to create a user-friendly platform that connects coaches to the users, gives them a workout program based on their goals, and helps with any steps.

Product duration

January - February 2022

My role

UX designer

Goal

Creating a user-friendly responsive website and mobile app easy for people who are not good with technology.

Tools used

Figma, Unsplash, & Mockuuups (Figma plugin)

Design process:

Designing the right things

The design brief was set, and personalized workout programs would be available via several devices! But why and how? After defining the problem statement and goals, it was time to start diverging on what the user was needing for this app to be successful. The user needed a personalized workout program that helped with their personal fitness goals; All while keeping contact with others at a minimum, giving a clear-cut program to follow versus creating their own, and availability of a coach to communicate to with questions or concerns. Why did they need a fitness app that could offer that you ask? Well, it’s for several reasons: not everyone knows what to do at the gym, and it can be intimidating to work out in a gym when you don’t have a plan or know what you want to do. It can be very expensive to hire a personal trainer on top of a gym membership, and depending on the location and availability of gyms, it might not align with the user’s work hours.

Once the competitive audit and review research was complete, it was time to draft up some wireframes. My goal was to make the website minimal and keep the learning curve low. From the information I gathered, I was able to gain a lot of insights, themes, opportunities, and HMWs. I then started to converge on design changes in the wireframes and move forward in the design process, to design things right.

Designing things right

Now it was time to start the cycle of ideating, getting all those ideas out, establishing a design system, prototyping, and testing. The design system was designed with colors and typefaces for growth and energy, something lively. Color blindness options were added for the entire app. If usability tests had been done, I would have wanted to test out the likes, dislikes, and any potential confusion with the “fitness journal” and “current program” verbiage.

Typography & Colors
Components

Results:

Fit4Life responsive website

This was a rewarding passion project. Being involved in the fitness and strength training community for several years now, and seeing the benefits that come from staying active are priceless.

Discover
Define
Develop
Deliver
Research Phase:

Discover

In this tab you will find my problem exploration, brief research, what I discovered from the research and how that influenced my design.

Problem exploration

For this quick project I was able to interview five people to get a basic understanding of where they stand with technology and with fitness. I targeted the older population because this responsive website is targeting users who are not great with technology and also helping attain fitness goals. The five people were between the ages of 60-75, different races and backgrounds, all had varying levels of fitness and technological savviness, two females and three males.

Brief interviews & their results

1: What do you prefer to use, a computer or a mobile phone?
2: Depending on answer above, what kind of device is the computer or mobile phone?
3: Do you like using technology? On a scale of 1 to 10 how comfortable are you with technology?  
(Context: 1 being the least comfortable, and 10 being the most comfortable.)

4: Are you physically active or wanting to be physically active?
5: Do you have a history of being physically active?
6: Do you have any pertinent physical ailments that might keep you from being physically active
7: If you are interested in being physically active, how many days a week would you want to work out?
8: What would your goals be for exercise?

Over 50% of users want to workout three days or more.
90% of users are interested in being physically active.
Over 50% of users ages 60 or over have an ailment to some degree that can deter their physical activity.
All of the user’s goals are different, so allowing personalized goals will be most advantageous.
Over 50% of users will be using their computers, so I will use the graceful degradation approach.

How will this influence my design?

⭐️  Easy to use filter for exercise plans for # days/week.

⭐️  Offering lots of options to peak everyone’s interest.

⭐️  Substitution options for every workout

⭐️  Daily “how are we feeling” log prior and post workout.

⭐️  Easy to use filter for exercise plans for # days/week.

⭐️  Offering lots of options to peak everyone’s interest.

⭐️  Personalized goals.

⭐️  Points system.

⭐️  Start with a larger screen (cpu) and work my way down to a mobile device.

Synthesis Phase:

Define

In this tab you will find my user's pain points, how might we brainstorming, personas, and their bio.

User pain points

🔥 Intimidated

It can be very intimidating to start going to a gym for someone who doesn't know what they are doing or even where to start in regards to their fitness goals.

🔥 Work hours

Inconvenient work hours that do not coincide with hiring a trainer or going to some gyms, 24 hour gyms are not available everywhere.

🔥 Expensive

For someone with a tight budget, adding a cost of a gym is not ideal.

🔥 Availability

For busy schedules it can be difficult to find the time to go out of your way to a gym. Finding something that can be added to your schedule without adding a new location to commute to is ideal for most.

How might we...

... create a dashboard that is personalized per user?

... keep track of where the users stand in regard to their goals?

... help the users fill out information as quickly as possible while on the go?

... create a personalized profile and bio?

... create a workout journal that can be personalized?

... keep track of users with pertinent health history?

... allow users to stay informed on other ways to live a healthy lifestyle?

... enable users to keep track of their daily stress and fitness levels?

... allow users to get to know the coaches of the company?

... adjust the screen to view in light or dark mode?

Meet the personas.

Lenoria

"Life is what you make it."

Lenoria is a busy store owner who wants help achieving her goal of improving her grip strength because that will help improve her day-to-day lifestyle.

Her goals:
⭐️  Workout 5 days a week
⭐️  Improve her grip strength
⭐️  Improve her overall fitness

Her frustrations:
🚫  Doesn't have time to go to a gym and work with a trainer.
🚫  No 24 hour gyms available near her.
🚫 Can't spend hours working out to reach her goal.

• Full name: Lenoria Johnson
• Age: 77
• Location: Philidelphia, PA, USA
• Mobile/Web Pref: Web
• Job: Store owner, works long hours.

Lenoria’s backstory:
Please call me Noria. I grew up in Philidelphia, I loved playing pick up basketball when I was younger and sometimes even field hockey. Since then, between work and having five kids being active has fallen to the side. I want to improve my overall strength, but especially my grip strength.

Andre

“Find a way and not an excuse."

Andre is a retired teacher who wants to increase his knee strength to help reduce his achy knees and improve his day-to-day lifestyle.

• Full name: Elizabeth Rhodes
• Age: 25
• Location: Grosse Pointe, MI, USA
• Family: Dog named Jim
• Job: 9-5, customer service with General Motors.

Her goals:
• Improve baking skills
• Eat all the cookies
• Try new things
• Bring cookies to work

Her frustrations:
• Inconvenient bakery hours with her work hours.
• Ordering a shipment in is nice, but never hot and as fresh.

Liz’s backstory:
Elizabeth, or Liz, works a pretty standard 9-5 job just north of Detroit. She loves a busy office, the coffee, the co-workers and the lovely treats brought into the break room. Liz has a huge sweet-tooth and loves when there are sweets brought into work. She loves the local cookie shop, Detroit Cookie Company, and all their unique gourmet cookies.Unfortunately due to the bakery’s location, hours of operation, and Liz’s work schedule, getting fresh cookies from her favorite bakery is just not do-able. Liz is not much of a cook, but for the sheer love of cookies and wanting to impress her coworkers, she wants to mimic her favorite bakery. And if she learns some cooking skills along the way she won’t be mad about it.


His goals:
⭐️  Workout 4 days a week
⭐️  Improve knee strength
⭐️  Reduce achy knees
⭐️ Go for a walk pain free

His frustrations:
🚫  Doesn't want to spend money on a gym membership.
🚫  Doesn't know where to start at a gym.

• Full name: Andre Salvador
• Age: 66
• Location: Dallas, TX, USA
• Mobile/Web Pref: Mobile
• Job: Retired teacher, enjoys living near a large family.

Andre’s backstory:
My name is Andre, I grew up on the outskirts Dallas. When I was younger I played high school and some college football. Since then, I was a runner until my knees really started to give me issues. Now, I just don’t want to be limited on going for a walk.

Ideation phase:

Develop

In this tab you will find information architecture, wireframes, low fidelity prototype, and insights.

Information architecture
Wireframes

Home

1. Logo of website
2. Category and button to that page
3. "Please log in" prompt
4. Links to pages of site
5. Social links

**Note: The side menu will stay in a fixed position while the user scrolls. This is to create a safe place for the user to refer back to and never feel lost.

User dashboard

1. Title of page
2. Image the user uploaded
3. Bio of the user
4. Personalized goals and where they stand with the goals
5. Button to edit goals
6. Section of quick links such as workout descriptions, blog, workout journal, etc...

Coaches page

1. Title of the page
2. Coach image and their bio
3. Logo of the site

Workout plan

1. Page title
2. Sections for the workout such as warm up, exercise, and post exercise, etc...

Low fidelity prototype

Sometimes schedules are very hard to work around and being able to have digital access to all the forms and records is the best way to go.

Check out the prototype for yourself!
LoFi Prototype
Implementation Phase:

Deliver

In this tab you will find my final high fidelity design and information on handoff.

Final high fidelity design
Check out the prototype for yourself!
HiFi Prototype
Handoff

If this was a real project and not a passion one, I would have been involved with the development team earlier in this process. Specifically during the start of the develop phase. I believe that early communication and collaboration can go a long way with helping make a process easier and potentially faster. Even after handoff I understand that the process is not over, more potential renditions, collaborations, and redesigns will be needed.