KeyNote

Overview

I've created 6 high fidelity mockups to explore usability and visual design strategy to update navigation and branding for a music education website.

Problem

As San Diego Youth Symphony prepared to rebrand itself as KeyNote, it needed a new website that would not only update its visual design to reflect the rebranding, but also introduce families and institutions to its wide range of music programs in an easily digestible way.

As KeyNote's only on-staff UX Designer, I initiated this project to identify opportunities for transforming the previous San Diego Youth Symphony website into an easy to use platform that would inspire community members to get involved in its 6 programs. The long-term goal for this project is to inform preliminary UX and visual design strategy to share with our external development team as they carry out the final design.

Scope and Limitations

Because the purpose of this project was to explore early solutions for redesigning KeyNote's website, many of the stakeholders I worked with didn't have definitive requirement for the redesign yet, so I had to make inferences on what those requirements would be.

In addition to ambiguous stakeholder expectations, I was also challenged to work against a limited schedule and budget, which translated into a smaller scope for this project.

Results

• 6 high fidelity mockups that streamline navigation and content while introducing refreshed branding

Research

My research began with outlining questions and concerns that I felt were relevant to redesigning the existing SDYS website into the new KeyNote website. Knowing that I wouldn't be able to address every issue, I chose to focus on key concerns for the initial redesign phase, such as:

1. What content should the new website include?
2. How easy is it for users to find the content that they're looking for?

To understand what goals KeyNote's stakeholders had for the website's features and content, I interviewed key staff across the organization's music program and development teams. Some major observations from this process were:

• Stakeholders generally feel that content should be revised to focus primarily on persuading users to get involved
• Key functions of the website include registering for programs, donating, purchasing event tickets, and listing job opportunities
• A common concern is making sure that all program information is easily findable

Usability Testing

Next, I conducted usability testing with 4 participants to determine challenge areas, prompting participants to find key information such as overviews and registration for all programs, upcoming concerts, and donation details. Key observations from this process were:

• 4/4 users click on the header navigation tab to access Auditions information, finding a similar call to action near it redundant or neglible
• 4/4 users struggled to find the overview page for The Opus Project program, believing to be included with under Programs tab
• 2/4 users struggled to finding content hidden within submenus (e.g. tuition assistance page)

Comparative Analysis

Influenced by the feedback gathered during stakeholder interviews, I reviewed websites of similar youth music organizations for ways to present a large amount of information in an easily digestible manner. Characteristics like minimal navigation and concise text were particularly helpful for the later design phase.

Synthesis

User Archetypes

Based on the 5 target functions of the KeyNote website identified during the stakeholder interview phase, I brainstormed 7 corresponding user archetypes to consider.

• Prospective students and families
• Current students and families
• Institutional partners (school administrators, teachers)
• Donors
• Event attendees
• Job seekers

Ideation

Combining all of my findings together, I determined that the key areas I would prioritize would be the header navigation, homepage, and individual program pages. Additionally, I set out to make content more persuasive for getting people involved with KeyNote The changes I planned on making looked like:

1. Repositioning Community programs under the "Programs" tab
2. Removing redundant elements such as a second button for Auditions
3. Focusing on providing concise information without too much bloat
4. Removing outdated or irrelevant content that had no connection to current programs or events

Design

Information Architecture

Sketches

Next, I rapidly iterated through a multitude of sketches to illustrate potential layouts for the content outlined in the Information Architecture phase.

Mid Fidelity Wireframes

In translating my sketches to mid fidelity wireframes, I paid close attention to making text concise and implementing space for multiple images to convey information as efficiently as possible.

Branding

Incorporating brand colors and typefaces for each KeyNote subprogram preserved much of the original brand elements, but some colors were slightly altered to ensure color contrast and legibility.

High Fidelity Mockups

Completing mid fidelity mockups then led me to adding more complex visual details. One visual design pattern that I integrated into the mockups was featuring KeyNote branding on main pages like the Home page but presenting individual program pages with their own specific brand colors and logos.

Next Steps

Right now, I'm currently in the process of consulting with our external development team on implementing the design strategy that I produced during this project to inform the final design of the KeyNote website. Stay tuned for updates!