A responsive web design for a local dance studio.

Dance2B+computer.jpg

Role

Research, UX Design, UI Design

mentor

Courtney Leonard

Project Scope

80 hours

tools

Pencil and paper, Sketch, Adobe Illustrator, InVision

Project Background

Dance2b is a local dance studio for adults in downtown Denver, Colorado. Dance2b offers a variety of dance classes for adults ranging in skill levels, and types of movement from yoga to hip hop.

Dance2b’s current website and branding is outdated, lacks ease of use, and is not mobile responsive. Dance2b uses the MindBody application for booking their classes and this must be incorporated into their system. Dance2b’s business relies on getting new students to sign up and have those students return to classes regularly.

Dance2b is a unique dance studio in that it caters to adults specifically, where other studios drive the majority of their business through student classes. With this lense, adults treat their classes and memberships as they would a membership to their local gym.

Project Goals

  • Create solutions for easy scheduling, payment, and informative options that fit user needs

  • Improve overall visual experience with updated branding

  • Create a responsive website that links to the MindBody application on mobile

 

Design Process

Design process diagram.png

Research

1 on 1 Interviews

Surveys

Competitive Analysis

Define

User Personas

Sitemap

Product Roadmap

Design

Hi-Fidelity Wireframes

Branding

Responsive Design

UI Design

Test

Hi-Fidelity Prototype

Usability Testing

 

Research

competitive analysis

I performed a competitive analysis, looking at other local dance studios and fitness centers for their offerings, strengths, and shortcomings. This competitive analysis influenced the hierarchy of information in the website and the emphasis on the CTA to register for classes.

 

surveys

Surveys were conducted online among a group of ten women between the ages of 26-33. Those surveyed answered 10 questions regarding what people were looking for in their fitness classes and a studio, and how and when they schedule their classes.

d2b+survey.jpg

key research findings

Dance2b has a clientele consisting by majority of women in their twenties and thirties that are savvy with social media platforms and accustomed to gym websites with online and mobile registration. Users overwhelmingly cared about feeling welcomed by the space and website. The most important pieces of information that users want to find on the website are price, class types, class times, and the location of the gym.

People prefer to drop into a class rather than register in advance in order to save time and avoid commitment. When they plan their workout schedule, they are doing so weekly and daily.

People want to feel empowered, inspired, strong, and confident, and have fun in their classes.

 

important considerations

Because people are somewhat adverse to signing up in advance, registration and cancelation needs to be easy and expedient

UI should be welcoming, clean, modern, and sleek

Key featured information should include price, class type and time, and gym location. Secondary information should include instructor training and background information, and studio mission.




Define

product roadmap

The product roadmap defines all features to be included in the website and ranks them by priority. With research results that drove the importance of finding information about classes, pricing, and times, and class registration being the key task of the site. In the product roadmap, I prioritize features helping users find out about the dance classes offered and completing registration for those classes.

 

user personas

Research defined the Torrie and Damien personas, key hypothetical users of the Dance2b website.

sitemap

Using gathered research and business needs, I created this sitemap to demonstrate the architecture of the website and included pages.

Design

wireframes

By creating mid fidelity wireframes, I articulated a layout for the site and was able to test key user flows and iterate based on test results. The layout and user flows of the website were guided by my research, personas, incorporating the user flow of the MindBody application and flows found on websites for other fitness centers and yoga studios. As the Dance2b clientele are active, young individuals, it was important to use a layout and task flows that would feel familiar to their other fitness registrations.

Testing with an InVision prototype illuminated discrepancies in user flows in selecting classes prior to checkout.

 

UI Design

Dance2b customers want a welcoming environment where they will receive quality dance instruction, and have fun without intimidation. I used a minimal color palette with a pop of pink to keep the website looking clean and professional with a fun flare.

 

Applied Desktop UI

Applied mobile UI

 

Test

Prototype and usability testing

Using the Invision prototype, I tested with five users in person tasked with searching for information regarding Dance2b instructors, and selecting and purchasing a class. All five testers were able to complete these user flows without error.

Moving Forward

With more testing and iterations based on results, the Dance2b website could be improved with additional features including a management dashboard for Dance2b staff. This website was designed with the Mind Body app in mind. In using Mind Body, Dance2b gets robust functionality while keeping development costs low, but a system built specifically for Dance2b could offer functionality specific to their business as well as more flexibility in the design.

 

See more of my responsive designs