Rebranding an online bookstore
Introducing more international authors to customers. An e-commerce web product designed during a 2-week sprint.
Project Overview
- Type: Concept project during my General Assembly UX Design course.
- Deliverables: Competitive research, persona, high-fidelity user flow, reassessment of information architecture, sketches, wireframes, iterations on design, and an interactive high-fidelity prototype for a desktop website.
- Tools used: Miro, Figma.
- Team: Solo project.
- Sprint duration: 2 weeks.
Background
Prose & Poetry has been the Highgate’s neighborhood bookstore since 2010. Located at the heart of Highgate village, they’re proud to be a part of a dynamic local community. They employ local staff and support the community they serve.
They care about sourcing literature from a wide range of writers and cultures. They have a section dedicated to the African and Caribbean literature and have customers coming from all over the UK to buy from them.
The problem we’re trying to resolve
Prose & Poetry saw an opportunity to support the local community by allowing people to order products online. They built their own website but they were not pleased with the results. They have plenty of website visitors yet few completed purchases.
Through an improved e-commerce website, they wanted to showcase their products while maintaining the brand image. Unlike big e-commerce retailers, they offer a highly curated inventory focusing on hand-picked quality over quantity.
Deliverables and their priority
The website must
- Have multiple clear ways of locating specific products.
- Have a product description page for each product.
- Have an efficient way of purchasing one or more products.
- Steer customers toward popular products.
- Allow customers to contact the business.
Should
- Allow customers to browse products related to their current selection.
- Allow customers to read and write reviews of a product.
- Provide information about the store.
How to tackle the problem?
1. DISCOVER
Emphasize with the users
Before we jump into the design process, I wanted to understand more about the bookstore users’ habits, desires, and pain points when shopping online. I also wanted to know how they would expect products to be shown in different categories on the website.
What are they looking for in the online and in-store bookshop experience? Are there any differences in their needs and desires during the two book purchase processes? Is there any information that should tailor my design?
I decided to conduct competitive research, user interviews, and card sorting as part of the discovery stage to reveal themes in user’s behaviour.
Competitive Research and Competitor Analysis
The purpose of a competitor analysis is to understand our competitors’ strengths and weaknesses in comparison to our own. It is also good to observe what they allow their users to do to identify gaps in the market.
I ran a feature inventory on commercial and independent bookstores to identify essential and “should” have features. I found that reader “reviews”, “media reviews” and “authors’ biography” features are not as common as for example a “wishlist” or “recommendations” on the website. It was interesting to see that the features that directly impact purchases (recommender or wishlist) are default while the rather user-supporting ones are sometimes neglected (reviews, authors’ biography).
As a UX designer, I wanted to discover more about what users desire, and what makes them enjoy the purchase experience, so we can provide a better user experience for the Prose & Poetry customer than an e-commerce website that is leading customers into buying more and more.
User Interviews
The main objective of the user interviews was to understand what users appreciate the most and what they are looking for in the online and in-store bookstore experience.
I conducted 7 user interviews with users who highlighted that they
- appreciate the in-store and online experience for different reasons. The in-store experience is an activity, online shopping is rather pragmatic and goal oriented exercise.
- appreciate and miss the physical feel and look of books when shopping online. Customers want to be able to look into, “get closer” to books online.
- are interested in international literature but have no access to it.
- dislikes irrelevant book recommendations but considers reviews important.
Card Sorting
The purpose of the card sorting was to understand how users expect products to be categorised on our website.
Card sorting is a technique that involves asking users to organise information into logical groups. Users are given a series of labeled cards and asked to organise and sort them into groups that they think are appropriate. Card sorting helps us to design an information architecture, workflow, menu structure, or website navigation paths. (Source: Experience UX)
I asked 6 users to organise and structure key books in the bookstore’s inventory. I identified key trends and used the most common categories to create a site map.
2. DEFINE the problem
Based on the trends I saw during the user interviews I created Katie, our persona. Katie's main problem she is looking to have a solution for:
Katie needs to be able to find international literature easily so she can complete the book purchase process fast.
3. DEVELOP
User Flow
Now I had an idea of the navigation on the site (site map) and of whom I am designing for (Katie, the typical user), and what their main needs are. This led me into the design and development phase where I wanted to find a solution for fast and smooth checkout. I created a user flow that demonstrates the user finding a title and adding it to their basket and completing the purchase.
Sketches and Wireframes
I generated sketches and mid-fidelity wireframes to be able to test and iterate on the design ideas before we go into a high-fidelity solution. I tested the mid-fidelity wireframes on 4 users.
The feedback I received was around visual elements (“make it bold” and “make it interactive”) and accessibility. I firstly introduced a solution that offered an immediate purchase option when the user hovered over the item, but I learnt that this is not accessible for everyone. I also learnt that users find interactive elements on a website enjoyable so I wanted to make sure I create an interactive map for the final design.
An interesting insight was that the first thing all users wanted to do on the platform was to use the “search” section immediately. This was proof of the original idea that we need a fast and effective purchase solution.
Inspirations
My visual design choices were centered around the persona and her personality. Katie is in her thirties, she has a stable office job, and she really likes to read. I wanted to design for Katie so Icreated a brand personality scale that adhered to my findings in the research part of the project.
The design should be playful and modern to ensure delight for Katie. It should be simple, polished, and literal, so the book purchase can be completed fast and easy. I wanted to add a sense of boldness and adventure to make the small shop stand out as a brand.
I suggested a complete rebrand to Prose & Poetry bringing in a modern, youthful and fresh colour palette. I also suggested using illustrations to spice up the literal, simple, and modern basis and create a rather playful and adventurous design. I used two modern typefaces, Firat Sans and Monsterrat in line with the brand personality. Please see my mood board that summarises the inspirations below.
IV. DELIVER
High-Fidelity Prototype
Applying the high fidelity elements (colour, typography) made my design live and appealing. Please see the final prototype as follows:
My final design met the deliverables. The website has multiple clear ways of locating products: accessing them from the main page, or by going onto the product categories (fiction, non-fiction, etc.), or by searching for a specific product in the search bar, or by going onto the interactive map. The interactive map directs the users to continents and then to countries, where they can browse authors from specific regions.
My solution has a product description page for each product, including reviews, more information about the author in the “author bio” and info on other editions apart from the offered product.
The user is able to purchase one or more products in an efficient way. After selecting each item a pop-up window shows the products in the basket. The website also steers customers towards popular products by the “you might be also interested in…” section and the banner highlighting Librry’s picks under “books of the month February”.
The customers are able to contact the business and read more about them by going onto the about, customer service, and follow us section on the bottom of the page.
My role, challenges, and learnings.
This was a solo project, so I created everything from scratch. I conducted 7 user interviews and 6 card sorting exercises as part of the research. I carried out the comparative research on my own and generated sketches. I developed the sketches into mid-fidelity wireframes and then into high-fidelity.
The main challenge in this exercise was to create something different and outstanding, as there many online bookstore’s in place. Having Katie, the persona in mind helped a lot in recreating the brand’s image and deliver a solution that users will enjoy.
Thanks for reading! If you enjoyed the above please get in contact. :)
