Designing an e-commerce site for Lello bookshop: A two-week UX Design sprint
General Assembly’s UX Design Immersive program is designed to teach you the fundamentals of UX Design through a number of increasingly deep and refined projects — letting you learn the ropes in real-time.
Following a quickfire five-day sprint to design an app for a coursemate using pen, paper and the rapid prototyping app Marvel, my second project found me designing an e-commerce site — from research and concept to the design and delivery of a mid-fi prototype. This gave me an opportunity to test out UX techniques such as persona-building, feature analysis and card sorting, as well as honing my skills in digital design programs Sketch and Invision.
For this project, I used the double diamond method, splitting the project into four phases — discover, define, design, deliver.
Assessing the brief
My task was to create a website for Lello Bookshop, a fictional community bookshop in Archway, North London. Fundamentally, the brief indicated that we needed to:
- Have clear ways of locating specific products
- Support a single page for each product which can be linked to directly
- Have an efficient way of purchasing one or more products
- Steer customers toward popular products
- Establish brand + points of difference
- Allow customers to contact the business — including to request a product not otherwise stocked
Research — and the ‘power of local’
To kick off the discovery phase, my first step was to engage in some competitive analysis in order to get an understanding of the space. Below, you can see a Feature Comparison, which saw me scrutinise some of Lello’s direct competitors — including established e-commerce giants like Amazon and World Of Books, major high-street chain Waterstones, and my favourite independent South London bookshop, Kirkdale Books.
Big e-commerce brands like Amazon were supposed to spell the end of the independent bookshop — and of course, trading conditions on UK high streets are notoriously challenging. But according to the Bookseller’s Association, indie bookshops are in fact in a period of growth, with the number on UK high streets rising for the second year running in 2018.
My Feature Comparison indicated that there was potential in focusing on the idea of Lello as a local, community-focused bookshop with a carefully curated stock — a clear point of differentiation from the other, bigger brands operating in the online space.
Next, I conducted a number of interviews via Zoom, including 6 open card sorts — in order to understand, sort and categorise the shop’s inventory — and two in-depth interviews to develop a mental map of current shopping trends. I broke my interview down into three categories — reading habits, shopping habits and recommendations.
My initial assumptions were that users would group books into broad categories — eg ‘fiction’ , ‘biography’— but in fact, my findings revealed that people preferred to get fairly granular with their categories, breaking fiction down into sub-categories such as ‘thriller’, ‘horror’, ‘classics’, ‘autobiography’, etc. In particular, this shaped my thinking when it came to building a site map and planning global, secondary and faceted navigation.
The interviews also revealed a few recurring findings.
- High value on recommendations — from friends, reviews, or even bookshop staff
- Books can be ‘improving’ or help you relax
- Bookshops can be a place for ‘impulse’ buys
- Time-poor — but would prefer to support independents given the chance
They also revealed an ethical awareness around purchasing habits that showed potential for the ‘power of local’ approach. As one user put it:
“I buy a lot of my books from Amazon — although I feel guilty about that.”
From this feedback, I could see potential in an online experience that combined ease of purchase, informed recommendation and a local ‘community’ ethos.
Defining the user
The next step was to define my idealised user as a means of guiding our strategic approach. Taking the findings from my interviews, I created the persona of Emma Hartwell, a time-poor mother of two who is keen to read, but feels out of the cultural loop.
I also created a brief scenario for Emma, focused on her wants and needs.
- Emma is joining a friend’s book club next week.
- She wants to purchase Mary Shelley’s Frankenstein, but is also keen to see what other similar books she might be able to buy and discuss.
- She lives locally and wants to collect from the store.
The Development phase
Next, I created a User Flow diagram to envisage Emma’s “happy path” — the route she would take to complete the above scenario with no errors or hitches.
I also sketched out some ideas using pencil and paper to get a clearer idea of the site architecture and how the prototype might look. In particular, I focused on the recommendations screens.
Taking note of the insights gained in my user interviews, as well as inspiration from the broader bookselling landscape, I decided these should take a very curated approach, picturing employees and valued customers alongside short reviews or reflections on the book in question — a way of driving home Lello’s community ethos and curated catalogue.
With an initial V1 prototype built in Sketch and imported to Invision, I embarked on some user testing. This quickly revealed a number of weak points, which I revised over a couple of subsequent versions.
- A Recommendations box that popped at the basket stage felt intrusive and “spammy”, so I redesigned it
- The checkout flow felt confusing and long-winded, so I simplified it, adding a smart progress bar
- Text sizing was deemed to be too small in places, too large in others — all brought in line
- ‘+’ buttons — designed to open up category pages — were swapped out for more conventional ‘View all’ links.
The Delivery stage
Check out four selected pages from the prototype below. From left to right: a Homepage with local navigation; a ‘Horror’ category page, featuring Recommendations panel and filter bar; a Log in page, including checkout progress bar; and an Order complete page.
The finished prototype met the six ‘musts’ laid out in the Lello brief. It also met a number of secondary objectives from the brief, allowing customers to browse products related to their current selection, and read about the store’s heritage.
Key learnings
Understanding checkout conventions. A lot of my iterative work focused on creating a seamless checkout experience. After it was clear my original checkout approach confused users — long-winded, too many steps — I did some research into familiar approaches, including layout, button placement and progress bar.
Recommendations need to be done right. While research clearly demonstrated users were eager to receive recommendations, it’s crucial this doesn’t interrupt or confuse the existing user flow.
What next?
Tackling a task of this scale in two weeks is always going to leave a few stones unturned. With more time, I’d like to have performed some more user testing, particularly relating to the checkout flow — much better in V3 than in V1, but still relatively untested as the project came to an end.
Additionally, I’d like to add social media links into the site, down in the supplemental navigation; enable users to review books, perhaps tied into a loyalty scheme; and adapt the prototype for mobile view.
Thanks for reading. If you want to talk to me about this project or anything else, you can find me on LinkedIn.
