Blink Fitness App Billing Redesign
Allowing users to view, modify, and understand their billing information in a blink.
Role
UX/UI Designer
Timeline
9/2023 - 12/2023
Project Summary
The Blink Fitness app allows members to have an all-in-one gym experience right at their fingertips. Launched in 2019, the app is home to features for every gymgoer:
Seamless check-in: using their membership barcode on the home screen, members can check in to the gym simply by scanning it at the front desk as they enter the gym.
Manage membership: view membership details and gym locations, add guest passes, sign up for personal training, and more!
Track progress: keep track of check-ins, PT sessions, and app workouts, and earn badges as you reach certain achievements!
Complete workouts and meditations anywhere: browse the app’s robust library of workout and recovery routines, and get your fitness on from anywhere.
Target Audience
Blink Fitness members
Exercise enthusiasts
Constantly on the go
Value time and money
The Problem
Currently, the app is lacking a place to view past billing cycles and edit/modify members’ billing information.
Blink Fitness members need easy billing management because it:
Fosters transparency and trust
Streamlines account management
Facilitates budgeting and planning
Enhances member retention and loyalty
Goals
Improve user satisfaction
Optimize account management
Reduce support requests
Design Process
Once I decided the feature I was going to add, I did a very broad sketch of what I wanted to include. I knew I wanted to have a “billing overview” page, an “add card/modify account” page, and a “view full history” page.
After completing my sketches, I began building the rest of the app in Figma. I developed a feel for the design system after a while, and I formed a clear idea in my head of what I wanted the new pages to look like. I went back to the drawing board and created more detailed sketches of what my billing section would look like. This time around, it included a login page – even though members have to log in to use the app, I felt it was important to add another layer of security to one’s banking information. Blink’s branding includes tons of puns using the word “blink,” so I knew I had to incorporate that somewhere in the login as well, which is why it says “blink pun goes here” in the sketch!
As I continued building the app, I prototyped as I went in order to streamline my workflow. With almost all my frames done, I went forward with my user testing. All users that tested my app were Graphic & Interactive Design students at Quinnipiac, but they all had varying knowledge of the gym. I thought this was necessary because it’s definitely important to have frequent gymgoers test the app, but it’s also necessary to gain an outside perspective. Here’s the feedback they provided:
User 1 – Not a gymgoer
Some pages within the app didn’t have a navigation/back button which created frustration, so adding those would be helpful
The billing section was accessible without logging in from the homepage, but a user had to log in from the profile page, so I needed to make those consistent
The bottom navigation was glitchy, needed to fix interactions
User 3 – Not a gymgoer
Many of the same points as User 1 & User 2
Smaller text is hard to read for those with bad vision, so that’s something to keep in mind
User 2 – Frequent gymgoer
Very clean, great transitions
Many of the pages had “back” buttons, but some of them got caught up in a cycle of the same two pages if there was a nuanced interaction. Making sure the “back” arrows lead to the correct frame is key
User 4 – Frequent gymgoer
On certain frames, make sure that when a user clicks “back,” the previous page returns to its original scroll position
Tons of positive feedback on interactions and design
Try to incorporate the “save” button for workouts/meditations
When I finished my user testing, I took all that feedback and implemented it into the final design. Click the image below to view the final prototype!
