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
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:
Using Rafaela’s goals and frustrations whilst shopping online for books, I created a user journey map to identify the user’s pain points:
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:
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.
- 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.