ODC Dance: Website Redesign

The ODC Dance Redesign

Introduction

ODC is dedicated to the lifecycle of the artistic process. They aim to inspire audiences, cultivate artists, engage community, and foster diversity and inclusion through dance. The project is a redesign of the experience on ODC Dance. This website has some accessibility issues that may limit its ability to reach the broadest possible users. On this site, a video automatically plays on the home page. While this is interactive and engaging, it should have controls that allow the user to pause or stop playback according to WCAG guidelines. Furthermore, the site has some color accessibility issues. Some of the headline and CTA text is not visible against the image background. Because the navigation bar and banner at the bottom of the screen are somewhat transparent, the white text is also difficult to read.

This website redesign aimed to solve the problems of the cluttered layout, unclear navigation menu, and lack of color contrast and make their website more user-centered.

MY ROLE

User Design, Research, Website Design, Prototyping

PROJECT CONTEXT

Solo Project
Duration: Nov-Dec 2022

The Challenge

How might I create an artistic, dynamic, attractive, clear, and user-centered design system for a website?

Before

Home page

Solve color accessibility issues by achieving at least a AA accessibility rating.
Some of the headline and CTA text is not visible against the image background.
Because the navigation bar and banner at the bottom of the screen are somewhat transparent, the white text is also difficult to read. This can discourage users from clicking on the CTAs or navigation links or even staying on the site.

Dance with ODC

The CTA button of BUY TICKETS only shows on the top section, which is not easy to be found and the users should scroll all the way top to click it. A nicer way would be to use Fitt’s law to make the button more accessible to find and click.
Cluttered layout, e.g., the dancing video screen is too small, so the user cannot see the dance performance clearly.

Performance & Event Calendar

High cognitive load
The page displays too much information in the UI, which would increase the user's cognitive load.

ODC Store

Users can't find ODC Store's CTA button on the navigation bar, so it's hard to guide users to shop.
Users can't see the products on the ODC Store page until they jump to the next page.