Heuristic evaluation report
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
Figma
Squarespace
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.
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.
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.
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.
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.
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.
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.
