Overview
A UI Redesign for Kinokuniya Singapore’s Website
This project was an assignment for a UI design module that focuses on redesigning an e-commerce website. Aiming to maximize conversion rates, this UI overhaul will address current website shortcomings and create a user experience that seamlessly guides visitors towards purchase.
Redesign Approach:
This project will utilize user-centered design principles to reimagine Kinokuniya Singapore's website for optimal conversion rates. Steps include:
User Research: Understanding user behavior through user testing, competitor analysis, and heatmap data.
Information Architecture: Structuring website content and navigation for intuitive product discovery and purchase.
UI Design: Creating a visually appealing and user-friendly interface that emphasizes product value and simplifies the buying process.
Expected Outcome:
The redesigned website aims to deliver a streamlined and engaging user experience that leads to increased conversions for Kinokuniya Singapore. By removing conversion barriers and optimizing the user journey, the project seeks to improve the overall online buying experience for their customers.
01 | Redesign
Before
Cluttered homepage
The homepage is cluttered with a lot of information, which can be overwhelming for users. There is a lot of text, images, and different colors, all competing for the user's attention.
Confusing & Unclear
New users might mistakenly believe the magnifying glass is for advanced search and miss the main search bar altogether and the information density might overwhelm users and make it difficult to know where to focus their attention.
Visual Hierarchy
There is a lot of white space around the edges of the page, but not much between the different elements on the page. This can make the page look busy and confusing. The CTA buttons are all the same and not noticeable.
After
Simple & Clean
A clean layout with plenty of white space, which makes it easy for users to find the information they're looking for.
Banners are kept above the fold and the product & marketing details are kept below the fold. The navigation are grouped by categories (on the left) and other languages (on the right).
The search bar is given the highest visual hierarchy as that is what the users will be using the most.
Organised & Clear
Search filters are enabled and granular selections are organised neatly in an accordion.
Sorting is intuitive and the product listings are visually appealling, allowing the users to browse books quickly and efficiently.
Informative
All the necessary information are organised neatly and clear to navigate at a glance in order to make your decision more confidently.
Sneak peek!
Enhancing the online experience with the sneak peek feature where you can “browse” the book as if you’re at the physical book store.
Increased accessibility
Localisation improves user experience for all Kinokuniya users. Users will feel at ease with the familiar language and standardised layout.
Smooth checkout
Clear progress indicator reassures users of the completion process and how many steps are left.
If logged in, pre-filled information reduces the amount of data they need to enter manually, saving time and reduce the possibility of errors.
Payment page
Purchase review page
Purchase confirmation page
02 | Discover
Problem
The current online bookstore website may be losing customers due to a user experience that discourages browsing and makes purchase decisions difficult.
Price vs. Value Perception: Customers perceive online book prices as less attractive due to additional delivery fees. Additionally, the website fails to effectively communicate the value proposition of online shopping, neglecting the convenience factor compared to physical bookstores.
Uninspiring Browsing Experience: The cluttered layout discourages users from browsing and exploring the vast selection of books offered. Additionally, the lack of engaging search functionalities and limited user reviews hinders users' ability to find the books they're looking for or make informed purchase decisions.
Lack of Trust Signals: Missing customer reviews and limited product information make it difficult for buyers to make informed decisions. This lack of trust can deter potential customers from purchasing.
By addressing these issues, we can create a more user-friendly and engaging online bookstore experience, leading to increased customer satisfaction and sales growth.
Hypothesis
If the website is better organised & with relevant information, then more people will buy books online.
Research
To gain a deep understanding of users, a multi-pronged research approach was conducted.
A user survey explored their browsing habits, challenges, and decision-making processes. This was categorized into key areas like general behavior, pain points, information seeking habits, and purchase decisions.
In addition, a competitor analysis revealed interesting insights. While Kinokuniya boasts high traffic, bounce rates are concerning, with users only viewing 2.38 pages and spending an average of 1 minute 10 seconds per visit. Conversely, competitors like Book Depository see better user engagement, and Thryft, with a smaller audience, boasts a more engaging UI and longer visit duration.
03 | Define
Leveraging an affinity map to synthesize my user research, including survey data and competitor analysis, alongside an empathy map to understand user needs and frustrations, will reveal key user trends and pain points. These insights will directly inform the user journey and personas I develop. By combining this user-centered foundation with crafting a "How Might We" statement, I can identify essential features to elevate the user experience and guide the design process.
Empathy Mapping
Affinity Mapping
User Journey
Personas
Primary
Secondary
How might we
make users feel comfortable browsing and confident with making the purchase.
Less cluttered layout
Reviews from reputable sites
Prominent display of free delivery
Clear pricing separation
Useful books summary
Product details & sneak peek of book
Quick checkout
Proper site localisation
Personalisation & recommendations