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
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:
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”.
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”.
To expand my understanding beyond my personal evaluation and understand how users interact with the site, I conducted user interviews.
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.
- Where do they shop online?
- Where do they shop for books online? What do they like/dislike about their online shop of choice?
- How do people look for books?
- 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.
Customer Journey Map
Highlighted, we can see her two main pain points. Based on this, I decided to prioritize what I should look into.
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..
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!
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!