Select Page

Case Study:
Website redesign

Overview

Charlotte Dance Gypsies – A Contra Dance Group

Started in 1973, the Charlotte Dance Gypsies are a local contra dancing group. A social dance, contra dancing is a folk dance derived from English and Scottish country dancing. Dancers form couples, and the couples form sets in long lines starting from the stage and going down the length of the dance hall. Dances are accompanied by live folk music and are led by a caller, who teaches the sequence of figures in the dance before the music starts.

The Goal

This is a personal project to create a more user friendly web experience to boost dance attendance and bring more awareness to the dance.

My Role

Redesigned the Home, Dance Schedule and New Dancer pages with a more simplified UI to encourage greater user engagement.

Project Timeline

5 Weeks

Highlighted Skills

User Research

Wireframing

UI Design

Logo Design

Prototyping

01. THE PROBLEM

A. What’s Contra Dancing?

B. What’s a Dance Gypsy?

The Target & Challenge: Dancers average in age from under 18 to 70+. The group had been experiencing a drop in attendance at the dances due to people’s busy schedules and other things going on in town.

The Opportunity: With that in mind, their board and I wanted to update the website as part of an outreach effort to connect better with dancers, as well as rebrand the dance, with a new logo and name change from the Charlotte Dance Gypsies to Charlotte Contra Dancers. This is to help better define what the dance is to newcomers with “contra” in the name and better SEO. Unless you know the dance, most don’t know what a “dance gypsy” is. (It’s a dance move).

High Level Goals:

1. Increase dance attendance

2. Bring about a greater awareness of the dance

3. UI conveying a sense of friendliness that’s easy to navigate

4. A new logo for rebranding purposes

02. MY ROLE AND PROCESS

• I began with competitive analysis of other regional contra dance groups. As a contra dancer myself, I surveyed 450+ contra dancers in our community to learn more about their goals and frustrations of the dance. 23 replied to the survey.

• From there I created personas to help frame and refer back to who the targeted user would be, their behaviors and what their needs are.

• I then created sketches, wireframes, style guide, and high-fidelity mockups to explore different pain points of the end user. I also created a logo with the new dance name to incorporate in the final web design.

• Asking seven contra dancers for their feedback on both the wireframes and prototype, I finalized a new website prototype.

03. UNDERSTANDING USERS

What motivates a dancer?

As a contra dancer myself, I’ve gotten to know many in the community, both locally and regionally. Contra is a social dance with community a large part of it’s focus.

Having access to our group’s email list, I sent out a Survey Monkey questionnaire to 450+ contra dancers in our community to learn more about their goals and frustrations of the dance. A survey link was also posted on our Facebook page. I collected a total of 55 responses.

Based on survey results and assumptions about the contra dance community of which I am a part, I came up with personas for 2 types of users – people in their 20s and those 50 and older. The age range of dancers typically declines in the 30s and 40s, often due to raising families and busy careers.

Key insights I discovered from user research.

These keys insights I kept in mind while redesigning a website to better suit the needs of the community.

1.

Primarily Dancing

Viewing the upcoming dance schedule was the primary reason users visited the website.

2.

Busy Lives

Time contraints, busy lives and other entertainment options are the main reasons users don’t come out to dance.

3.

More Interaction

Users want an easy way to save upcoming events to their calendars and to share events with friends.

4.

Desktop Design

Many older dancers are not tech savvy nor on social media. The main way they keep up with upcoming events is on desktop, rather than mobile.

04.  DEFINING THE PROBLEM

Designing for the User

After I had a better understanding of user goals and behaviors, I  listed some key features of the website I wanted to update before creating low-fidelity wireframes.

Based on the insights above, the key things I wanted to keep in mind were:

1. Prominently placed event calendar (quickly view, find out more).

2. Easy to navigate dance schedule (filter by category, add to calendar, share on social media.)

 3. Easy to navigate FAQs (for new dancers to the website).

4. A simplified UI 

1. Existing Home page

The main reason people go to the website – the dance schedule – is missing from the home page. Large blocks of copy make it hard to read everything is given the same scale of importance. Red type is also hard to read.

2. Existing Dance Schedule page

No way to add upcoming events to your personal calendar as a reminder or share an event on social media. Dances are line listed in two colors with a lot of surrounding copy.

3. Existing New Dancer page

Paragraphs of copy make it hard to quickly scan for answsers. FAQs are very text heavy.

05.  IDEATING THE SOLUTION

Sketches + Wireframes

Being the majority of older users on the survey indicated using their home computer as their primary source of information and are not on social media, contrary to what is mostly done today, I focused on desktop first rather than mobile.

After sketching a few ideas out first on paper, the wireframes below reflect the design goals above and focus on user flow, components, and features of the Home page and Upcoming Dance Schedule page, the two most visited pages of the website.

06.  VISUAL DESIGN + BRANDING

Mood Board

A mood board helps me visualize a mood or feel of imagery and type. It can also helpful when communicating with stakeholders. Although orignating as Scotch/Irish, the American version of the dance is that of a country barn folk dance. With this in mind I was thinking rustic with an Americana feel. Clean edges and modern colors keep it moderized.

Style Guide

Style guides are used to define the way the brand will look and to keep component graphics consistent and uniform across various platforms. I find them helpful for keeping on brand when designing prototypes for the final product.

With this project, the colors needed to be gender neutral and the components convey “friendly” in tone.

Logo Design

Changing the name to Charlotte Contra Dancers required a new logo.

I concepted a few ideas quickly in Adobe Photoshop. I came up with two directions A) a symbol derived from Irish Celtic knots to suggest interconnection or community and B) simplified lettering in a rustic font.

After a few iterations, a direction was approved by the dance board members and I completed a final logo in Adobe Illustrator.

07.  PROTOTYPING

Prototyping + Validation

Below are the key pages I redesigned as they pertain to the insights gathered from the Survey Monkey questionnaire.

DESKTOP SOLUTION

MOBILE SOLUTION

Select Screens

Home Page

Upcoming Dances Detail

New Dancer / FAQs

08.  OUTCOMES + LESSONS

REflection

Looking back, my main objective was to make the site more usable for older dancers who mostly aren’t on social media, and new dancers wanting to learn more.

After creating a high fidelity prototype, I showed it to seven dancers in the group of various age ranges. Everyone thought it was much easier to read and navigate than the original version. They particularly liked the simplicity and ability to interact more with the site.

Going forward with their rebranding efforts, the Charlotte Dance Gypsies is changing the name of their dance, incorporating a new logo and implementing the new website design in the Spring. Once the new site is up and running, I plan to continue asking feedback from users as to their needs and goals of the dance. A website is always a work in progress and should change to meet the ongoing needs of the users.

Next Project

Mobile Web Concept – Roost Home Rentals

I am actively seeking opportunities in UI/UX Design and Graphic Design. If you are interested in my work and would like to chat, I would love to connect with you.

cassencreative@gmail.com

 

LinkedIn

 

 

Made with love and pots of tea in Wordpress. 
© 2020 Melody V. Cassen. All Rights Reserved.