Peridance

My Role

UX/UI Designer

Team

Individual Project

Tools

Figma, Figjam, Whimsical

 

Increasing bookings on Peridance’s E-commerce site by providing an intuitive class platform and refreshed visual design.

Peridance Dance Center

Project Duration: March - May 2022

User Research · Persona · Sitemapping · Wireframing · Prototyping · Usability Testing · UI Design


Preview of New Peridance Prototype

Overview

Peridance Center needs a new platform to increase its conversion rate from people who visit, to customers who book classes. Users are discouraged by its current outdated website and by reimagining its platform, users will have an easier time following through with the booking process.

 

Peridance has been a part of the New York City dance community for over 35 years, where toddlers, teenagers, and adults can dance and learn alongside professional dancers, acclaimed teachers, and students from all over. Their website provides information on all the various classes, programs, and faculty available for anyone to book a class. Peridance’s website was severely lagging in design and usability, particularly when it comes to finding all the information needed to book a class.

I created a new website in order to aid customers in finding the appropriate information needed to find out about the studio and book a class.

 
 

The Problem

When users can’t find what they need in order to make a purchase, it can result in missed opportunities for Peridance to bring in more students.

Peridance’s current platform has not been updated to current website standards and is in need of a revamp, as it loses potential students as a result. Here are my first impressions of the website and my assumptions in terms of the troubles potential students may be experiencing.

 
 

Peridance’s previous platform before the redesign

01

Poor information architecture and visual organization

Peridance juggles many different classes, programs, and intensives for various levels and ages of students. Adding all this information over time has led to a lack of organization and puts strain on the user to find exactly what they’re looking for

02

Lack of necessary info when looking to book class

The core info needed such as the price, duration, and location of classes makes it difficult for users to be comfortable booking classes

03

Outdated Visual Design and Aesthetic

Users don’t feel motivated to explore more of what the studio has to offer based on the outdated design of the website

 

After viewing the problem of the current Peridance platform, I wanted to learn more about users’ Peridance troubles and what expectations they had of a great dance studio website. I conducted usability tests and surveys to understand more about current Peridance frustrations in contrast to positive experiences students may have had with other dance studio platforms.

 

Usability Tests & Surveys

Interviews were conducted with two groups of users. Users that are already familiar with Peridance and their platform (have had some experience with dance) and users that have never heard of Peridance and are interested in taking class (little to no experience with dance).

The usability tests reaffirmed the difficulties that have been studied during my initial take of some of the problems they may be encountering. 

 
 

The most mentioned challenges are:

  1. Finding the pricing and class policies

  2. Visuals to give the user a sense of what the studio and class environments are like

  3. A guide of the appropriate skill levels needed for each class

 
 

I then conducted a survey to gather information about users’ ideal studio experience and their class booking habits. This helped me understand what areas are important when designing Peridance’s website and where to focus my efforts.

Takeaways:

  • The number one factor in deciding whether or not to go to a studio is determined by the teachers followed by price, location, and class times.

  • Users feel nervous about going to a new studio, ease their nervousness by giving them all the info they need upfront: teacher schedule, location, capacity, what the studio looks like physically, COVID, precautions, etc.

  • Most users get information from IG for new studios or classes, they might also find a studio through teachers’ promoting classes.

  • Most users want an option to sign up online. They will not book if there are too many steps to book a class and needs all the details they’re looking for. Being able to sign up on mobile is a huge plus.

Before designing a solution, I wanted to establish all restrictions I may encounter as Peridance wants to preserve its current branding and third-party booking platform.

Constraints

Peridance uses a third-party service to manage their class booking, as do most dance studios to make things easier for them on the backend. This leads to inflexibility when it comes to changing the actual booking process in terms of design and flow. This informed the way I designed the booking, to make sure it would comply with the platform's tech capabilities.

 
 

Issues with current booking page:

  • Basic info about classes missing causes users to doubt their purchase.

  • Class info hierarchy could be improved, users aren’t clear on where to look.

  • Faculty’s info. currently hyperlinked inside “view details” causing users to have to expand a drop-down and then open up a new page.

  • Users found current “view details” information not helpful, they wanted more information and visuals about the classes.

Screenshot of the current Peridance booking interface

 

Moving forward, I made sure to keep these constraints in mind by working within the third-party capabilities while making smarter design decisions, alleviating the issues mentioned above.

The Ideation Process

I wanted to see what other platforms are doing well through competitive analysis in order to inform decisions when it comes to redesigning the Peridance platform.

 
 
 
 

This competitive analysis led me to realize that I could improve the new platform by reorganizing Peridance’s current navigation and information architecture.

I recorded the sitemap for the original Peridance website and restructured it to reduce clutter without losing any pivotal information. This will allow the user to navigate the website without feeling overwhelmed, and better able to find the exact information they’re looking for.

Peridance’s sitemap before

Peridance’s sitemap after

Wireframing & Prototyping

I ensured the information users needed as researched from the usability tests and surveys was prominent when creating the initial low-fidelity frames.

