A responsive web design for a local dance studio.

D2B computer.png

Role

Strategy, Research, UX Design, UI Design, Branding, UX Copywriting

mentor

Courtney Leonard

Project Scope

5 weeks

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. I also did in person interviews and surveys to find empathy with the user and understand their key needs and goals.

 

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.



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

A high fidelity prototype was used to test key tasks and the learnability of the website. Users found information where they expected to and completed tasks of selecting a class, moving through checkout, and searching for information about Dance2b instructors with a 100% success rate.

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