Stage Door Dance

This project is focused on redesigning the Dance Training Website to provide a more intuitive, engaging, and user-friendly experience for dancers of all levels.

Background:

In this case study, I’ll share my experience redesigning a dance training website to improve usability. The platform offers tutorials, instructor profiles, and class registrations, but outdated design and inconsistent features led to usability issues. The goal is to create a more cohesive, user-friendly experience.

Team structure:

- UX/UI Designers

- Product Managers

- Researchers

My Responsibilities:

handled UX/UI design, user research, wire-frames, prototypes, user flows, and testing. My friend Sowgand helped with some research and development. and also Arezoo and Saboora in user research phase gave us hands.

Diamond ONE: Discovery

The heuristic evaluation phase revealed significant usability issues in the current dance training website, hindering user experience and navigation. Addressing these problems is essential to create a more intuitive and efficient platform for users.

We conducted a heuristic evaluation with a team of four mid-level product designers. First, we aligned on the evaluation goals and process, then defined the heuristic principles and key questions for each. We spent time ensuring everyone fully understood the principles and evaluation criteria before starting the review.

Problem discovery (Heuristic Evaluation):

- Redundant item repetition

- Unnecessary information,cluttered pages

- Lack of search, filter, or sorting options

- Difficulty accessing class information

- Confusing and challenging registration process

‍

Problem definition (Competitive Analysis):

In the competitive analysis phase, we evaluated key features across similar websites—Placedestart, Davina Swim House, Dancelike, and Dancercise.

We focused on the availability of essential functionalities such as:
sign-in, sign-out, and account management options, as well as the presence of search or filter bars for ease of navigation.



We also assessed the inclusion of self-introductions for instructors, the use of images, videos, and detailed class descriptions to enhance user engagement. 



Additionally, we reviewed how each site featured promotions and offers on their main pages to attract and retain users.

‍

Problem validation (Survey and interview):

Following the competitive analysis, we identified key areas of focus: content relevance, search prioritization, primary concerns when selecting a class, applying Jakob's Law for familiar website usage in class enrollment, and optimizing user task flows. To gain deeper insights, we are initiating the user research phase with a survey, followed by interviews and card sorting to better understand user preferences and behaviors.

‍

Result of Survey about important needs of users (58 participants) :

- Registration factors 
(qualified instructors, location, dance style, class schedule)

- Job schedule importance Location

- Challenges with skilled teacher and trustworthy school

- Limited familiarity with dance styles

In-depth Interview & 
Affinity Diagramming:

Through in-depth interviews and affinity diagramming, we identified the core concerns and opportunities for the project’s success. These findings include the need for qualified instructors, a seamless registration process, and a trustworthy school reputation, among others.

Main concerns  of users (12 participants) :

- Qualified instructors

- Easy registration process

- Trustworthy school

- Limited familiarity with dance styles

- Location

- Cost

- Class schedule

Diamond TWO: Pre-Production

Pre-Production discovery:

After completing the discovery phase, we transitioned into the defining phase to plan the next steps. This involved clearly articulating user personas and crafting detailed scenarios to guide the design process. By synthesizing insights from our research, we established a strong foundation, ensuring that the design solutions would align with user needs and expectations. This phase set the stage for structured ideation and further refinement in the upcoming stages of the project.

Context Scenario and storyboarding:

Mary is a thirty-six-year-old mother with two children, aged seven and three. Her older daughter has a strong interest in music and dance, while her younger daughter is a cheerful and highly energetic child . Mary thought it might be a good idea to enroll her children in dance classes. Through a little internet search, she came across a dance website.

Site Mapping:

In the site mapping phase, we organized the website’s content and structure for intuitive navigation and efficient information flow. By mapping key pages and establishing clear hierarchies, we created a seamless user journey that meets user needs and supports future scalability. This site map became the blueprint for design and development.

‍Wireframing:

In this phase, we focused on defining key insights and translating them into actionable design solutions. Key steps included: Brainstorming and collaborating to generate design ideas.Creating wire-frames and low-fidelity prototypes to visualize layout and structure.Iterating quickly to refine concepts before moving to high-fidelity designs.

Diamond THREE: Development

Proof of concept ( Product scope definition):

we developed interactive prototypes to test project objectives, gather feedback, and refine the design to align with user needs and goals.

Prototype link

UI,UX Design step One Card Sorting:

For the card sorting phase, we aimed to organize critical content for better navigation and usability. 

Key items included:Classes and Instructor ProfilesStudio Policies and Special OffersReviews and Event CalendarClass Schedule and RegistrationContact Information and Studio MapParticipants grouped these elements to create a logical, user-friendly structure, helping to refine the information architecture and improve overall content discoverability on the redesigned dance training website.

‍UI,UX Design step Two Information Architecture:

We focused on information architecture to organize the website's content, making it easier for users to navigate and find information quickly. This step ensures a logical structure that aligns with user needs and enhances usability.

Design Validation with Usability testing:

In the usability testing phase, 45 participants interacted with the newly designed dance training website to assess its functionality and user experience. The testing focused on identifying usability issues, 
such as miss-clicks, navigation errors, and areas of confusion.
The results revealed several key problem areas, which allowed the team to pinpoint mistakes and refine the design to enhance overall usability and user satisfaction.

Report

* Time on Screens: Users spent an average of 20.3 seconds, signaling potential navigation inefficiencies.

* Misclick Rate: 34.2% of users misclicked, risking frustration and drop-offs.

* Next Steps: Use the optimal path analysis to streamline navigation and reduce errors.

Development:

we’ll leverage insights from the optimal path analysis to refine the prototype, focusing on simplifying navigation and minimizing misclicks to create a smoother, more intuitive user experience.

Rollout:

Simplify Navigation: Streamlined paths reduce time on screens and enhance user experience.

Reduce Misclicks: Minimizing misclicks prevents frustration and improves retention.

Align Early: Defining evaluation principles early ensures a focused process.

Test with Users: Usability testing uncovers key issues for targeted improvements.

Iterate for Success: Iterative prototyping leads to a more refined, user-friendly design.