Timeline:
June 3, 2024 - Nov 21, 2024
Role:
UX Researcher & Designer
OVERVIEW
Creating an End to End Application.
The primary goal of my project was to design a comprehensive end-to-end application. It focuses on supporting users at the start of their fitness journey, with a particular emphasis on beginners.
PROBLEM
Getting started on this fitness journey, but how does one do that correctly?
When it comes to working out, getting started is one of the hardest parts. Many challenges come after that. As beginners, they have many questions, but where do they get the answers?
PROCESS
Research Goals
Competitive Analysis
User Interviews
COMPETITIVE ANALYSIS
USER PERSONA
POV’s and HMW’s
Persona
POV’s and HMW’s
User Flow
Low-Fi Sketches
Mid-Fi Wireframes
Logo Ideation
UI Design
UI Kit
Compared a few fitness competitors.
Created a competitive analysis to view similarities and differences between all the apps. I found that all apps have very similar ways of sharing information within management and only leaders are able to view certain things. There are lots of limitations to non-desk employees.
MID-FI WIREFRAMES
Prototype
Usability Testing
Affinity Mapping
Ideation
USER INTERVIEWS
Getting to know peoples concerns and lifestyle.
Connected with individuals both new and seasoned to fitness. Led 3 User Interviews with participants that are interested in fitness in general. I had to goals during this interview: Identify user's challenges in their fitness journey and Uncover what’s stopping them working out / being consistent with it.
Key Findings:
Highlighting one of the beginners in their fitness journey.
The overall app is meant for users of all fitness levels. The beginner level crowed is always an area in the fitness industry that needs more structure and availability to learn correctly. This will help people learn about fitness knowledge, health, create less injuries, gain confidence and more.
I have Sophy here who is still fairly new to weight training and at times feel anxious about starting this new journey since it’s an area she has very little knowledge of.
LOW-FI WIREFRAMES
Dive deeper into understanding different scenarios. Created two POV’s with about 10 HMW’s for each.
POV #1: Sophy is still fairly new to working out and needs someone to show her the ropes in the gym because she is not too confident about utilizing the machines herself.
POV #2: Josh who prefers working out alone needs a set schedule and workout program because he’s doesn’t like the feeling of being a burden since he’s a beginner.
USER FLOW
Outline the step-by-step paths users take to complete key actions.
Creating multiple user flows involves mapping out the various paths users can take to complete different tasks within the app, such as registration, scheduling workouts, and adjusting preferences.
1. Onboarding
2. Workout Schedule
3. Target Muscle Group Exercises
4. Add/Remove Workouts
Link to my full User Flow work file here.
Started with drafting out a few ideas on how I would like to approach this design.
After my research with the competitive analysis and user interviews, it was time to start creating a Low-Fi Wireframe. Mainly created these wireframe based on inspiration from other apps. My main focus on these Low-Fi Wireframes was too just see how many options I can create without much thought.
Moved forward with one idea.
With some help from my mentor, I decided to develop with one of the ideas that felt more like a schedule and has a bit of structure. With this app being more geared towards beginners, keeping simplicity is important while navigating through new journey like fitness.
HIGH-FI WIREFRAMES
Getting closer to the final product with unique screens.
Made a few adjustments during this process. The process includes incorporating user-friendly layouts, clear navigation, and motivational elements tailored to beginners, ensuring the design promotes ease of use and engagement while supporting users in achieving their fitness goals.
TESTING
Results after testing.
Tested my High Fidelity Wireframe with 3 participants. I gathered information and put it into an Affinity Map. Then I was able to group everything in to four groups: Worked, Opportunities, Needs, and Questions. After grouping them, I was able to get started on the iterations and here was my process.
ITERATIONS
STYLE GUIDE
Iterations that was made
Implementing changes after testing.
After testing, making iterations to my wireframes involves refining the design based on user feedback and insights to enhance usability, address pain points, and better meet user needs. Before testing, my mentor gave me a lot of feedback which helped a lot with so only minimal changes needed to be made.
Before
After
THE FINAL SCREENS
The final product.
CONCLUSIONS & LESSONS LEARNED
Tools:
Figma
Final thoughts on what I could have done differently.
This was my last capstone project of the whole program. And though I am proud of myself for what I was able to accomplish, there is still so much to learn and endless areas of improvements. This project was not only difficult because it was an End to End Project, but in my personal life, I was tested with many hardships. With that being said, here are a few things which I felt I could’ve approached differently.
1. Diving deeper into UI Design - I could have spent more time exploring a wider variety of UI design inspirations to fuel my creativity and broaden my perspective. Diving into platforms like Dribbble, Mobbin, and Pinterest, or analyzing popular apps, would have exposed me to different styles, patterns, and solutions. By collecting and categorizing these references, I could have drawn from a richer palette of ideas to refine my design. I’ve been very focused on finishing up the program that I’m in that haven’t given myself time to slow down.
2. Understanding Trends - I could have dedicated more time to studying design trends and best practices across various industries to ensure my work stood out while remaining functional. This research would have helped me identify innovative approaches and adapt proven design principles to suit my project's needs. By staying updated on industry standards, I could have created a more polished and visually compelling interface that resonates with users. It can sometime be very overwhelming to learn certain trends and time consuming, but this is one thing I would like to focus on for the next project.
3. Consistent Feedback - I could have established a process for gathering constant feedback throughout this journey, rather than waiting for formal testing phases or through my mentor. Engaging regularly with peers, mentors, or potential users would have helped me identify pain points and opportunities for improvement earlier in the process. Creating iterative prototypes and sharing them frequently could have fostered a more collaborative approach, allowing me to refine my ideas based on real-time input. This would have also ensured that my design stayed aligned with user needs and expectations. By incorporating consistent feedback, I could have delivered a more polished and user-centered final product.
