Thank you for reading!
Team: 1 Product Designer, 1 Developer
Skills: Native Mobile Design, Interaction Design, Systems Design
Timeline: April - September 2024
Tools: Figma, Miro, Milanote, Google Suite
Project Context
Overview
Problem
Dancers want to practice, but they have no central platform to easily see studios around them. Each studio has its own convoluted - and sometimes outdated - booking process. Dancers also have a hard time matching up their schedules to the studios’ availabilities.
Solution
I built this app to meet dancers’ unique needs. It automatically finds overlap with everyone’s schedules, and finds a physical location to meet up for that time. Currently there is no app on the market that tackles this dual use case.
Outcome
In 6 months, I conducted research, iterated and prototyped, and tested this app as the solo designer 0-1. During this journey I validated my thoughts and direction with my client’s developer, and received guidance from my project mentor.
View Prototype on Figma
Summary
If you're tired of scrolling, here's a quick <2 minute presentation that goes over the main points and deliverables of this case study!
A Streamlined Scheduling & Booking Process
Time-based, not location-based booking
Instead of the standard day-time-location approach, Dance Spaces starts by asking who’s coming. The user inputs the teammates they want to practice with, and the app automatically searches through everyone’s schedule to find open times in common. This simplifies the whole process and decreases the user’s mental load. No more massive group chats or overloaded calendars!
Booking flow with AI search prompt
Dance Spaces is an all-in-one solution for dancers to coordinate schedules and book studios. Its AI search function automatically finds the best times for dancers to practice, either by themselves or in teams of up to 50 dancers.
Final design: Designed for a variety of mobile screen sizes with adherence to both Material Design and Human Interface Guidelines. All body fonts are 16pt or more, and all touch targets are at least 48px across. Colors also meet WCAG 2.1 color contrast guidelines.
Insights from my local dance studios
What do dancers look for?
Before I started talking to people, I did some generative research to explore the problem space. I also looked up existing solutions online and conducted a heuristic analysis. I discovered a current market gap for dance-specific platforms. Existing space-rental solutions are more geared towards photoshoots or events. Studios may have their own websites, but they often have poor, inconsistent UX and require back-and-forth communication. Right now, there is no central platform that specifically caters to dancers’ needs.
To find participants for user interviews, I went directly to dance studios to attend classes and make connections. I also reached out to people on studios’ social media platforms and in my own network, sending out online questionnaires and recruiting 16 people to interview in person.
To help me organize the data from my conversations, I created an affinity map and an empathy map. I wrote down main observations from my interviews and grouped similar ones together. This helped me identify patterns, recurring pain points, and unmet user needs. With this knowledge I could prioritize areas to work on and make more informed design decisions.
As a dancer myself, I’ve always struggled with finding places to practice. In college we would find corners in public plazas and underground parking lots (we were broke with low standards). After hours on the concrete, our palms and knees would be covered with bruises and dust. With those memories still seared into my brain, I got to work.
Click images to view larger size
Competitor issues:
= Time
= Space
= Space
Inflexible booking
Not suitable for dance
No dance equipment
“One time we got double booked because the studio uses a bulletin board with post-its to keep track of its bookings.”
“I wish I could compare available studio times with my teammates’ availabilities”
Market and Competitor Research
For Nina, I created a journey map to visualize the end-to-end process of booking a studio, from initial intent to final confirmation. This laid out all the touchpoints and gave me a good overview of areas where I could design the most impact. For Nina, this meant making it easy to see her teammates’ schedules and book spaces that fit in those times.
Journey Mapping
Using the trends from these maps, I created 2 personas - a team dancer with general needs, and an individual dancer with specific needs. Through the rest of the design process, I referred to these documents to serve as an overview of users’ challenges, motivations, and frustrations.
Persona Creation
Dancers want to practice, but they can’t find the time and space they need. This is especially hard for dance teams, which often have stricter requirements and schedules.
1
Dancers have different needs depending on what style of dance they do, and whether they dance individually or on a team.
2
During my user research, I discovered 2 key insights:
I decided to focus on dance team needs. Designing for a more niche segment of users makes the experience more targeted and therefore, more useful. My question was therefore:
Individual dancers cared about time and space equally. But dancers in teams cared more about time than space. All of the team dancers I talked to complained about the difficulties of managing their teammates’ schedules and booking times with studios. I can’t make more studios appear from thin air, but I CAN provide a more streamlined way to take care of the entire booking process.
HMW help dance teams find time and space to practice?
Using this information, I decided to focus on a different value proposition:
a schedule-based search.
Based on my own experience, I assumed that the main problem would be space - finding nice hardwood floors with ample lighting and mirrors. I started brainstorming ways to make booking studios easier for people.
However, after conducting more user interviews and surveys with dancers of all styles, I realized another problem was more foundational: time.
User issues:
= Time
= Space
Team conflicts
Booking conflicts
No central platform
All this data can be summarized as thus:
The Search for the Right Search
Building the Booking Process
My initial idea was to let users search by tapping open times on their calendar. This was a little unconventional so I wanted to give users the option to do a traditional date-based search. I experimented with a toggle so users could switch the search method based on their needs and preferences.
Besides the main booking flow, the secondary red route was the calendar editing flow. Users needed a way to set their availability so the search would find times that actually work for them. The app needed to display overlapping schedules in a way that wasn’t cluttered or overwhelming.
Before continuing onto screen design, I mapped out the user flow for the main app functions: booking a space, and editing bookings.
After:
Before:
The Solution
The Challenge
How do I present conflicting schedules in a way that lets the user see overlap without overwhelming them with information?
I don’t! I let this guy do it:
Search with AI
By implementing an AI search feature, I can hide the complicated schedules and conflicts. The user sees only the times that works best for their whole team. This minimizes info overload and streamlines the booking process. No more need for calendar Tetris!
Search Wireflows
After the user selects what dancers they want to practice with and the app recommends a time for them, the rest of the flow follows a familiar booking process. According to Jakob’s Law, users spend most of their time on other sites and expect a new one to work the same way. Therefore, I made sure the rest of the flow was easily understandable to make the search experience as seamless as possible.
Primary
4 colors
Secondary
4 colors
Periwinkle
#D4CDFF
rgb (212, 205, 255)
hsl (248, 100, 90)
Lavender
#AD86FF
rgb (173, 134, 255)
hsl (259, 100, 76)
Violet
#6E00C5
rgb (112, 0, 197)
hsl (273, 100, 39)
Indigo
#580082
rgb (88, 0, 130)
hsl (281, 100, 25)
Seafoam
#ADFFE2
rgb (173, 255, 226)
hsl (159, 100, 84)
Mint
#6BF0B8
rgb (107, 240, 184)
hsl (155, 82, 68)
Teal
#097474
rgb (9, 116, 116)
hsl (180, 86, 25)
Cenote
#07454D
rgb (7, 69, 77)
hsl (187, 83, 16)
Design System
Branding
Heading 1
Heading 2
Heading 3
Heading 4
Body
Caption
Poppins
Yeseva One
Yeseva One
Sora
Sora
Sora
32 pt
24 pt
18 pt
16 pt
16 pt
14 pt
Regular
Regular
Regular
Semi bold
Light
Regular
Leading: 36
Tracking: -0.25
Leading: 32
Tracking: 0.0
Leading: 20
Tracking: 0.0
Leading: 20
Tracking: 0.5
Leading: 20
Tracking: 0.25
Leading: 18
Tracking: 0.25
Background: White #FAFAFF
Text: Black #100424
Dance Spaces sample text
Contrast ratio: 18.9
AAA
Background: Indigo #580082
Text: White #FAFAFF
Dance Spaces sample text
Contrast ratio: 11.6
AAA
Background: Seafoam #ADFFE2
Text: Indigo #490082
Dance Spaces sample text
Contrast ratio: 11.3
AAA
Background: Starlight #FFFCCD
Text: Cenote #07454D
Dance Spaces sample text
Contrast ratio: 10.2
AAA
Background: Periwinkle #D4CDFF
Text: Indigo #580082
Dance Spaces sample text
Contrast ratio: 8.04
AAA
Background: Violet #6E00C5
Text: White #FAFAFF
Dance Spaces sample text
Contrast ratio: 8.17
AAA
Color Contrast
Grids
I used a standard 4 column grid with 8 pt spacing for rows.
Logo design
Old: Using the D and S from the app title, I wanted to combine them into a fun lettermark.
New: I cleaned up the outlines and made the “S” shape slanted to add more visual interest and vibrancy, fitting for an app for people who love to express themselves with high energy.
Hi-fi Prototype
Optimizing Information Architecture
To optimize our most important flow, I redesigned the home screen to put the search prompt at the very top. This follows an inverted pyramid information structure, where users see the most important info at the beginning. I consolidated the Home and Search tabs into 1 tab and gave the active tab indicator a bit of color to make it more accessible to color blind folks.
With these changes, I then conducted 5-second tests with different participants. Even though these users had never seen my app before, they understood the premise and the main action they should take just from their first impressions. This feedback reaffirmed my decision to change the CTA and info architecture.
Before: Bookings are prioritized and there are 5 tabs in the bottom nav bar. Users are unsure where they should click first.
After: Bookings replaced by an eye-catching search prompt. Home + Search screens are consolidated into 1 tab.
When I first designed the home screen, I put a section for the user’s upcoming bookings at the very top, thinking that was the most critical info they needed to see whenever they opened the app. The search CTA was a small line of text.
However, with initial user tests, people were confused that the text took them to the Search tab. It seemed redundant to have both the link and the button go to the same screen. This meant they spent more time looking at the home screen wondering what they should do first.
Users choose which teammates they’d like to practice with.
App parses through the teammates’ schedules and presents the best options.
Users choose times that work best for everyone.
If users would rather look for availability themselves, or have a specific time in mind, they can turn off the AI toggle. This gives them the freedom to book with a more familiar flow, similar to other space booking apps. I wanted to keep this option open because, since as per Jakob’s law, users spend most of their time on other sites and are used to how those sites work. By giving users this option to perform a default search, this leverages their previous experience to make the flow more intuitive for them.
Users can still view all teammates’ schedules and conflicts/overlaps in the Calendar tab. This tab is where they can edit their own availability as well.
They can also compare specific teammates’ schedules.
The booking process begins by selecting teammates, as this choice determines the schedules displayed and the rest of the flow. During my user interviews, many highlighted the need for “office hours” with specific teammates—whether to make up missed practices or to work on particular sections of choreography. To address this frequently mentioned pain point, I prioritized features that allow users flexibility in booking. They can choose to schedule based on the entire team, or focus on specific teammates based on their needs for each practice.
Progressive Disclosure in Searching
For this app, I wanted to build out the main functions first. In the future I’ll be going back to the beginning to improve the onboarding funnel. This will include two different flows - new users and invited users. New users will take a quiz to segment them into either a team or individual profile. If they select Team, they will be prompted to invite teammates and add their team info. At the end, they can add their availability. Users who come from an invite will immediately be prompted to set availability so the person who invited them can see it.
I’ll also flesh out the AI search and provide more info on the AI process for skeptical users - a few test participants asked “What if it doesn’t work? How do I know if it worked?” I’ll also experiment with an AI chat prompt for power users who want to input the least amount of info.
“The whole experience is very smooth and simple, very comforting. They have thought of everything.”
“Similar to existing booking solutions so I don’t even need to think about it”
“I love the instant book buttons, I would use those all the time”
“Clean way to solve a messy problem”
Impact
Takeaway
User Feedback
I conducted 3 rounds of testing - 2 rounds of 6 tests each were moderated in person, and 1 round of 5 unmoderated tests were done through trymata.com.
Task success rate, user error rate, customer satisfaction score
Testing Objectives
Initial impressions including visual design, ease of use, and navigation.
Check if important elements (like buttons, search bar, and calendar) are discoverable & intuitive.
See if search flow and calendar view match users’ mental models.
Uncover usability problems in the search flow.
Validate that search filters (location, capacity, size, equipment, amenities) and options meet users’ needs.mental models.
User Testing
Solving for the right space at the right time
Building an AI-powered booking platform
Context
Research
Wireframes
Final Design
Testing