Twirlmate
Enhancing mobile usability of a baton twirling contest registration app by 36%
I used customer support data to identify where users were getting stuck. Then, I prototyped a solution and validated it with real parents and coaches.
View Live Site
Twirlmate is a webapp where parents and coaches register their athletes for baton twirling competitions.
The Problem
On the mobile version of the site, the pages where account creation ended and contest registration began were far apart—4 clicks!
This left users lost, confused, and frustrated halfway through the registration process.
The Goals
To address these issues, I needed to:
Redesign the account setup and registration flows to be more intuitive.
Optimize information hierarchy and page layout for mobile users.
The Impact
After redesigning the flow, I compared the old and new versions with 5 target users. During 30-minute usability tests, I collected quantitative feedback using the System Usability Scale.
The old version received a score of 65, slightly below the 68% industry average. However, the new version received a score of 89—a 36% improvement over the old version and an A+ rating according to Usability Geek.
Qualitative feedback also confirmed the new design was a hit:
"Wow! That was so much easier [with the new design]. Absolutely perfect!"
What was the difference?
How I Made It Happen
Set Up Design System
I started by creating Figma file, complete with variables and component styles for colors, typography, spacing, and basic form inputs.
Replicate The Original Flow
To have full confidence in the redesign, I needed to test it against the original flow. So, I replicated the account and registration process of the live site in Figma.
I could have used Twirlmate's staging or production site, but I chose to create a Figma prototype so usability test participants had a consistent experience between the original and new designs.
Identify Areas for Improvement
During this step, I also identified places where the responsive layout wasn't optimized for mobile users, or the general experience could be better:
-
Detail page headers were too tall, causing extra scrolling.
-
Vertically-stacked tabs felt awkward.
-
The confirmation page did nothing to summarize the user's purchase after it succeeded.
Reduce Scrolling
I experimented with different layouts and image ratios to find the right balance between visual interest, readability, and usability. The final result prioritized the event name while still showcasing the thumbnail image for brand recognition.
Add Helpful Confirmation Info
During the checkout process, users have two opportunities to review their purchase. Still, the page they see upon successful payment felt like a natural place to summarize the information one more time—after all, how many times have any of us double- or triple-checked something only to find an issue after we thought we were done?
Fix the Main Problem
Finally, the most important issue: providing new users with smooth path between setting up their accounts and registering for a contest. I considered just linking to the event list page from the account homepage. But that would only eliminate one click from the process. Users would still have to find the contest on the event list page and navigate to the registration page.
The best solution was to keep the user on the contest page the entire time, from account set-up straight into registration. That way, there was no need for additional wayfinding support.
Design the Study
After prototyping the original and redesign flows, I was ready to plan the testing.
I wanted each participant to see both designs. But to avoid an ordering bias, I created two groups. Participants in group A would see the original version, followed by the new one; participants in group B would see the new version, followed by the old one. To encourage honest feedback, participants would not know which group they were in or which version they were seeing.
After each prototype, participants would rate it based on the System Usability Scale (10 questions proven to measure how user-friendly people find a digital product).
As they completed the account setup and registration tasks, I planned to ask them non-leading, open-ended questions such as, "What is your first impression of this page?", "What are you thinking now?", "How does this match up with your expectations?".
Recruit Participants
My recruitment criteria were baton twirling parents or coaches who have been active in the sport this past year and preferably hadn't used Twirlmate before.
I first reached out to a core group of beta testers who'd previously expressed interest in testing new features. But once I didn't hear from them, I turned to the Facebook baton twirling community. After offering $15 Amazon gift cards in exchange for a 30-minute session, I had 3 parents and 2 coaches lined up.
Conduct Usability Tests
Without anything about the prototypes in between tests, I ran 5 30-minute usability sessions.
I captured positive and constructive user feedback with hand-written notes:
"It was a big jump to go from setting up my account to registering for the contest."
- P1 [Original Design]
"That was 100% easier the second time. I could figure that out myself."
- P1 [New Design]
An Unexpected Finding
To my surprise, one user actually praised part of the original design:
"I like the 'welcome' message. It feels warm and friendly. It's also reassuring to know I can change this information later if I make a mistake."
This was a good reminder not to abandon a previous design too quickly/entirely just because part of it isn't working perfectly.
Measuring Usability
Aftwards, I calculated each design's system usability scale score.
The original version received a score of 65, slightly below the 68% industry average.
But, the new version performed much better! It received a score of 89!
The Result
By leveraging user feedback and thoughtfully evaluating the current state of the app, I was able to increase the mobile usability of Twirlmate's account setup and registration process by 36%.