Website
Shipped
Modernising The Online Book Retail Experience For Nutmeg Books
Role
UX Designer, Web Developer
Deliverables
Wireframe, High Fidelity Prototype
Discipline
UX design, UI design, Web Development
Platform
Web and Mobile
Timeline
April - September 2021
Tools
Figma
Introduction
Nutmeg Books, an extension to Nutmeg Publishing, is an independent Malaysian publishing and book selling company that focuses on web-based distribution of books on the topics pertaining to Malaysian history, culture and heritage. In the recent years, they have extended their sales to primarily Shopee, as well as e-books through Smashwords, Barnes and Noble, Kobo, etc.
The new website pertains to a rebranding of its identity to modernise and boost web audience to drive sales to their Shopee store within 3 months.
In line with the launch of a new publication: Strange and Paranormal Tales from Malacca, which turned out to be Nutmeg Books’ best selling publication to date.
Problem
Nutmeg Books is not a young business, with over a decade of being in the business. Yet, the website was often overlooked, favouring for their social media presence. Hence, improvements on existing and new features of the websites were never prioritised until now.
Outdated Website and Design
The website hasn't been redesigned in over five years and was built using a generic, uncustomized template.
Low Traffic and SEO Issues
The site has poor metrics for impressions and visits, with no SEO strategy in place to boost search engine visibility.
Redundant Payment Method
As Nutmeg Books now relies on Shopee for sales, PayPal is no longer needed, and the website is primarily a catalog to drive traffic to Shopee.
Goals
Showcase New Branding
The website should reflect Nutmeg Books’ modern identity, balancing its historical focus with a contemporary feel to create a cohesive and recognizable experience.
Boost Shopee Sales
With 98% of sales coming from Shopee, the website will feature clear CTAs directing customers there while still support international buyers (2%) who purchase directly from the site.
Enhance Visibility & Traffic
Implement SEO strategies to improve search rankings, attracting a global audience of history enthusiasts.
Impact
The redesigned website was launched at the end of September 2021. For confidentiality reasons, I have not included the actual values of the metrics shown below:
400%
increase in website visits and impressions.
35%
Less bounce rate within a month.
10%
increase in Shopee store followers.
Research
Before jumping into the solution mode, I wanted to ensure I was producing the right type of design that will match with customer's expectations, will reflect the store's identity and will stand a chance in the market.
What I wanted to understand:
What have other online local bookstores done right?
Who are the target users?
What sort of challenges users faced with the initial website?
What have other online local bookstores done right?
I conducted a simple competitive analysis, comparing website’s features between Nutmeg Books and three other local bookstores that also cater to online customers.
I found that each online bookstore had a number of differences in comparison with Nutmeg Books, or rather the latter lacking thereof. This step helped me understand what should I include and prioritise in my design.
There is a clear standard and Nutmeg Books isn't meeting it.
Nutmeg Books is behind on the basics
Lacking in core features that directly impact the user experience like search functionality, intuitive navigation and detailed product info. Hypothetically, this creates a frustrating experience that makes it hard for users to find what they need combined with its slow site speed.
Consistency Among Competitors Highlights Nutmeg’s Gaps
Looking across the board, features like intuitive navigation, search bars, and calls to action aren’t optional, but they’re standard. Bookstores A, B, and C all deliver on these, which makes Nutmeg’s gaps even more noticeable.
Who are the target users?
I looked into audience metrics via Nutmeg Books’ social media platforms to gain comprehensive insight on potential users of the website. From the analysis of audience metrics, I defined 3 user archetypes:
The Bookseller
Motivations: Constantly seeking new inventory to maintain competitiveness, with a keen interest in rare or specialised titles. They frequently search for bulk orders, discounts, and wholesale opportunities.
Goals: To swiftly locate and acquire books on Malaysian history, rare prints, or out-of-print editions that cater to niche markets.
The History Bufff
Motivations: Enthusiastic about Malaysian history, wars, and cultural shifts. Reads for enjoyment and collects historical works.
Goals: Seeks credible titles, especially first-hand accounts and era-specific studies. Aims to acquire unique books for their collection.
The Researcher
Motivations: Seeks authoritative resources for academic or professional research. Values well-sourced, credible materials including academic papers and primary documents.
Goals: Find accurate, in-depth resources on specific topics like Malaysian history. Acquire multiple sources to develop comprehensive understanding.
What sort of challenges users faced with the initial website?
I also conducted unstructured interviews with 4 users that fit into at least one of the archetypes listed above.
I primarily asked them about their experience in using the website and what they thought was difficult throughout that process. From this, I was able to gather and summarise 3 pain points:
Process
User Flow
From the information gathered throughout the research phase, I was able to generate a user process flow. This was designed to help me understand the sequence of actions needed for users to successfully reach their goal while pertaining to Nutmeg Books’ needs.
Wireframing
To help further define and visualise the website’s structure, I created low-fidelity wireframes for the primary pages on Figma.
Visual Design
A visual design system was created to ensure that the final design aligns with the visual identity of Nutmeg Books.
Prototype
Based on the wireframes, I was able to generate high fidelity prototypes that reflect the goal of simplicity and modernisation of the website. My focus was to keep things clean, professional and organised.
This design clarifies the features and functionalities of the website and highlights the most crucial elements — the things we want users to see first. For example, the hero section now showcases the new release of books and users will be able to navigate to view the book details with ease.
Usability Testing
I presented the high fidelity prototypes to the 4 target users I interviewed during the research phase. The feedback received were prominently positive although there were only some minor design issues raised pertaining to the landing page as shown below.
Results
New Releases at a glance
Newly published and stocked books are now featured on the home page to draw users attention with a clear CTA.
Categorised book catalogue
A new and improved catalogue of books sold by Nutmeg Books with specific categories.
Book details clearly structured
The book details are arranged in a logical and clear manner, making use of white space to enhance readability and separation between different forms of details.
Takeaways
Learning to break it down
This was the biggest redesign project I took on at the time. While there were many aspects and issues of the website I had to overcome while meeting the agreed goals, I learned that breaking it down and taking things one step at a time can increase efficiency and clarity throughout the process of this project.
Listening to users can help in making informed design decisions
It was the whole point of this project to begin with. Not only to modernise and create a new and pretty website, but to also cater it to the actual current and potential users. Collecting user feedback and listening on the improvements that could be made helped us create better designs. I almost saw it as a collaboration between us and the users — products don’t exist in a vacuum.
Future
Add a search bar
Due to the nature of the development of the website (purely coded with HTML, Sass and JavaScript), the ability to search through hard-coded books made it difficult to implement within the limited time period given. This will greatly improve the efficiency of the current customer journey.
Integrate an e-commerce system within the website
Logically, this step would best improve the customer experience and also improve cognitive load as users would not have to go through a third-party app or through the contact form to purchase a book. However, this system will essentially divert from the original process of delivering products to customers with Shopee’s ready-made shipping process. Hence, we are unsure if Nutmeg Books is ready to advance their processes and take the next step at the time.
