Highgate Reads needed to increase online sales on their website
To boost their e-commerce profile, I implemented UX solutions that laid out a clearer path to purchase.
TYPE OF PROJECT: Responsive e-commerce website, Business-to-customer (B2C)
MY RESPONSIBILITIES: Research, Information Architecture, Product Design, UX Strategy, UI Design, Testing
TOOLBOX: Figma, Adobe Illustrator, Adobe Photoshop
PRODUCT DESIGN FRAMEWORKS: Moscow method, Eisenhower method, Ishikawa diagram
UX METHODS: User interviews, Affinity mapping, Brand sprint, Competitive and comparative analysis, Task analysis, Persona building, Userflow, User stories, Card sorting, Tree testing, Prototype feedback session, Qualitative usability testing
London’s neighbourhood bookseller, Highgate Reads, created their own website in the 2010s. Its primary purpose was to advertise the events hosted by the bookshop. Now, the owners wanted to turn their online presence into tangible profit and sell more books online. To boost their e-commerce platform, I embarked on a three-week sprint that helped me create a new brand identity consolidated in a high–fidelity checkout flow.
Many visitors, little customers
Although the Highgate Reads site already offered a rudimentary shopping experience, the business had to seek new ways of securing the transactions. Despite the high online traffic, very few purchases were actually finalised. This problem called for a more optimal e-commerce experience whose success would be measured by an increased rate of completed orders.
When the site doesn’t “make sense”
The client has also reported that their in-store customers would give feedback on the website. The reoccurring complaint was that the clarity of the e-shop left a lot to be desired. Customers struggled to find the book they wanted to buy online and often were surprised to find it in a genre category that they believed was wrong.
Why would you leave your cart in the middle?
Since my client’s customer range focused primarily on local shoppers, I decided to run a series of user interviews as the best way to gain first-hand insight into the habits and needs of local customers.
To track the key trends from these interviews, I synthesised the main trends in an affinity mapping exercise. Later, the Ishikawa diagram helped me realise how varied the reasons for not completing an online purchase can be.
1 shop, 2 types of customers
At this stage, I compiled a brand sprint, comparative and competitive analysis of my client’s key competitors as well as delivered two digital personas based on the insights from my interviews.
For each of them, I generated a journey map of their future online experience, from entering the site to completing the purchase.
Tidying up the inventory
It was now time to think of how the MVP might address the problem of books found in mismatched genre categories. I solved this issue by running a tree testing session and a card sorting survey via UX Tweak.
The survey results gave me a better understanding of customers’ expectations regarding the shop inventory. This was an invaluable lesson while crafting the information architecture of the new product.
Golden rules of modern navigation
With the card sorting results in, it was time for me to consider how the future navigation should function (and look like, of course). In my research, I came across 4 rules of modern navigation that helped me frame my ideas in a coherent deliverable.
Firstly, avoid oddities. The customer should be able to find the nav where they think it should be. I opted for the top bar in-line with the shop logo to highlight its importance. Secondly, design clear interactions with nav labels. I guess it couldn’t get any clearer than black on white with underlined labels while hovering. Finally, use breadcrumbs — they will signpost the customer path and make their orientation within your product more understandable.
Make it personal
Shifting to high fidelity, I knew that it was important to take into consideration the local and community-focused character of my client’s business. It was clear to me from the received brief that the site would be highly frequented by the customers who either live or work in the Highgate area and are familiar with the “non-online”/real shop.
To capture their attention, I opted for illustrations representing the shop front and some local hallmarks, including Archway Bridge. The addition of the portraits of staff members inspires a sense of familiarity and approachability that the shop owners so deeply cared to preserve.
A new site for the local seller
A clickable prototype of the home, product, checkout and contact pages was created on Figma. The new interface of the website with clear and engaging calls for action along with accessible filters and a more intuitive organisation of product inventory improves the clarity of where the user is supposed to go in order to complete a purchase.
The addition of a quick add button along with an inset basket menu in the top right corner of the website addressed the problem of scarce purchases made on the site stated in the brief.
I developed an appetising way to display products and give customers a clear way to find new items tailored to their needs. The brand identity I elaborated with the new site highlighted a personable and communitarian feel of the bookshop.
● See how this product works on adamwieclawski.com
Let’s benchmark test it
To test the efficiency of the new navigation system, I set out two benchmark tests. I took the advice of my UX course instructor regarding the time metrics I should measure my users against in order to evaluate the speed and the performance of new flows.
The feedback received in unmoderated testing rounds pointed at the user’s enthusiasm for completing the purchase in a more navigable environment. The first test read “You are into cooking. Please find and purchase the top-rated book focused on this interest.” My intention was to see how quickly the customer will find the right category in the navigation bar and if they would know how to use the filter option in the second stage of the search.
The feedback received in unmoderated testing rounds pointed at the user’s enthusiasm for completing the purchase in a more navigable environment. The benchmark set at 1.5 minutes for the task of looking up and buying a book was met by 9 out of 10 users.
The second task was to “find the book with the word Confession in its title and buy it”. This time, I wanted to test the discoverability of the search bar and the easiness of the checkout flow. The benchmark set at 1 minute for this round was met by all the users.
Though the quantitive data looked promising, it was only after the benchmarking was done that I was able to gather some instructive insights into what the users actually thought about my product.
If you listen closely, the user will do your job for you
When learning how to run a usability testing session, you are often reminded to always ask the user if there is anything else they wanted to share but you might not have asked them about. It seems like the most cliche thing to ask but for some reason is often omitted by unattentive testers. This is a classic example of inbuilt bias which assumes that the test you prepared is the most effective and thorough way to evaluate your invention.
What I learned in the testing of my prototype is to never skip this key moment. Not only was I able to get some invaluable qualitative feedback from my users. One “why” led to another and my users identified ways in which certain aspects of my product could be done better. If you listen closely and ask the right questions, the user will do your job for you.
2 testers said that transitioning between three stages of the checkout was not clear enough. They appreciated the delightful character of the illustrations but wondered if the process could have been made more apparent with some starker visual choices, such as colour-blocking.
Another constructive piece of feedback referred to the basket pop-up window after a product is added to the basket. The users voiced their concerns about the impact of this strategy. Their worry was that, especially on smaller viewports, a pop-up in the corner would not be noticed by the future buyer, leaving them frustrated and ill-informed about the status of their shopping basket.
Better e-commerce, satisfaction guaranteed
I was able to quickly implement new UX methods in my iterative process. I was a novice when it came to building the information architecture of a new website. Using the card sorting method was a lesson in applying techniques I wasn’t familiar with to the MVP.
Secondly, I understood how the UX-geared elements of the process, including research and wireframing, complemented the visual side of the project at the UI development stage. Small interface tweaks can help the users move through the checkout with more enthusiasm and speed.
Resources that helped me
It was my first time working on an e-commerce project. I made sure that before I started to look for the answers as to why Prose and Poetry were not selling well on the internet, I took some time to learn about the general ins and outs of online shopping.
Of course, we all buy stuff online and the pandemic has upgraded many of us to the top expert level on this matter. However, to understand what this process is like from the seller’s perspective, I turned on my geek mode and read some insightful articles from Baymard Institute, an e-commerce mastermind that can boast Nike or IBM among their clients. This article was filled with plenty of data which helped me understand why people abandon their carts halfway.
I also used the UX classic O’Reilly’s “Information Architecture” (the one with a polar bear) for the guidelines on effective cart sorting and labelling.
