Singers want efficient websites, too

Web and mobile redesign of Northwest Voice’s website

TL;DR

Challenge

Increase engagement with Northwest Voice programming, particularly increase sign-up rate for the Art and Science of the Performing Voice conference

Solution

Make the organization of the content more efficient, create a content hierarchy through exploration of visual style and use of color

My role

Content Designer

What I did

Content strategy
Information architecture
Desktop and mobile UI copywriting
Visual design

Tools

Squarespace
GoDaddy
Miro
Figma

About Northwest Voice

Northwest Voice is a collaboration between the University of Washington’s (UW) Speech & Hearing Sciences Department, the Department of Otolaryngology, and professionals in the field of vocal pedagogy and performance within the Pacific Northwest. Their mission is to share important research regarding medicine and voice science, as well as its theoretical and practical applications to vocal pedagogy and vocal performance. Voice nerds, unite!

Their Art and Science of Performing Voice (ASPV) conference is a cornerstone in the UW School of Music’s yearly programming.

Challenge

I was approached by Northwest Voice to simply transfer the content of their website from GoDaddy’s site editor to Squarespace’s site editor. I knew at first look of their website that I would not be able to sleep at night unless I did a total redesign of the website.

After all, as a yearly ASPV participant, I would be using the website. I wanted to make my life easier.

Northwest Voice’s website had a few main problems:

  • The UI was very loud, reminiscent of an early 2000’s blog site with a pervasive purple background.

    • This visual noise was part of the reason for a lack of content hierarchy: I wasn’t sure which information was important and which was more supportive content.

      • Busy visuals and no content hierarchy create a sense of paralysis: I didn’t know what I was supposed to click or where on the page I was supposed to land or rest.

  • I can’t even mention information architecture because that would be an insult to architects everywhere. The information was thrown together haphazardly and strewn across multiple different pages. There were 5-6 pages with info about a singular event, the ASPV conference.

    • There was no flow to the narrative of this website (as much as a website can tell a story, which it very much can).

Solution

The solution seemed simple, as in simplicity was the key. Cut back on visual noise, establish a hierarchy of information, and organize it in a way that was clear and flowed together sensibly.

Objectives

1. Make the UI of the site visually simple.
2. Reorganize the site content in a way that fit IA best practices and told more of a story.
3. Utilize layout, font, and other visual elements to establish content hierarchy.  

Before

After

Methods

Reduce clicks by condensing information

I started with building a site map to visualize the organization of the site and get make sense of the chaos.

I then exercised content atomization, breaking down Northwest Voice’s site info into more focused pieces. I then grouped those pieces of content back into what felt like a more logical site map.

Key to old site map:

Dark purple: global navigation
Light purple: main sections
Yellow: image-based content
White: call-outs and reminders

Exploring visual design and branding

Using Northwest Voice’s logo as inspiration, I drew together a color palette that I could use to explore the visual branding of Northwest Voice and to establish a content hierarchy.

Being a voice instructor, you’ll find yourself in a lot of funny poses to help convey your vocal lessons. Same with students as they try to learn those lessons. Yes, singers frequently practice with straws in their mouths!

That being said, in order to help the website feel more visually-enlivened, I got chucked all black-and-white photos and found colorful ones that display the dynamic art form of singing.

Establishing a content hierarchy

Now that the content was more efficiently organized and the site’s visuals provided an appropriate level of texture, I could now use the site’s visual texture to enhance important information and de-emphasize body paragraph copy.

Finding inspiration, for what is art without it?

I engaged in some casual comparative analysis to help guide some of my design decisions.

Berklee College of Music seemed like a logical pick for inspiration. Throughout my years of interacting with their website, it always exhibited a consistent sense of brand, clean visual design, and straightforward navigation.

Deliverables

A strengthened sense of Northwest Voice’s identity

With consistent use of colors throughout the UI, photos that display the vibrant world of vocal science and education, and a site that tells a story, Northwest Voice went from asking ‘Who Are We?’ to boldly declaring ‘Who We Are’.

Visual simplicity

I’ll let this before and after speak for itself

A helpful flow to content

With well-informed content organization, Northwest Voice’s new site offers a sense of guidance and service to potential and already-committed conference goers.

Doesn’t this version feel dauntingly incomplete?

Content modifications/additions to improve flow:

  • Highlighted important dates, most importantly the submission deadline

  • Placed submission instructions above the form

  • Called out additional information

  • Added a file upload field

Potential Next Steps

  • Survey the 2025 conference goes about their experience using the website, with feedback about how it has improved since last year.

  • Discuss pain points with conference committee of both maintaining the website and its effectiveness as a communication tool to conference goers.

  • Conduct usability tests to gain insights and make further design improvements.

I’m proud to have helped Northwest Voice receive the glow-up it deserves. See you at the 2025 ASPV Conference? 🤗