OC Music & Dance Case Study

Tina Hong

OC Music & Dance Case Study

mobile pic


Tina Hong & 2 group members

Project Duration: Two Weeks

My Role: User Research, Interviewing, Persona Development, Storyboarding, Wireframing, Style Guide & Digital Mockups

Media Used: Illustrator, Photoshop, Paper, & Pens


  • Observations: We visited the site on multiple occasions to watch the traffic of the lobby, open mic night, and the classrooms.
  • Interviews: I met with the V.P. of Marketing, and also conducted interviews with parents and students of OCMD.
  • Competitive Analysis: We analyzed OCMD's current website, as well as some other dance and sport organizations' websites to compare and see what the current trends were.
before website image
    Current Users:
  • Students parents who want to register them for classes.
  • Students are between ages 8-18.
  • Hear about OCMD through word of mouth or through Facebook
  • Need an easier registration process.
  • Parents want easy signup and enrollment for their kids.
  • Parents want to enroll both kids for classes at the same time.
    Current Website:
  • The current website had many dead-ends, resulting in a high percentage of drop-offs during the class searching process.
  • Most of the users were not able to reach the registration form and would show up in person to register for classes.
    OCMD Needs:
  • Clear navigation.
  • Modern user interface.
  • Cleaner website with design consistency
  • A functioning website.


After meeting interviewing and observing parents, students, and the marketing director, we synthesized our research data and came up with a persona.

before Persona image


We then developed a storyboard to get an idea of how the new website would help the user.

before storyboard image

Journey Mapping

We then broke down each step of the storyboard, to understand the actions, feelings, and opportunities for each step of our new process.

before Journey Map

Style Guide & Flow Chart

We revamped the style guide to give it a little more color while working out the flow chart of the new website..

OCMD's Original Style Guide:
current style guide
flow chart

Revised Style Guide

current style guide
current style guide current style guide

Wireframe Ideation

We made up several wireframes before deciding on one for our final.

wireframe ideas
wireframe ideas

Final Redesign

After many iterations, we proceeded to make a digital mockup.

wireframing ideas
wireframing ideas
wireframing ideas