House of Books
A lovable site for a loved independent business
I was tasked to redesign a local independent bookshop’s website to support their move to the e-commerce space and bring the brand spirit onto the screen.
I carefully designed the navigation, page layout, features, typography and colour scheme to provide assurance, exciting and aesthetic experiences as well as a human touch.
I independently conducted user interviews, contextual inquiry, competitive and comparative analysis, card sorting, research synthesis, user flows, wireframes, usability testing, high fidelity prototype.
Concept project
Solo project
User experience, information architecture, visual design, wireframing, prototyping
Figma
2 weeks
Key Screens
A Lovely Bookshop With An Unlovable Site
You might have never heard of House of Books, but the shop was clearly loved by local visitors with an impressive 4.8 star rating on Google Maps.
The digital presence, however, is far from amazing.
Their current website is merely a shop info page which needs a makeover to enable the e-commerce functions and bring alive the brand image.
Uncovering the Problem
Why shop elsewhere, when Amazon is so easy and cheap?
After synthesising the initial 5 interviews with people who regularly shop books, I was hit by an existentialist question: is there a problem at all?
When it comes to the top factors for book purchase, 3 out of 5 users indicated it all comes down to pricing with Amazon being their go-to place.
If Amazon has the best price, search function, variety, payment and delivery, why shop elsewhere?
"I buy books from amazon, easy to search, comes next day which is key"
Book shopping as an aesthetic, sensory and emotional experience
A conversation with the TA inspired me to shift the focus to the peculiarity of the business and its customers.
Why do people shop independent? What’s special about House of Books? What's there beyond the rational transactional needs?
I scheduled 2 more interviews with book lovers who regularly visit independent bookshops. For them book shopping is a personal, sensory and emotional experience.
Unsurprisingly, a similar sentiment of the joy of browsing is also found in the initial interviews.
I visited the shop. So bright and lovely!
The staff enjoyed the human touch as they can talk to customers and “order weird books”. It was also useful to learn about the USP of the shop: brand new books at discounted price.
Another discovery was how bright, colourful, and organised the place is, which needs a fairer online representation.
Meet Joe!
After identifying the common ground between user and business needs, I created the persona Joe whose needs are constantly referred back to in the design.
Feature Highlight
Scenario
Navigate & browse with ease
Solution
Joe can easily access the main business info & priorities in the navigation bar on the top of a simple, text-light home page. He can immediately find the search bar coloured in bright green.
If he wishes to browse new books, the relatively large book cover pictures can help him identify ones that feel right.
Scenario
Find the exact book with peace of mind
Solution
Joe will feel assured as he can find extensive book & shopping info which includes reviews, stock levels and product details without worrying about getting the wrong edition that ruins his perfect collections.
Scenario
A personal & exciting experience
Solution
Right under the navigation bar, Joe can find out exciting events and click Learn More if he’s indeed intrigued.
He will also be able to browse staff picks whose taste never fail to please him or look at what’s fresh in the New In section.
Visual Design
The visit to the shop was very helpful in defining the visual style, where I learned about the demographics of the customers, the USP of the shop and the vibe it carries.
Design goal: reliable, modern, cosy
Element
Typography
Rationale
Cinzel was chosen for the headings and logo as this is a serif typeface which looks classic and reliable. Raleway was used for the body texts as the round san-serif typeface feels modern and cosy.
Design goal: reliable, modern, cosy
Element
Colour Palette
Rationale
To replicate the lively yet reliable brand image of the bookshop, I picked a warm earthy brown for the footer & banner background, in contrast with a bright green for the primary buttons. A gentle lilac was used in secondary buttons and a classic teal was used for callouts.
Iterations
Enhancing e-commerce basics
Adding a human touch & excitement
Final Design
Find intriguing books and events on the friendly, text-light homepage
Navigate to the next book of your collection easily
Extensive details to find the exact book
Learnings
It’s important to verify the brief and find a common ground between business and user needs.
Find the most relevant users to guarantee quality interviews.
When time is limited, prioritise the most impactful and essential needs and design tweaks.