UX case study on the Hennessey + Ingalls webshop

Have you ever been on a website and did not manage to accomplish what you came for?

Well, this is what happened to me on hennesseyingalls.com

Source: https://giphy.com/

As a curious UX designer, I decided to take a look at what is wrong with the site and come up with ideas on how it could be improved. Below is the process I followed:

Heuristic evaluation

To figure out what H+I is doing well and what can be improved, I did a heuristic evaluation — which means I analysed the page based on usability standards.

I found that some components were not where users are used to seeing them from other sites — e.g the search bar and the shopping cart. This violates Nielsen’s heuristic “Consistency & Standards”.

Source: hennesseyingalls.com

In the checkout process, there are many “next” buttons and the form field validation and highlighting of mandatory fields only happens at the very end of the process once you click “review order”. This violates Nielsen’s heuristic “Error prevention”.

Source: hennesseyingalls.com

To expand my understanding beyond my personal evaluation and understand how users interact with the site, I conducted user interviews.

User research

I wanted to get answers to the following questions to understand the users’ shopping habits and experience with online bookstores. I also watched them buy a book on H+I.com to get a feeling for their success and pain points.

  1. Where do they shop online?
  2. Where do they shop for books online? What do they like/dislike about their online shop of choice?
  3. How do people look for books?
  4. Can they find and buy a specific book on H+I.com?

With the user data, I created a persona that represents one core user group.

Persona “Lucy”

User Persona

Customer Journey Map

Customer Journey Map

Highlighted, we can see her two main pain points. Based on this, I decided to prioritize what I should look into.

Feature prioritization

I did the feature prioritization by sorting the features into three categories:

IA review and card sorting

To address the second problem — “I don’t find books” — I decided to review the IA and navigation by doing an open card sort with some users and redesigning the site map.

My next step was to create a prototype to test the newly designed navigation as well as redesign the checkout flow. So I started sketching… and sketching and sketching..

Source: giphy

Paper prototype

Until I came to something I liked:

I tested this with several users and adjusted the sketches based on their feedback — e.g. added ISBN number to the cart and removed the edit button since it didn’t really add value.

With this, it was time to go higher fidelity!

Clickable prototype

I decided to create my prototype using Axure. I like Axure because I can do anything from rough outline to pixel-pushing and interactions in one tool.

While creating the prototype, I continuously validated it with users to make sure they understood what I was building.

Here’s a video of how it turned out:

What do you think?

Let me know in the comments!