A new, accessible and responsive website 

An inflexible platform

When myself and the team initially got in touch with the Hearing, Speech and Deaf Center (HSDC), I scheduled an initial kick-off meeting to understand their goals for this project.

The way their content management system (CMS) was set up on WordPress made it hard for them to make changes to the site. This was because a previous agency had come in and redesigned their site. Unfortunately, that redesign made making updates difficult for the HSDC staff. So however the site was redesigned, one of their goals was to make managing the site much more flexible.

The HSDC leaders also mentioned that, despite all of the information on their site, they were still getting far too many phone calls and people coming into the clinic to ask questions. They were wondering if there was something that could be done to decrease these inquiries.

Too much information

Based on some initial exploration of the site I did on my own (i.e. testing for responsiveness and accessibility), I asked our in-house accessibility experts to conduct accessibility heuristics on the site. I also set up three 1:1 usability studies, setting up participants with three different scenarios to work through the site with.

Findings from this research included: 

  • Participants were unable to navigate the site due to the sheer amount of content for both mobile and desktop. The experience was particularly worse for mobile due to the smaller screen size.

  • Participants either zoomed in or rotated their phones in order to increase the accuracy of where they were tapping. 

 

From this research, we were able to conclude that:

  1. From the accessibility heuristics evaluation, the site ultimately failed. Contributing factors included inaccessible carousels, inaccessible navigations and more.

  2. From the user research, there is too much content on the site with little clarity, making it difficult for users to find the information they're looking for.

  3. The site is unresponsive and makes the site, which is already hard to navigate through, even harder to work with on other devices.

From these conclusions, my team was able to set the following goals for this project:

  1. Design the site to be responsive on any device.

  2. Design the site to be accessible.

  3. Design the site to create more focus on content.

  4. Design the site to be flexible for site administrators.

Since flexibility was key, we came up with the idea of modular components, which would also solve the problem of responsiveness, accessibility and focused content as components would automatically solve for these three aspects.

 

Bringing focus

The gif below shows the steps that were taken to organize the information architecture into themes that could help focus content across the pages.

The visual designer and I worked together to code each of the different components we were seeing across pages. We then handed off these components to our developer, who was able to leverage the Shortcake (Shortcode UI) WordPress plugin to implement these components.

 

With the restructured navigation and coded components, we set out to work on wireframes. Below is a sample of wireframes for the pages under "Clinic" and "Services".

Using HSDC's branding and identity guidelines, we brought up the fidelity and made sure that the typeface and colors used aligned with these guidelines. 

Further improvement

Before we moved any further into designs, we asked the center for a few contacts that would be open to giving us feedback on these designs. While most of the contacts they gave us were unavailable, we were able to get in touch with one person - we'll call her Molly to hide her identity.

We met Molly at her place of work, asked her about how she found out about HSDC and asked about her thoughts on the site. 

PROS

  • "The top navigation is easy to work with."

  • "I really like that the forms are accessible. It was a really difficult process calling the center just to get a hold of the right form."

  • "The icon links [on the homepage] are helpful."

CONS

  • "The more methods of communication, the better. A phone number isn't particularly valuable for deaf families.

  • "More people-first photography and photography in general."

  • "I'd like to know a bit more about what HSDC does based on the homepage."

Finishing touches

We took Molly's feedback as well as that of our stakeholders at HSDC and turned around high-fidelity designs that reflected this feedback. 

From the site administrator's perspective, we were able to incorporate the component library into the CMS so that anyone could come in create or edit pages, as demonstrated below.

The live site is viewable here.

Happy clients

With the minimum of a flexible CMS, we exceeded the expectations of the Hearing, Speech and Deaf Center. As we handed off this project, I am unsure of whether our objective - decreasing the number of inquiries - has been achieved, but based on these improvements, I can assume that there has been at least some impact based on the feedback we have received.

One takeaway from this would be to understand how the organization disseminates and relays information internally. The hand-off was pushed back by a few weeks because internal socializing was broader than expected and a few changes, albeit minor, needed to be made in response.

  • White LinkedIn Icon
  • White Twitter Icon
  • White Instagram Icon
  • White dribbble Icon

© 2019 by Sara Clayton