Re-creating the ‘small shop’ browsing experience in a book e-commerce website
UX Design | E-commerce | Concept project | 2.5 weeks sprint General Assembly, London
From March to June 2018, I was a student on the User Experience (UX) Design Immersive Course at General Assembly (GA), London. This was the first of four projects that we undertook.
The task was to design a new e-commerce website for an imaginary local, independent bookshop — Polaris Books. Some of the initial stages of the project, in particular the competitive analysis and site visits, were done as a group, but most of it was a solo effort.
In the first few lectures of the course we were introduced to the standard UX design process of Discover, Define, Develop and Deliver (visually represented by the Double Diamond) that I will use to structure this case study.
Discover
The brief
Build a new e-commerce website for Polaris Books that allows the company to showcase its products, allow people to order some products online and either have them shipped to their home or work, or picked up in store. Achieve this while maintaining its brand image and ‘small shop’ appeal.
Understanding the brand
Polaris Books has been Bethnal Green’s neighbourhood book shop since 1982. Their business model is based on customer service, reasonable pricing and keeping it local. They employ local staff and support the diverse community that they serve.
Their inventory is varied — a mixture of bestsellers and some more unique ‘hand-picked’ books such as first editions, as well as a smaller range of non-book gift items such as tote bags and stationery. We were given a list of 75 items that would be the first to be stocked on their website.
What the client wants
Polaris Books gave us a list of website features that were ‘must-haves’ or ‘should-haves’:
- Clear ways of locating specific products
- Single page for each product
- Efficient way of purchasing 1 or more products
- Steer customers toward popular products
- Establish the brand and its point of difference
- Allow customers to contact the business
- Browse related products
- Allow customers to read and write reviews of the product
- Information about the store’s heritage
- Reward loyalty for repeat customers
Our target user
Of the 3 personas provided by the client, I decided to concentrate on only one persona — this, I felt, would provide better focus and clarity rather than trying to juggle with multiple personas given the tight timeframe.
I chose Charlotte — largely because she was the only one with an obvious interest in books!
Interviewing users
I explored the habits and motives of potential real users — the information we were given about Charlotte was a useful backbone but was too sparse to build a meaningful product and further digging was very much required.
I interviewed 4 friends and colleagues about their book purchasing habits and experiences.
Here I have compared them to my persona, Charlotte, using her key values as parameters:
As you can see in the diagram, none of my interviewed users were book club members, but all 4 greatly valued convenience in their book purchases. Of the 4, Mr. D was most similar to Charlotte.
Here is my favourite quote from Mr. D:
“I don’t trust Amazon recommendations — their algorithms are not clever, for example: You just bought a plug adaptor, here are some more plug adaptors. I trust human recommendations — I trust that human connection, knowing that it’s not a computer algorithm.”
However as much as Mr. D disapproved of their recommendations, he would, like all my other users to varying degrees, purchase books from both Amazon and physical bookshops. Why? … He explained that this differentiation occurred because Amazon is very convenient when you have a particular book already in mind, but he would never browse or look for book inspiration on Amazon. My other interviewed users all voiced similar opinions — that Amazon was useful for convenient, cheap book buying, but physical bookshops were better for finding inspiration for their next exciting read.
I wanted this crucial difference to be a focal point for my website — if I want to compete with a giant like Amazon, I needed to concentrate on an area that Amazon did not do well and that my small, local bookshop could do well, namely the browsing experience and finding inspiration.
Site visit
I then visited Brick Lane Bookshop — a real life parallel to our imaginary Polaris Books.
It was a busy lunchtime shift with locals and tourists abound. Despite this, the staff very kindly agree to speak to us. An interesting, if not alarming, finding was that the staff were barely aware of the existence of their bookshop website, so rarely was it actually used by customers.
The shop itself had a pleasant, heritage feel with an interesting, slightly higgledy-piggledy display — display tables with mysterious, unlabelled themes; shelves crammed with books pointing out at different angles; large bestseller and local history sections right at the front of the shop. The staff told us that they were frequently asked for recommendations — mostly the very general ‘What do you recommend?’ that the staff then had to filter down.
Analysis of competitor websites
I analysed the websites of 5 bookshops, including the aforementioned Brick Lane Bookshop. They were chosen because they had a local, physical presence and also had websites where a customer could buy and pay for a book. 2 of them were independent bookshops (Brick Lane Bookshop, London Review Bookshop) and 3 of them were chain (Daunt Books, Waterstones, Foyles).
Through browsing these websites, I discovered a few ways in which they already were reflecting some of Charlotte’s key values.
To this list, I added the client’s list of ‘must-haves’ and ‘should-haves’ and analysed how common they were amongst my competitor websites, dividing them into ‘Essential’ features (things customers would definitely be expecting), ‘Common’ features, and ‘Uncommon’ features (an area of opportunity for my website?):
Card-sorting
I performed open card-sorting of the 75 inventory items with several users and pooled that data with my colleagues— in the end we obtained open card-sorting data from 15 users. These are the relatively common categories:
My main takeaway from this is that our users created flat hierarchies — as you can see from the table above, very few users went for a ‘Non-fiction’ category.
After going through a few rounds of closed card-sorting, the information architecture of my website made various mutations. The final sitemap, however, was influenced not only by the card-sorting process but also by design studio and prototype testing, which I will discuss later.
Bringing it together
These are the key things I want to take forward from the develop phase into the define phase.
Define
How would the website improve the user experience? I constructed a storyboard with the intended beneficial outcome and also a ‘How might we’ question, both aimed at helping to frame idea generation.
Storyboard
How might we…
I chose this ‘How might we’ question because it captures the key advantage of small physical bookshops over online giants like Amazon. I also felt that it allowed a suitable breadth of creativity.
How might we provide a book browsing experience online that reflects the traditional bookshop experience?
Design Studio
I experienced a really useful Design Studio brainstorming session with a small number of fellow students, using the above ‘How might we’ question.
These are a selection of bookshop features we were trying to recreate and the possible web-based solutions we came up with:
I tried to include all of these ideas in my final website. However the most important feature in this list is the concept of reading lists — both as a tool for providing expert recommendations and also to recreate the browsing experience where you can compare items before taking it to the cashier. It’s also comparable to playlists on music websites/apps such as Spotify, and so hopefully easy to understand.
User Flow
The user flow, the steps that a user takes through a particular task, included the process of saving a book in your reading list:
Paper prototypes
Following that, I created a paper prototype, the purpose of which is to make a basic version of the app so that I could obtain user feedback and make improvements as quickly as possible.
From paper prototypes to version 1 of the digital prototype
Paper prototype user testing was an eye opening experience — the testing process involved asking for general comments and also asking users to perform the tasks of browsing for a book, adding it to a reading list and then purchasing it. I recorded the feedback I received, and highlighted comments that were similar between 2 or more users.
Here are the key changes I made based on this feedback:
Home page prototypes: paper to digital 1
Product page prototypes: paper to digital 1
My Reading List prototypes: paper to digital 1
Basket page prototypes: paper to digital 1
Order Confirmation page prototypes: paper to digital 1
From digital prototype version 1 to version 2
Rinse and repeat — I obtained further user feedback on version 1 of the digital prototype.
Basket page prototypes: from digital 1 to digital 2
Checkout page prototypes: from digital 1 to digital 2
Test out the version 2 digital prototype yourself
Next Steps
Users who tested version 2 of the digital prototype generally described that it was easy to find inspiration and purchase a book. However there was some confusion about account vs. non-account holders — the user flow of these two groups will need to be clarified. And despite the improvements I made to the check-out flow, there remained a smattering of complaints about isolated issues. If this continued with further testing, I would probably re-think the check-out flow entirely.
I would also like to go back to the beginning and conduct user interviews with individuals who are members of bookclubs — do they see reading lists as a useful tool for inspiration, and the collecting and sharing of books?
In addition a few of my interviewed users talked about going to a physical bookshop as a very calming process. This would be an interesting avenue to explore — how would you reflect the concept of ‘calmness’ in an e-commerce website?
For my competitive analysis, I would also like to examine online bookshops which already employ reading lists, and also take a closer look at Amazon, the retail behemoth that all of my interviewed users regularly use for book-buying. In particular I would examine the use of 1-click payments — is this something my users would value in a small bookshop website? Would they trust such a small e-commerce website to store their card details?
What I learned
- Doing a site visit and speaking to knowledgeable staff is a fascinating and highly useful process.
- Card-sorting is time-consuming and more variable and subjective than I anticipated.
- This was my first UX design project and it felt like I was diving into the deep-end. However I enjoyed the process and it was very satisfying to have a working prototype at the end of the 2 weeks with positive feedback.
