The project
UI design for responsive fitness web-app
Role
UI Designer
CareerFoundry mentor
2 months
CareerFoundry
Figma, Canva, Angle
Challenge
The challenge was to create the UI design for a responsive fitness web-app, FitCrew, based on the project brief and UX deliverables provided by CareerFoundry and using the mobile-first approach.
Result
Created the structure and UI design for a responsive fitness web-app prototype
Process
Ideate
User persona and key features
Define
User flow and low-fidelity to mid-fidelity prototype
Visual Exploration
Moodboard, color, imagery, typography
High-Fidelity Prototype
High-fidelity wireframes and prototyping
Polishing the Design
Gestures, responsive design, mockups
Ideate
User Persona: Rebecca
Rebecca is a busy software developer who lives with her boyfriend and 3-year-old daughter. A friend from work recommended FitCrew to help Rebecca get in shape.
“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.”
Goal 1
Rebecca would like to lose weight and get in shape, which is made difficult by her sedentary lifestyle and busy schedule.
Goal 2
As a beginner to working out, Rebecca wants something that will help her learn how to properly exercise.
Goal 3
Rebecca wants a tool to help keep her motivated and help her find short exercises she can fit in her day
Key Features
To solve the main user problems and to help Rebecca reach her goals, I decided to emphasize informative and motivating features, also requested in the project brief.
Search and filter workouts
Select workouts by type, duration, level etc.
Helps the users find an appropriate program
Workout history
Seeing progress made is motivating
Helps plan future workouts
Community
Motivating due to support and accountability.
Share progress and workout challenges and give and receive support with likes and comments.
Gamification:
Milestones and Badges
Creates a sense of working towards something and feeling of accomplishment, helping with motivation
Schedule workouts and
set reminders
Having a clear schedule and plan helps with consistency.
Less likely to cancel a set appointment.
High-quality instruction
Video exercises and full workout details
Video and demonstrations with movement breakdowns.
Define
User Flows and Low-Fidelity Prototype
With a good idea of Rebecca's main goals and the features required for the app, I set out to create a basic structure or the app by creating user flows. This would also help me know all the necessary screens I'd design later in the process.
Based on the structure of the app I created a low-fidelity prototype in Figma that would work as my base for the rest of the project.
Mid-Fidelity Wireframes
With a good idea of the necessary screens and overall structure of the app, I translated my low-fidelity wireframes into mid-fidelity wireframes and prototype, refining which UI patterns and elements I wanted to use.
Deciding which patterns and elements to use was one of my favorite parts in the design process, as it really shows how UI and UX work together. Good UI really supports and enhances UX decisions.
Visual Exploration
Moodboard
With the foundation of the app in place, I started focusing more on the visual side of the app. To discover the direction the visuals should take, I started by creating a moodboard.
This was one of the most challenging part of the process for me, since there were so many possibilities for different directions. What helped was focusing on the key words and keeping my user persona in mind.
Fun
If exercise is fun and lighthearted, it will motivate people to exercise and make forming new habits less daunting.
Easy
The target audience has a busy and hectic schedule and the app should make it as easy as possible for people to get into exercizing without adding extra fuss or pressure.
Approachable
The main user group are beginners or people returning to exercise. We want to encourage them and make exercise accessible, not intimidating.
Typeface: Poppins
One font is enough for this app since it is not text heavy.
Poppins fits the character with its round shapes, it's a web font and is legible and readable at different sizes.
Color
The color palette from my moodboard ended up looking too cold so after some exploration I pivoted and went with color palette1 - an analogous palette with blues and purples, purple being the main color.
Photos
Motivating and informative photos of professionals, with a light and energetic feel, describing movement, avoiding dark and very intense photos, passive photos or images of elite athletes.
Illustrations & Icons
Illustrations would be for in milestones and badges using mostly rounded shapes. Achieved badges will be in color, deactivated in greyscale.
For icons I decided to use the Untitled UI kit
High Fidelity Prototype
One of the main challenges for me was building the high-fidelity version of the more complicated UI elements, such as the graphs and calendar. This really helped me improve my skills with Figma and learn about the process of building elements.
Gestures
Since I was using the mobile-first approach, this was a great opportunity to explore gestures and interactions.
The main interaction would be tapping, but there are a few places where a swiping interaction is implemented.
Responsive Design
The app uses a mobile-first approach and most users would probably use the app on a mobile device, but the web-app is responsive and functions across different breakpoints
Final Product
The app uses a mobile-first approach and most users would probably use the app on a mobile device, but the web-app is responsive and functions across different breakpoints
Next Steps
While I’m happy with my design so far for the purposes of creating a case study, there is always room for improvement
I’d like to try building a sliding menu for the exercise card elements
Expanding the Community-section
Refining the Milestones and Goals-feature
Refining workout notifications
Most importantly, I would conduct user tests to check functionality and that everything works as intended and I would make iterations based on the results.
Restrospect
I really enjoyed this project: especially UI patterns and elements as well as interactions and animations are areas that I would like to study further.
This project was eye-opening to how connected UX and UI really are and how they can support each other.
I learned a more structured approach to UI design and have a clearer process to follow.
I am more comfortable using Figma, though there are still more features to learn.