Starpower Dance Studio
Mobile App
About the project
Starpower Dance Studio needs an app to help assist customers in paying for their/their children’s tuition, costume balances, competition fees, etc. in a more efficient and convenient way. Many customers were missing payments and were confused at what the payments were in regards to.
Role
Lead UX/UI Designer, UX Researcher
Project
Google UX Design Professional Certificate
Year
Oct 2022 - Aug 2023
Problem
Many customers were missing payments and were confused at what the payments were in regards to.
Solution
Create an app for Starpower Dance Studio to help assist customers in paying for their/their children’s tuition, costume balances, competition fees, etc. in a more efficient and convenient way.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
Starting the design
Refining the design
Going forward
Understanding the user
User research
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 pay for tuition in-person, and struggle to remember due dates.
This user group confirmed my initial assumptions about Starpower Dance Studio customers, but research also revealed that time was not the only factor limiting customers to miss payments. Other user problems included driving situations, accessibility issues, and personal struggles with making payments on-time.
User problems
(1) Time
Working adults are too busy to spend time driving to the dance studio to make certain payments.
(2) Accessibility
Platforms for making payments are not equipped with assistive technologies.
(3) Navigation
Text-heavy payment platforms in apps are often difficult to navigate or comprehend.
(4) Schedule
Payment schedules can be confusing if not given enough notice for sporadic & unplanned fees.
Personas
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 2 personas for each of our user segments. We used these personas to help us in our problem solving journey and decision making processes.
Persona 1:
Sylvie is a visually impaired psychiatrist who needs an easier and more accessible way to pay for her daughters’ dance tuition, and requires more accommodations for her visual impairments.
Persona 2: Logan is a Software Engineer with ADHD who needs a more convenient and accessible experience when paying for his son's dance lessons each month.
User Journey Map
We created a user journey map to build a better understanding of how customers find and interact with the current platform for Starpower Dance Studio's payment system, as well as discover opportunities for improvement.
The map allowed us to come to the conclusion that a mobile app was not yet created for the dance studio, and that this would be helpful for most users that would prefer to make payments on-the-go. We utilized this map & the opportunities and problems we will face at this stage in the user journey.
Starting the design
Paper wireframes - User journey
My goal was to create a user-friendly, simple navigation for my app’s homepage. My initial user journey went as follows:
Paper wireframes - App design
Prior to starting my design process using Figma, I created a rough draft of paper wireframes to lay out the different ideas that I had regarding the app homepage structure. I researched the way other popular mobile payment apps are structured to assist this process.
I added a star next to the components that I thought would potentially work when translating these first sketches into low-fidelity wireframes in Figma. Using my favorite components that I pulled from all 5 of these screens, I mocked up a drawing of what a first iteration of the app's homepage could look like.
Digital wireframes
Throughout the initial design phase, I worked on creating a clear layout for the mobile payment home screen. One of my goals was to ensure that the menu navigation is easily accessible to users.
Some items I wanted to include in my first iteration were:
Menu icon to help user navigate the app.
List of fees and balances for the user to choose to pay.
List of charges for the user to choose from.
Navigation CTAs between pages.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of logging into Starpower Dance Studio’s mobile payment app, navigating through the menu, and going through the process of making a payment.
Refining the design
Usability testing
I created a fully-functional, high-fidelity prototype of the new flows using Axure. At the same time, we started recruiting subjects for the test who fit our criteria. We did 4 usability tests in the first round and 3 after iterating on the issues that we’ve identified:
Round 1 findings
Users want a more intuitive Menu navigation
Users want a simple way to select fees to pay
Users want an easy and quick payment process
Round 2 findings
Users want a way to schedule payment reminders
Users would like to see recent/urgent payment notifications at the top of the homescreen
High - fidelity prototype
The final high-fidelity prototype presented clean, concise, and smoother user flows. It also provided a way for users to view a description of the fee for their own understanding.
Accessibility considerations
(1) Provided an “Accessibility” section within Settings for users who are visually impaired & need an option to use a screen reader.
(2) Used high-contrast colors for icons, and text to make it easier navigate & see for visually impaired users.
(3) Provided the option to schedule payments, which may assist users who have ADHD or are simply too busy to remember to make payments monthly.
Going forward
Impact
The app provides a seamless, accessible experience for parents and students of Starpower Dance Studio to make payments successfully.
What I learned
While designing for the Starpower Dance Studio app, I learned that all ideas are worth exploring, and taking peer feedback into consideration can help see your designs from a different perspective.
“It’s just like any payment app that I usually use.”
Next steps
Add further functionality into creating a flow for setting up payment notifications & scheduled payments for users.
01
Conduct additional usability studies to determine if there are further user pain points to address.
02
Look into adding additional screens & drill-ins to Settings page.
03
Thank you for reading my case study!
If you’d like to see more or get in touch, contact me using the link below!