Kindred Culture 

 

Kindred Culture is a dance organization that provides a positive outlet for dancers to express themselves, building upon the community, and supporting charitable organizations.

kc_mockup.png

Team Members

Catherine Ho

Alvern Alquinto

Skills

Wireframe + Mockups

Copywriting

Branding

Tools

Invision

Wix

Adobe Illustrator

Duration

April 2020 (3 weeks)

Project Scope

In response to the COVID - 19 pandemic, Kindred Culture needed to transition into an online community to keep up in a virtual world. Kindred Culture wanted to cater to the Mississauga dance community through online dance classes, programs, and community discussions. 

Goals

  • Build a collection of online dance classes

  • Promote Programs and events

Solutions

  • Build a collection of online dance classes

  • Promote Programs and events

Key Metrics

  • Engagement

  • Class Sign-Ups

  • Program Sign-Ups

Challenges

  • Planning and priority of features

  • Limited class collection​

Original Design

Misalignment

There is an inconsistency with the element alignments. There is no clear grid being followed for text, images and boxes. 

Colour Contrast

The colour contrast in the schedule and programs do not meet web accessibility standards, making it difficult to read the text in gold boxes.

Font Choice

The font choice does not meet web accessibility standards, as it is a thin font.

Cluttered Information

The information in the programs section does not properly fit in the boxes, making it appear too cluttered. 

Text Box Size

The width of a text box directly affects the readability and useability.

Screen Shot 2020-05-19 at 10.19.23 PM.pn
Screen Shot 2020-05-19 at 10.19.27 PM.pn
Screen Shot 2020-05-19 at 10.19.33 PM.pn
Screen Shot 2020-05-19 at 10.19.18 PM.pn
Screen Shot 2020-05-19 at 10.19.43 PM.pn

Wireframes

Home Page 1

TRUMPET

Home Page 2

GUITAR

Online Classes

DRUM

Hero Image

The original design had a dance video as the hero image, however, it did not represent Kindred Culture's current efforts to change to an online platform.

Enhance With Graphics

The use of graphics will enhance the representation of what type of content Kindred Culture offers. 

Call to Action

To increase the visibility and engagement of "Online Classes" and "Online Programs" I added CTA's to navigate to the pages with more information. 

2 Column Layout

Simplifying the layout into 2 columns structures the information so that it is easy to understand. 

Promote Online Activities

Adding the choreography videos that autoplay helps inform the users of what classes are being offered and provides a preview of the class.

White Space

Implementing more white space throughout the design to separate elements and make it more readable. 

Style Guide

colours

#0F1539

navy blue

#C1922D

gold

#FFFFFF

white

#000000

black

typeface

hEADING 1

Bebas Neue Regular

HEADING 2

DIN Neuzeit Grotesk

Paragraph

Avenir Light

The style guide created consistency throughout the whole website and reflected the current branding of the company. The goal is to create a minimal design with strategic use of fonts and colours to produce a modern & clean approach to online dance classes/ programs.

Kindred Home Mockup.png
Kindred Class Mockup.png

Mockup - Home

Mockup - Classes

Design Rationale

Interaction + Design

By dissecting the user journey of the original design, I was able to produce a minimal design that simplified the users' navigation. Also, changing the design to a multi-page site increases the company's SEO and is easier to guide the user to specific pages when purchasing or signing up for classes.

Branding + Copywriting

I narrowed down the information for a more concise copy to ensure a clear layout of online classes and programs that Kindred Culture offers. Since the information on the website is constantly updated, the style guide aids in any revisions to the site. I worked with the studio owner and leadership teams to further develop the brand voice on all aspects of the website (photography, graphics and copy). 

/ The simpler the better. 

The main goal for this redesign was to reduce the clutter and reorganize the information hierarchy with the enhancement of visuals. The user flow is now simplified and the copy highlights new online services that Kindred has launched.