Company
Uptown Fitness
Interapt
Logical Imagination
Role
- Collect User research
- Designed Mockups
Deliverable
- User Surveys
- User Interviews
- Personas
- Journey Maps
- User Flows
- Sitemap
- Wireframes
- Prototyping
- Usability Testing
- Design System
Time Line
3 Months
Achieve your Goals
Understanding the user
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to cook meals.
This user group confirmed initial assumptions about Uptown Fitness customers, but research also revealed that time was not the only factor limiting users from going to the Gym. Other user problems included lack of options, not being able to view and sign up for classes, and not being able to get a full workout due to gym busyness.
Meet Carissa
Based on 12 user interviews of Uptown's clients and potential clients, I created a user persona to empathize with my users' needs.
Some of the most important outcomes of the user research included:
- - Lack of awareness of classes and times offered by the gym
- - Difficultly booking trainer sessions
- - Arriving to classes that are already full
- - General lack of knowledge about fitness
- - Difficulty planning classes around personal schedules
Starting with the core
Once had all the background and research completed I decided to start by wireframing the most important screens like how the display of trainers and class schedule would look. I continued by defining other screens that the user goes through to schedule a class.
Staying Organized
Creating a sticker sheet for reoccurring elements helps me stay consistent through out my design process.
I chose this color pallet to evoke a strong feel and eye catching appeal. The dark red is associated with energy, willpower, leadership and courage.
I went with a navigation bar to allows the user the opportunity to organize the content. Allowing the user to focus on one section at a time.
Developing a Framework
To devise a plan of how our users would navigate our MVP (minimum viable product), we created a sitemap.
I conducted a remote open card sort activity (8 participants). The goal was to see if the participants would group these features similar to the way we organized our sitemap.
Only three minor adjustments were needed.
First Iteration
and usability testing
Before
The use of the back arrow was very hard for users to see. Many users were stuck on the page and needed help to know what to do next.
After
Adding in the back button allows for our users to have a clear path for navigation.
Feedback
To further improve the user experience of the high-fidelity prototype, different stakeholders were approached and asked to provide design feedback.
The applied feedback improved the tone & language of the existing text descriptions and enhanced the design to be more user-friendly.
Final Product
I wanted to focus on Making my designs more modern. In order to account for the feedback of not having a clearly defined flow, I created Additional screen that flesh out the UI a lot more while keeping in mind of consistency, hierarchy, alignment, and all the basic design principles throughout.
I Created a darker look and feel to the UI to make the colors stand out more and given the design a more modern current feel. Using elements from the “Material 3 Design Kit” I was able to create a more updated navigation bar used throughout the UI.
I made sure to design with the intension to capture someone’s attention above the fold, rather than design everything above the fold. Utilizing Gestalt principles while designing the layout I kept in mind how close in proximity elements are to one another, as well as keeping a continuation with colors that follow a path to guide my user.
