OVERVIEW
Summary
Staying motivated to workout regularly and keep track of your fitness goals can be difficult. There are so many ways to stay healthy and fit today, so I intend to make a web app that makes it easy for all levels, schedules, and interests.
Challenge
People of all skill levels want to fit regular fitness into their busy schedules. They need a way where they can find workouts that fit their needs, track their progress and goals, all while motivating them to stay on course.
Solution
I will design a responsive web app that anyone could use to find the best workouts for their needs. Fitted will keep users motivated with great usage of colors, imagery, and typography.
User Stories
"As a new user, I want..."
to learn about different exercises, so that I can figure out what is best for me.
I want to be shown how the exercises are done, so that I know I’m doing them correctly.
I want to be able to schedule exercises for working out, so that I build positive habits.
I want to be able to earn achievements or rewards, so that I can stay motivated.
I want to track progression and record what I’ve done, so that I can see my progress over time.
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.
User Flows
Iterative Wireframing
I took a progressive and iterative approach to creating wireframes for Fitted. Starting with paper sketches, I transferred the initial concept to a low-fidelity digital form.
Over the course of the project, I slowly applied the concepts I was learning to eventually come together into high-fidelity wireframes.
It wasn’t until I had created these high-fidelity wireframes that I started working with animations and prototyping.
Over the course of the project, I slowly applied the concepts I was learning to eventually come together into high-fidelity wireframes.
It wasn’t until I had created these high-fidelity wireframes that I started working with animations and prototyping.
Paper Wireframes
Mid-Fidelity Wireframes
Visual Direction
Option A
Option B
Before I got too far with the designing process, I created two mood boards to help me decide which direction I wanted to go with Fitted. Both are distinct and convey different messages. I felt like Option B was the better option based on the project brief.
Color Palette
I knew I wanted to use that specific color of minty green as my primary color to portray health, and growth. I used this color as the seed to start generating this AI generated color palette. I felt they looked more harmonious than a classic triad or analogous scheme.
Mobile Grid
Since I was designing Fitted in a mobile-first fashion, I needed to establish a grid that I could stick to throughout the project. This would evolve once I started designing for tablet and desktop breakpoints.
Neo-Brutalism
While I was experimenting with what colors, typefaces, and icons to use for Fitted, I discovered a visual style called Neo-Brutalism. I thought I could apply this style to Fitted in a interesting yet simple way.
The changes may be subtle, but I think the added depth creates a sense of tangibility for users. Giving them the ability to really feel connected to their fitness app. This transition in visual styles helped me reimagine my icon sets, and led to overall better color usage.
Larger Breakpoints
The challenge of designing mobile-first and then upscaling to larger breakpoints is deciding how to use the new space. For Fitted, this often meant I could combine multiple screens into one without sacrificing the visual integrity.
Prototyping
As I mentioned earlier in this case study, now that I had high-fidelity wireframes of my responsive web-app, Fitted, I was ready to start prototyping and adding animations.
As a UI Designer, this is where you can finally see your visual decisions in action. It’s the UX knowledge though, that allowed me to properly apply interactions, gestures, and animations to my app.
As a UI Designer, this is where you can finally see your visual decisions in action. It’s the UX knowledge though, that allowed me to properly apply interactions, gestures, and animations to my app.
Conclusion
Key UX Perspectives
As a UX Designer, understanding what a UI Designer does is important. Empathy for the user comes from empathy within a design team.
Being able to sink my teeth further into the visual design aspect has really opened my eyes into the different, yet symbiotic relationship between UI and UX. Without good visual design, the experience design fails. It makes sense why so many people get the two separate fields confused.
Being able to sink my teeth further into the visual design aspect has really opened my eyes into the different, yet symbiotic relationship between UI and UX. Without good visual design, the experience design fails. It makes sense why so many people get the two separate fields confused.
Next Steps
If I had more time to work on this project I would continue to tweak and refine the UI. I would want to make sure that the user experience I was trying to create was being accurately conveyed by the visual design work I had done.
Since this project was mostly focused on the UI side of things, I did not get too far into user research or user testing. If I was in a UI/UX type of role, I would start to think about testing my current prototype with real users.
For future projects, I will continue to hone my visual craft with my new knowledge in:
Since this project was mostly focused on the UI side of things, I did not get too far into user research or user testing. If I was in a UI/UX type of role, I would start to think about testing my current prototype with real users.
For future projects, I will continue to hone my visual craft with my new knowledge in:
- Responsive layouts/grids
- Typography
- Iconography
- Color usage
- Typography
- Iconography
- Color usage
