Sara Clayton — Product Designer based in Seattle

Hearing, Speech and Deaf Center Website - Client Project

I was appointed by our team’s director to lead a project that would solve the Hearing, Speech, and Deaf Center of Puget Sound’s patient pain points. I led the design process, delivered wireframes, and worked with our developer to ship what would be the ultimate deliverable – a newly redesigned website with a modular CMS back-end that was easier to manage.

ForRedesigning the Hearing, Speech, and Deaf Center of Puget Sound’s website experience. RoleUX research, wireframing, interaction design, project management
DateDecember 2016 to April 2017 (5 months)

It's a total game-changer. One of our core principles is to remove communication barriers and having great technology can help do that.
Lindsay Klarman, Executive Director at HSDC


As one of the nation’s largest deaf-blind communities, Seattle is home to a number of helpful non-profits that cater a wide range of services. We were approached by the Hearing, Speech and Deaf Center (HSDC) of Puget Sound to attain its main goal for FY17 – to increase awareness of their services within the local and greater community.

Client interview

In order to better understand some of the problems they were running into, I set up a meeting with with select directors of HSDC. In this interview, they mentioned that their current WordPress site has become more and more burdensome for their staff to work with. The site, when it was developed, did not account for responsiveness, making it difficult for clients using mobile devices to seek HSDC’s services.

We dug into their website analytics to learn more about their users' journeys and found that most people initially came to the site to find out more on how to 1) volunteer and 2) to learn more about the services they offer. We also found that the “404 page” was the fifth most visited page on their site – never a good sign. Most site visitors would end up visiting the contact page, with our assumption that site visitors got “search fatigue”.

Design critique

Our team did an initial sweep of the site, noting how content-heavy the pages were. We also had our accessibility team audit the site, guiding them through the site using different user scenarios. Some of the accessibility issues included lack of tab focus, poorly-rendered animations, and more.

Site visitors have a hard time finding what they want on the website because of the sheer amount of content, distracting interactions and overall user experience across all devices. Due to these issues with the website, HSDC is not capturing all possible leads to the website.

A site that is easy to navigate with defined categories, succinct content and device responsiveness. This site should also be easy to use from a site administrator’s perspective, complete with pre-made post elements. Success for the website would mean a lower first-page bounce rate and an increase in appointments made from the website (as opposed to phone and in-person).

Design explorations

Site navigation

We started out by doing a full-site audit through the whole site, making note of all the pages. Then we went through the navigation, laying out all of the categories via sorting exercises to see what patterns, themes, and insights could be gleaned.

From there, we used their existing content to help us in creating wireframes, putting an emphasis on modularity to align with our idea of plug-and-play templates for the HSDC team.


Based on the feedback from an actual HSDC client (you can read the full-interview here), I decided to ask several volunteers to shoot photos so we could use real HSDC employees and clients on the site. When the photos were shot and processed, I also advocated for them to be submitted to Brand Central, Microsoft's repository for Microsoft-approved photography and illustrations. These are some of the first photos on Brand Central depicting real people who are Deaf or Hard of Hearing.

Final design

Getting to the delivery of our final designs required a lot of communication. The site designs ended up being shared with all teams at HSDC, so changes were being made at the last stretch. But once the changes were in, the team was able to deliver a clean, ADA-compliant site with a flexible content management backend.

Desktop design

Mobile design

We delivered on our promise of focused tabbing as well as device responsiveness.

Regarding component modularity, below is a demo showing just how easy (and quick) creating a new page - using universal components - can be.

Learnings and next steps

This project was a great learning lesson in stepping outside of the “notorious” Microsoft bubble. We should have reserved more time for contextual inquiry as well as socializing designs among stakeholders on our projects at HSDC. Because of this, we had to push back the launch date. Nonetheless, we delivered a product that the team was ecstatic about. With more time and resources, we would have created other features including a custom scheduling system that HSDC could use.