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.
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.
Wireframes
TRUMPET
GUITAR
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.
