Combining Two Systems into One

Integrated Website & Customer Portal Mobile Application

Timeline

2 Weeks

My Role

Product Designer

Skills used

Product Strategy

UX/UI Research

UX Design

Design System

UI Design

Usability Testing

Goal

Design a mobile app that combines the information from the dance studio's website as well as the ability to enroll in classes and order class uniforms from the current studio management system.

Process

01 Research

I've worked with several small business owners over the years to develop websites and applications to meet their needs.

I've also spent time volunteering in various roles at the dance studio my daughter has attending for 9 years - managing their enrollment and studio management software among other things.

I realized that the amount of information needed to meet the needs of competition level dancers was vastly different than what was needed by first time dance-parents that just wanted to enroll their dancer in a recreational class.

I began to develop a solution that worked well for both types of users!

02 User Needs

After years of volunteering at the front desk, helping new parents enroll, being a "back end user" of the studio management software as a worker and also a "front end user" of the same software as a parent, I realized there was a lot to be desired about the current systems!

Paint points:

The public/information website was separate from the enrollment/studio management software
Competition parents need a LOT of information while recreation parents need much less - the current system puts it all out there and attempts to label and guide people as much as possible, but it doesn't curate information for specific user needs.
Parents were asked to go to multiple places at various times during the year for various tasks - the public website to learn about class options, calendar dates, general studio information, the parent portal (a separate application that was linked to from the public website) to enroll students in classes, the parent portal at a later date to purchase class uniforms for students (often occurring anywhere from 1 week to 3 months after the enrollment), the parent portal monthly to pay various bills throughout the year, a variety of social media sites and emails were used to a variety of announcements and updates throughout the year.

03 Telling the User Story

I started with storyboards to get a big-picture idea of the user experience and also a close-up idea. This helps me sort out what aspects of the user experience I want to pay attention to as well as begin to detail out the flow of the design.

04 Design

After creating paper sketches versions to look at a variety of ideas, I used Figma to create my digital low-fidelity wire-frames. Paper sketches help me quickly look at several ideas and determine which one I want to turn digital for further refinement. I often end up creating a digital wire-frame that is a combination of ideas from several of the paper sketches.

This example screen shows only the class options that have been curated for the user based on the dancer information input on a previous screen.

This allows the parent to see only the classes that are appropriate for their dancer's age and level rather than being overwhelmed by all the options offered from the studio.

05 Prototype

Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.
Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.
Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.
Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.

Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.
Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.
Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.
Landing Page
The space between each icon and the use of labels resulted in high usability of the landing page.
REplicating the website information
The information from the website was included in the app to prevent users from having to use both
Clear Now and Future Charges
When enrolling for an ongoing class, it's important to know what the costs will be at the time of enrollment, but also what the ongoing costs will include.