Case study: Improving UX on an existing website

How does one start to improve the UX of an existing website? Many websites have been around for a long time and business owners may not necessarily have resources or time to build a completely new website. UX improvements can be done without having to rebuild a website from the ground up. Performing a UX audit can identify ways to improve usability of the existing design.

Animal Welfare Society have been consistently adding content to their website since 2012 and they asked for a UX audit in tandem with a complete website evaluation. I began with Heuristic and Competitive Analysis of the current website. The goal of heuristic and competitive feature analysis was not only to identify modern website design best practices but also to improve user activity on animalwelfaresociety.org. These methods are employed as a systematic way of evaluating if a contemporary website meets and exceeds user’s expectations.

Heuristic Analysis

A Heuristic Evaluation enables a UX researcher to identify problems in the user interface design and examine the website’s compliance with recognized usability principles. The Abby Method of heuristic analysis outlines a checklist of 10 heuristic principles; Findable, Accessible, Clear, Communicative, Useful, Credible, Controllable, Valuable, Learnable and Delightful. Using the Abby Method also enables the researcher to make recommendations based on observations.

Example of Abby Method Heuristic Analysis

Accessibility
One of the first heuristics is Accessibility. Examples of common issues with accessibility are Contrast and Link Text.

Contrast
Contrast is the clarity of a design provided by the juxtaposition of different colors or textures. It’s important to make sure a design has good contrast between text and background so that it is easily legible. In this example, Chrome’s Developer Tools are used to check contrast. We can see that the white text against the tan background has a contrast of 1.74, far below the recommended 4.5 for regular 16px text.

Chrome’s Developer Tools

Link Text
There are many online validation tools that help identify accessibility issues on websites. As you can see in the example below, WebAIM has identified that the text in the “How to Adopt” link is a very ambiguous “READ MORE”. When read by a screen reader this could be confusing. It’s important that links describe their destination and avoid generic terms like “click here” or “read more”. I recommended creating a Call To Action button with text that describes the activity, in this case, “Adopt Today”.

WebAIM online Accessibility validation tool

Competitive Analysis

Competitive Analysis is a method of researching competitors and evaluating what features contribute to the usability of their websites. This enables a UX researcher to identify features users expect to see but also how the website might differentiate itself from the competition.

In the example below you can see AWS (on the left) next to three main competitors and one comparator. The three competitors are very similar organizations located near AWS, while the comparator, ASPCA, is a larger, national organization. These competitive websites were designed and updated in 2021. A very useful visualization tool is to look at the competitors side by side. With the heuristic evaluation in mind, a researcher can make a list of features by examining these contemporary websites.

Competitive research

The competitive feature analysis (seen below) identifies some of the major features of the newer websites and how they compare to AWS. The list does not include an exhaustive inventory of every single feature of a modern website, it’s more of a reference of features on these particular websites. We know from analytics that most users access the AWS website with the goal of looking at rescue animals and inquiring about adoption. We also know that the majority of users have mobile devices. Finally, from a business standpoint, we know it’s important for the organization to get people to sign up and donate. The rest of the features are based on common website and mobile heuristics that increase usability and make the site updated, new and modern.

Competitive Feature Analysis

The annotated screenshot below illustrates a few of the features outlined in the heuristic evaluation and competitive feature analysis.

Annotated competitor’s website

High-Fidelity Mock-Up

Creating a high-fidelity mock-up is a great way to quickly visualize recommended changes to the website. In this case, the client did not want to change any of the visual design of the website (such as fonts or colors) so the mock-up (on the right) uses the same visual guide as the original (on the left).

Existing Website (left) and redesign mock-up (right)

The image below annotates some of the recommended changes on the hi-fi mock-up. Many of these changes can be implemented in-house using the website builder without having to rebuild the website from scratch. This is one way to improve UX on an existing website without requiring a full redesign.

If AWS does decide they want to continue with a full UX redesign of the website, they are set up for the next steps and can continue with user interviews and testing.

Next Steps:

• User Interviews.
• MOSCOW feature prioritization.
• Card Sorting/information architecture.
• Mock-up Prototype and user testing.
• High-fidelity prototype and user testing.
• New High-fidelity website design.