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.

My Role

I independently conducted user interviews, contextual inquiry, competitive and comparative analysis, card sorting, research synthesis, user flows, wireframes, usability testing, high fidelity prototype.

Project Type

Concept project


Solo project


User experience, information architecture, visual design, wireframing, prototyping




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.

What do users like about book shopping?
Shopping as an experience
“I collect and pay in store for the full shopping experience"
The joy of browsing
“I collect and pay in store for the full shopping experience"
Books as aesthetic objects
“I collect and pay in store for the full shopping experience"
Emotional connections
“I collect and pay in store for the full shopping experience"

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.

Other key business info & needs according to the staff
Customers are mostly local young families
Clear and easy navigation
Sufficient product details
History / stories of the shop
Easily discoverable contacts
Efficient purchase process

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


Navigate & browse with ease


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.


Find the exact book with peace of mind


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.


A personal & exciting experience


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




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


Colour Palette


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.


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


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.