Identity + Interaction Design

Velocity dance center identity + interaction redesign

Course project

Overview

Velocity Dance Center is a Seattle local contemporary art center with a rich history and culture. Over the course of 4 weeks, I rebranded Velocity’s identity showcasing their values as an open, thriving art community and design a mobile experience of signing for class.

DATE  Janurary 2019 - March 2019

ROLE  Branding designer, Researcher, Interaction designer

TEAM Individual course project (HCDE 308)

Problem

Velocity has established a sophisticated brand and excelled at its goal in becoming a voice for Seattle's dancers. Its leadership have made clear growth plans and the dance center is becoming one of the most impactful dancing community in Seattle. To the contrary of Velocity's achievements is their legacy identity. Though Velocity has an active social media branding, its web identity and style is disconnected. A new identity system will help Velocity expand, take the leading role in Seattle's dance industry and accomplish their growth plan.

Velocity’s current website with legacy design style

active social media presence but disconnected from the brand

Research

Audiences

As a large dance community in Seattle, Velocity has multiple relationships with a variety of audiences from different backgrounds:

Dancer
Dancers want to join Velocity to take class, hear dance news, and meet dancers

Renters
Renter want to lend Velocity's dance studios for their own events/training

Volunteers
Volunteers want to contribute to Velocity's effort in creating better Seattle dancing community

Dancers - who wish to find lessons to accelerate their dancing techniques and get involved in the dancing community.

Renters - who might need the studio space for their own events or practices.

Sponsors - who would like to support the organization economically or through volunteering

Positioning

Comparing to what Velocity has to offer to its competitors, Velocity's strength is in their professionalism (higher end class and workshop), involvement(established community and a voice for Seattle dancers), and diversity (more dance genre and wider dancing levels). My work is to amplify and demonstrate its strength.

competing dance centers in Seattle with different mission from velocity
(credits to my colleague Vy and her awesome teammates)

Voice

Considering Velocity’s mission focus on community building and its leadership in Seattle’s dance industry, Velocity’s voice is decided to exhibit professionalism while also welcoming. The voice should create sense of belonging for current dancers and show welcomeness tot new dancers.

voice forming by summarizing Velocity's current mission and values
(credits to colleague vy and her wonderful teammates)

Summarizing the research, I formed three communication goals to showcase through the new brand

Identity Design

Logo

Building of Velocity’s voice, I iterated on the logo to create a more modern and sophisticated feel. The final logomark for Velocity is composed of a geometric V surrounded by a gradient ribbon. The shape V is sharp and bold, conveying a sense of confidence and excellency. The surrounding ribbon is rounded and has a gradient to conveys friendliness and sense of community.  The ribbon also form the shape of letter D and C hidden, which together stands for dance center.

Color

Velocity’s color scheme is largely monochromatic, with white mainly used as background color and pure black for large titles. Different shades of greys are used to establish hierarchy between information and yellow color is used for call to actions like buttons. A simple, black and white color scheme is less distracting and help audience to focus on dancer’s delicacy.

Type

Versatile, bold, and elegant, Serenity is a geometric sans serif conveys the dynamic and confidence of a dancing community. Serenity’s raindrop counter shape and curved terminal gives it a strong personaliy, while the tall x height keeps it legible in various sizes.

Interaction design

Signing up for classes

Signing up for a class is a major CTA (call to action) on velocity’s website. However, the existing website has a very unorganized class information page and is full of interaction problems. I tried to address these issue by reorganizing the navigation process, breaking down class into tabs, and use labels to filter classes.


PAINPOINTS
- scattered information, teacher and class details are missing
- not enough hierarchy makes it hard to navigate

User flow

I drew out the user flow chart to find interaction pain points. After optimizing the flow, I created a low-fi wireframe that navigates using a different information architecture.

Final Design

Lessons

Some insights I reflected from this project:

Create a stylescape early:
Designing of only mood board and voice gave me hard time picking fonts and color. Since I am working on a holistic design project, I could have created different stylescapes to nail down my design directions early.

Take inspiration on information architecture:
Velocity's complex class system is hard to manage. Taking inspiration from apps that excel at information management, such as IMDB and Airbnb helped me out in establishing a bottom up information architecture. Other product's information architecture are also very helpful inspirations.