For the home screen, I focused on a strong CTA section, what’s new at Peridance, class details, and upcoming classes. From there I was able to focus on the UI when transitioning from low fidelity to high fidelity, while also keeping in the constraints of preserving Peridance’s branding.

 

The Solution

Minimizing challenges users encounter learning about the studio, and their class booking journey by redesigning the Peridance website.

Challenges:

  1. Finding class prices, structures, and levels.

  2. Getting a feel for what the studio looks like, class environments, and what to expect when they walk in.

  3. Finding the appropriate teacher, style, and time that suits the user’s needs.

  4. Being able to purchase a class with a seamless booking experience.

The solution is to redesign the Peridance site so users can efficiently learn about the studio and find the information they need to book a class. Users can make informed decisions on what class they want to book and find it easy to navigate through the booking process. Ultimately, a successful redesign is meant to decrease the user's time on task while allowing the user to learn about all the studio has to offer.

 
 

Before & After Comparison

  • Reduced clutter by changing the navigation to the top. Allows users to instantly recognize a familiar layout and navigate the site with ease.

  • Reduced time spent by user looking for pivotal information. by providing clear and visible class structures and prices.

  • Users have a clear visual representation of what the studio is like by auto-playing GIF in the hero section.

  • Visitors instantly know how to book classes and are drawn to the clear CTA button.

 

After designing the solution, I created a prototype and conducting usability tests in order to iterate on feedback.

 

Usability Testing

Measuring Key Performance Indicators (KPI) and iterating based on Feedback.

I was able to round 5 individuals to test the prototype and measure the new platform redesign by following these KPI. I recruited individuals that were both familiar with Peridance and those that have never been to the studio to make sure I was targeting both kinds of users. I then made further adjustments based on their feedback.

 

KPI Highlights

In order to deem whether or not the platform was successful, I used these KPI to determine the overall improvement in user experience. I used these metrics to guide my overall design from my first usability tests on Peridance’s original platform compared to the new design.

Based on Key Performance Indicators, the usability test showed improvement in decreasing time-on-task and task success rates.

 
 
 

Decreased time-on-task when looking for general class information such as pricing, levels, and duration.

  • Original site: 3-5 minutes

  • Redesigned site: 10-30 seconds

Improved task success rate when users were asked to book a class after successfully browsing the platform.

  • Original site: 60%

  • Redesigned site: 100%

Overall customer satisfaction drastically improved while the vast majority of users were unsatisfied with the original platform.

  • Original site: 20%

  • Redesigned site: 100%

 
 

Final iterations

Usability Testing Compare.png
Usability Testing Incentive 2.png

Final Product

Introducing Peridance Center: the redesigned platform to browse and find out everything the studio has to offer. Check out the faculty and various training programs before seamlessly booking a class.

 
 

Explore the Hompage

For first-time visitors, view pivotal information about Peridance’s class structures, times, and price before exploring the rest of what the studio has to offer. All new and upcoming events are posted right on the homepage to keep students up to date on what’s happening at the studio.

 

Search and Learn About the Faculty

Explore the faculty page and filter by style to find the best teacher suited for your needs. Extensive faculty bios are provided as well as class videos, Instagram feeds, and upcoming classes.

 

Search and Book Class

After exploring the website, easily find and book the class that works for your schedule. Extra class information is provided right on the booking schedule so you never have to leave the page.

Prototype

The usability prototype is meant to test for the following user tasks:

  • Explore all of the Peridance classes and various training programs.

  • Find class rates and class structures with ease before booking a class.

  • Read all about faculty credentials while also viewing videos of how they facilitate their classes.

  • View our class schedule and book with all the details needed in one place.

Reflection

Redesigning Peridance’s current platform came with many restrictions and challenges that gave me perspective on what it would be like to work with them as a potential client. I wanted to challenge myself by staying true to these restrictions such as their booking system and current branding while bringing my research-informed ideas in order to create a refreshed and modern dance studio website.

 
 

Challenges

 

Peridance branding

While I find Peridance’s current branding carries nostalgia and history for students and teachers familiar with the studio, it was a challenge to work around, as certain aspects of the brand feel outdated. Adding popping visuals and tweaking certain brand colors really added a new and exciting feel to the website while still preserving the existing brand.

Key Takeaway

 

Information architecture needs to be carefully thought out when the platform contains so much information

Peridance Center has so many various classes, programs, and performances that cater to all different types of dancers, that information could easily be lost if poorly organized. Creating a system that will work in the future as the site is updated is pivotal for a user-friendly experience.

Next Steps

 

  1. Create a filter system for booking classes so users can further pinpoint their needs. Searching by class types and levels seemed to be especially important for newer students and would help them pinpoint and schedule the classes they feel most comfortable with.

  2. Build out a search function for the faculty page. Experienced dancers may be looking for a certain teacher or class type since they are already familiar with the dance scene in NY and building out a search function would enable them to find if their favorite teachers are currently at the studio.