SocialFit App (Google UX Design Certificate Project)
The problem:
Finding a way for people to effectively workout at home.
The product:
SocialFit is an app to encourage people to work out at home at a fraction of the cost of a gym membership. We want to offer personalized workout plans and a social platform where people can share their progress/tips/experiences.
My role:
UX designer designing the SocialFit app
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research Summary
I have conducted interviews and empathy maps to understand the users I’m designing for and their needs. The primary users were adults who didn’t have time to go to the gym and were looking for a quick and efficient workout at home.
The primary user groups were people who paid for a gym membership, and they barely went. They needed a way to stay fit and healthy. For some of them, finding a partner to encourage them on their fitness journey was hard. They wanted an app that was low-cost, efficient, and entertaining.
Working adults are too busy and tired to workout at a gym.
Some fitness apps are too expensive and many people can afford that.
Some apps when not using the right colours for color-blind and most of them don’t have assistive technology
Time
Affordability
Accessibility
Persona + User Journey Map
Starting the design
Paper Wireframe
I wasn’t sure what I wanted the app to look like. I was brainstorming a few ideas and came up with these first mockups. I was looking for an app that was easy to navigate and stylish.
Digital Wireframes
I wanted the main page to be easy to navigate and interactive. I have taken some inspiration from other fitness apps and came up with this design.
I have included a bottom menu for users to access the setting page easily and the app's main sections.
The profile icon also serves as an access to the settings page.
Digital Wireframes
I’ve created an easy navigation design for users to register on the app. I was looking for looking simple and stylish.
I wanted the app to be inclusive.
I’ve created a huge button for users to move on the next page.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Mockups
I've added more interactive designs for users to understand the app better. The app's primary purpose is to create a personalized workout and meal plans.
I've changed the colours of the app to be colour-blind friendly. It was a recommendation from a peer review.
High-fidelity
prototype
The high-fidelity prototype includes more interactive designs. The user flow is cleaner and easy to navigate.
High-fidelity prototype
Accessibility considerations
I have to change the app's colour scheme to be colour-blind accessible.
The icons used in the app are easy to understand and improve the navigation process.
There’s an option on the app to change the language.
I’ve learned how much usability studies are essential to improve a product. The project helped me understand what I’ve learned in all previous courses.
Takeaways
