Redesign Sach Khai Tam Website
My first time redesigning a website and writing down its process so let's see how it goes then.
timeline
03/2019
role
Personal Side Project
プラットフォーム
Web
category
E-Commerce
コンテキスト
I was provided with a great opportunity to do a redesign practice of an e-commerce website. As a book lover, I chose Sach Khai Tam for this small redesign project.
This is my first step into digital product world, thus I spent three weeks to break things apart, understand how it works, try to improve the user experience and user interface. This practice is purely based on my own research, my personal usage and I'm learning along the way too.
current problems
Business goals
Sach Khai Tam is an official Vietnamese book distributor. It has a small store in district 1 where you can pick up books and stationeries, plus a website allowing customers to purchase online.
The category varies from books to stationeries. With the goal not only to sell books but also to sell the right ones, they aim to feed the bookworms the most delicious food for the soul.
User goals
After interviewing 4 people about their e-commerce shopping experience, I gained some insights:
Users usually have a product in mind when they shop online.
Search Bar is frequently used. The category sorted bar next to it is rarely touched.
Reviews are very important. Also online payments.
Amazon is favored by many.
Information Architecture (IA)
Even though this is a small project, seeing myself and friends frustrated over finding the right books, I decided to visualized the current IA and marked the duplicated and similar sections in darker shades of green.
I was surprised by how many duplicated sections there are and how little content that I am actually using. Digging through the current interface and the structure of it, I came up with some main issues in the following:
Current interface
So, how do we find the sweet spot where user goals and business goals intersect? Probably improve the information architecture then
ideation
Clean-up Information Architecture (IA)
As for the visual IA map above, the layer of the content is confusing, unorganized and in wrong grouping. That makes it hard to browse through the page and reduce the online customers’ engagement. Thus, I decided to rearrange the content flow a little bit.
I did not delete any category, I just merged them together so the customer would find it easier to know where to click (the perk of having experiences in content creation and SEO).
User flow
I mapped out the user flow through out the page to see clearly the 3 main flows of an e-commerce website (category page, product page and check-out page) so I can know how many frame will be needed in the interface redesign process.
Wireframes
There are three main sections in the revised IA which are ‘Category’, ‘Product’, and ‘Checks out’.
Also, I tried to prioritize the most frequently used sections with visual hierarchy.
Final design
To increase the conversion rate and sales, an e-commerce site should have a good flow both in the information architecture and the user interface. In the redesign, I focused on rearranging the contents and making the page feels more “zen” and softer like the spirit of the brand.
learning
As an industrial design major fresh graduate, this is my very first step into digital world. Even though both are product design, just in different forms, I still struggles along the way. Getting used to new tools, 2D visual mindset and so many new digital product design terms are challenging. Anyway, I guess learning by doing will make one grow fast.
End of story
