SocialFit Responsive Website (Google UX Design Certificate)
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. To promote the app, I needed a landing page
The problem:
Finding a way for people to effectively workout at home. To make sure people knew about the app beyond the app store, I wanted to send them to a website
My role:
UX designer designing the SocialFit website.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Overview
User Research
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.
This website was made to promote the app.
Time
Affordability
Accessibility
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.
Mapping James’ user journey revealed how helpful it would be for
users to use SocialFit.
User journey map
Persona
Starting the Design
Sitemap
I was planning to make a website version of the app, but I changed my mind. I've decided not to include all the app features on the website since we want people to download our app
Paper wireframes
I had a rough idea of how it should look. I've created a lot of wireframes and decided to stick with one. Creating a stylish and easy-to-navigate website was my goal.
Digital wireframes
The digital wireframe looks like the paper wireframe. I liked it and it was close to the final product.
To encourage people to try our app, I added a testimonial section.
I wanted to include a link so people could download our app. That's what I wanted to emphasize.
Digital wireframes Screen Size Variations
I've made a mobile and tablet version. Creating a responsive website was important to me.
Usability Study
Refining the design
Accessibility considerations
I’ve added a colour scheme to be colour-blind accessible.
The menu icon has been removed from the desktop version to make it easier to locate.
Takeaways
Impact:
The desktop version of our app was developed to encourage people to download it, as well as to gain a deeper understanding of our mission.
The design was created in order to provide information about the product. It was critical for me to keep all the features in the mobile app. The desktop version received a lot of positive feedback, primarily regarding the design.
What I learned:
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. A smooth user flow on the desktop is important.
