Symphony NH

Heuristic evaluation report

Symphony NH's landing page heading featuring text that says "Symphony NH's 100th Anniversary Season: Celebrating 100 years as the symphonic sound of the granite state" and two buttons that say "view calendar" and "buy tickets".

Project Overview

Symphony NH, a non profit organization based in Nashua, NH, recently redesigned their website in Squarespace. They hired me to collaborate with their marketing team to make the site comply with Web Content Accessibility Guidelines (WCAG), create a font hierarchy that felt appropriate for the symphony, and to use color more intentionally within their given style guide. The site now passes WCAG with AAA compliance, their highest level.


Symphony NH


April - May 2023


UX Designer



View site

Problem Statement

Symphony NH needs the accessibility and usability of their website to be improved in order for their patrons to find the information they are looking for as efficiently and easily as possible.

Achieving Accessibility

Text Contrast

All text needs to have enough contrast between the background and the actual font color in order for it to be as legible as possible.  By making slight changes to the color palette the site already had, I was able to give all text on the website the necessary contrast needed to achieve WCAG AAA compliance. Additionally, I encouraged Symphony NH to go with a slightly lighter shade of black for body copy text. There is no greater contrast than pure black and white and that can be hard on people's eyes. By slightly lightening the shade of black, visitors of Symphony NH's website will have an easier viewing experience.

examples of inaccessible versus accessible button options.
new accessible text color options

Alternative Text

Making a site accessible for anyone to use needs to account for those who use screen readers.  Because of this, it is necessary to add alternative text to any photo on a website that describes to the user what is happening. Squarespace, the website building software that Symphony NH uses, makes it very easy to add alternative text to help make websites as accessible as possible.  Best practices for alt text include not writing “image of” or “photo of” and keeping it short and descriptive.

Example of how to write Alt Text in Squarespace.

Improving Usability

Intentional Color

Using color intentionally to convey meaning helps the people that visit the website understand where they can click.  The site now uses the same blue for the navigation bar and buttons in order to show that they are all clickable.

Reducing Repetition

Originally the landing page had several options to click on that would lead people to the same things.  While it is nice to give people freedom and options when they are on a website, sometimes too many options can give the opposite effect and lead to confusion.  The main goal of the landing page is to introduce people to upcoming events.  By slightly reducing the number of clickable options, the landing page clearly leads people to find upcoming events as well as where to go if they'd like more information about the symphony.

Font Hierarchy

I did some competitive research amongst other symphony and orchestra websites to gain insight into how similar types of organizations are displaying themselves on the internet. Through this, I learned that quite a lot of them use bold serif fonts for headings because they are theatrical. In the spirit of making the website feel like a night with the Symphony NH, I changed heading fonts to the classic “Libre Bodoni” and chose “League Spartan” for body text to balance it out. Please see below for an example.

Showing the font hierarchy: Libre Bodoni for headings and league spartan for body copy.


I am so grateful to Symphony NH for giving me the opportunity to work with them to make their website as accessible as possible. As this was my first real world project after finishing school, getting to work with real stakeholders was an excellent learning experience. In school UX/UI projects, the process tends to be fairly linear as the project proposals themselves are designed to include every tool you've learned to use. Working within more specific parameters forced me to think quickly on my feet about what the client actually needs and how I can achieve it.

Other Works