This fall in my Web Design III course, we're in the process of completing a semester-long project by picking an existing app and adding an element that improves its user experience. As someone who spends a lot of time at the gym, I felt it was a perfect idea to add some new elements to an app I use all the time – the Blink Fitness app.
My role: UX/UI Designer
The Process – Design
First, I brainstormed what could be added to the app. Overall, the Blink Fitness app is very clean, well-designed, and easy to navigate, but I noticed there was one thing it was missing. On both the homepage and the profile page, there’s an option to view your billing information. But when you click on it, it just shows you a generic message.
The existing billing prompts (left) and the generic message that appears when you click them.
In order for a user to view their billing history from the gym, they’d have to go to their banking app and scroll through their tons of other purchases just to pick out the monthly payment to Blink. For my project, I decided to add a billing section to the app so users could view all their gym-related billing information in one place.
Once I decided my plan of action, I sketched out what each new page would look like.
Initial sketches of the "billing overview," "modify account," and "billing history" pages.
Once I planned out exactly what these pages would say, I sketched them out in more detail before designing in Figma.
Then, I began to design the app prototype in Figma. Emulating each page of the app helped me gain a deep understanding of Figma controls, tools, and prototyping capabilities. Below is the prototype before user testing:
The Process - User Testing
User testing is essential to making sure a prototype works the way you intend it to. I spent a studio class period having some of my classmates test out my app. I watched as they interacted with each page, and took notes as they voiced their feedback. I received a bunch of positive feedback on the design, but I noticed there were a few interactions I needed to fix in order to guarantee a smoother experience.
Although the app is made for those with a gym membership, it was beneficial to get feedback from people with different fitness backgrounds. While those who frequently attend the gym gave helpful feedback, others gave insights into aspects of the app that may have been overlooked. Using the recommendations from my peers, I was able to put the final touches on my app design.
Final App Prototype & Case Study
Click on the photo to view the final app prototype!
