Prose & Poetry bookstore- UX Case Study

Designing an e-Commerce website for a local, independent bookstore.

Bootcamp: General Assembly
Length of project: 2 weeks
Team size: solo
My role: researcher, UX/UI designer

Overview

As part of a 2 week design sprint at General Assembly, I was tasked with designing an e-commerce site for an independent bookshop, Prose & Poetry, based in Highgate, North London. The client’s goal was to have an improved e-Commerce experience, whilst maintaining their ‘small shop’ appeal as it is a local treasure. The client had some specific requirements, which were:

• Must have multiple clear ways of locating specific products.
• Have a product description for each page.
• Have an efficient way of purchasing one or more products.
• Allow customers to contact the business.

I followed the double diamond process, the 4 main phases being: Discover, Define, Develop, and Deliver.

Phase 1: Discover

Researching competitors, card sorting, and user interviews.

I started off with some competitive research, where I reviewed Daunt Books, Waterstones, and Owl Bookshop (another North London bookstore), as well as some comparative research of other e-Commerce stores, such as Asos and Amazon. From here I produced a feature analysis table, which helped me assess what some stores are doing well, or not so well.

I then moved onto some card sorting- where participants group items into categories according to criteria that makes sense to them. From this I was able to derive some key categories for the global navigation:

— Bestsellers — Fiction — Non-fiction — Children’s — Gifts & Stationary

Some more categories were formed for the secondary navigation, a few being:

— Arts & Culture — History — Travel — Cookery

User interviews were the next stage. These helped me understand my users goals, perceptions and experiences around reading books and buying them online. The key insights were:

• Many resort to using Amazon because it’s easy, though also feel that they should support independent businesses more.
• Amazon however, is not used for ‘browsing’ or just ‘having a scroll’- all interviewees said they only use it when they already know what they are buying (using the search bar)
• They miss the pre-lockdown experience of strolling and browsing a bookshop.
• Most would be interested in diversifying what types of books they read, if given recommendations.
• Recommendations and reviews are highly valued when choosing what to read.

Phase 2: Define

Creating a persona, user journey map, and user flow, and sitemap.

A persona is a fictional character based on our user research. It enables us to focus on a target user group, and helps us keep in mind who we are designing for- I really enjoyed this part of the UX process. An amalgamation of all of my interviewees, I created Rafaela:

We can always refer back to Rafaela through our design process

Using Rafaela’s goals and frustrations whilst shopping online for books, I created a user journey map to identify the user’s pain points:

The user gets frustrated by the checkout process, making her reluctantly use Amazon instead, which in fact creates a secondary ‘guilt’ pain point.

I then created a simple user flow, for Rafaela to browse for, and purchase a new book:

Now for the sitemap- a great way to showcase and plan the information architecture of the site. I used my card sorting results, along with some assumptions of more categories that could be used, since we were provided with a fairly limited inventory:

Phase 3: Develop

Ideating, sketching and creating wireframes, and usability testing

Baring in mind all my findings so far, I did some simple sketches to layout where the main features would be- I then tested these to make sure the navigation was intuitive, and moved on to creating mid fidelity wireframes:

My usability testing provided a few bits of feedback to take on for the high-fidelity wireframes:

• The faceted navigation was popular, and the unfussy layout was appreciated.
• A screen for ‘my basket’ needed to be added, instead of going straight to checkout.
• It is spelled ‘stationery’, not ‘stationary’! Admittedly a small detail, it is worth noting that our customers are bookish, after all, and will notice (and judge)these things.

With these useful nuggets, I moved on to my high-fidelity wireframes.

Phase 4: Deliver

Creating a high-fidelity, clickable prototype!

Producing a high-fidelity mockup in such a short time window forced me to get to grips with using Figma. Though I didn’t have much time to refine it, I enjoyed the visual side of this project. Branding was not required in the brief, however I created a logo, as well as a little slogan for the bookstore- ‘the heart of Highgate’. Here, you can view Rafaela’s journey through the website:

Key Learnings:

As my first real UX project, I got to grips with the double diamond process and all that it entails- user research, personas, journey maps, and user flows and prototyping. This was a great first project to show me the end-to-end process of UX, and I will no doubt be using this throughout my upcoming projects.

Next Steps:

• As this was my first time using Figma properly (or any design tool , for that matter), it took me a while to achieve what I wanted. If I had more time on the project, I would consider UI elements more and take more time to refine the design. I would also conduct some more user testing on the final designs. My next steps moving forward in my course are to learn more Figma hacks so I can speed up my workflow.
• I could develop the reviews section further, with a forum element for the local community, since recommendations were highly valued in user interviews.

I hope you enjoyed this read. If you’d like to chat about any of my designs- or anything else- feel free to contact me on LinkedIn.