top of page

UX/UI Case Study: Fahasa - E-commerce Platform

Updated: Feb 22


Project Background


As UX/UI Designers on the design team, we redesigned and created an upgraded version of the Fahasa.com e-commerce platform based on HCM City. My design team building the new design system redesigned the product information structure and tweaked several design versions to:

  • Suitable for updating new product features

  • Dealing with the COVID situation to solve business problems and serve readers throughout Vietnam


fahasa ux ui case study nguyentantoan

About Fahasa.com


After launching the website Fahasa.com in October 2015, the website is a step further into the e-commerce platform with more than 200,000 titles from domestic and international publishers. Fahasa then launched the app for Android users in November 2017 and for iOS users in August 2018.


Fahasa.com succeeds by providing its readers with all the books available on the market with a minimal, search-oriented user interface (UI), suitable for both those who are used to the internet and new users of the Internet.


Salient features:

  • Huge bookstore with more than 200,000 products with many incentives

  • Logical sort order is easy to search.

  • Can rate, comment on products, create a collection of favorite products

  • Personal account management. Track your order from purchase to delivery

  • Fast - simple payment method


Problem Statement


Fahasa has been aware of the importance of digital transformation since 2015 and has started the transformation through e-commerce, apps and social media. This strategy has so far been used effectively to keep Fahasa at the forefront of the bookstore retail industry. However, to maintain its leading position, Fahasa needs to come up with unique and inimitable value solutions to create a sustainable competitive advantage.


In the process of rapid development and expansion, there are some limitations on the user experience; it significantly reduces the speed, quality, and value with which services customers can be provided by Fahasa.


fahasa ux ui case study nguyentantoan

Design Process


We followed the HCD process by first conducting user research. After synthesizing inspiring insights from surveys and interviews, we defined the problem and jumped right into the ideation phase. From sketches all the way to fidelity prototypes, we gradually created the first version of the application. Right now, we are conducting usability testing and will iterate more based on the feedback we receive.


fahasa ux ui case study nguyentantoan
 

1. Goal Setting


Every success is defined by a clear goal statement. During this phase, my team refined and developed an understanding of the direction the company is going with the new version of the product. From a project success perspective, it is extremely important to ensure that all stakeholders are on the same page.


Stakeholder Interview


One of the biggest challenges is that it is often difficult for large groups to reach a consensus; Everyone has their vision of company strategy and goals for new products.


In the worst-case scenario, all team members are sure they think alike until problems arise due to misunderstanding.


We started the research phase by interviewing Fahasa stakeholders. Through it, we found the overall specifics of their business and the motivation to redesign the existing product.

In a stakeholder interview, the team had a clear view of the changes needed and the approach to the current product.


fahasa ux ui case study nguyentantoan
 

Product Audit


After getting a clear picture of Fahasa's philosophy, strategy, and business goals, we review the current design and its flaws.


At first glance, Fahasa's original product was fragmented and information-overloaded. The colors don't match the brand colors and the design confuses users. Instead of making it easy for users to buy the desired product, it just confuses them.


During this time, we asked the question from a user perspective and it seems that some features are not properly laid out.


fahasa ux ui case study nguyentantoan
 

Competitors’ Analysis


During this period, we profiled the competitor companies, their core solutions, and how they positioned themselves in the market. We observed the successes and failures of our competitor and analyzed their strengths and weaknesses in customer experience. This provides a clear view of the industry landscape for the team. This inspired the whole team to give the industry a whole new approach with a completely renewed product.


fahasa ux ui case study nguyentantoan
 

2. Research


At the core of the entire Fahasa regeneration process is user research. Skipping this stage can lead to going completely wrong and potentially even launching a completely useless product.


At first, Fahasa may think that he knows his users well. However, during their research, they discovered that their assumptions about users' needs and wants did not always match reality. It is necessary to meet and try to empathize with real users.


User personal


Fahasa user portrait research is the foundation for a solution that is not only aesthetically pleasing but most importantly practical and highly usable. Here, Fahasa needs to connect with the people who are using the app daily.


The most valuable knowledge and information have been obtained from conducting user interviews. This provides a connection with potential users and helps you get a feel for their pain points and empathize with their current experience.


There are different types of customers, however, based on the collected data, it is enough to create two common user profiles:

  • Customers are proficient in the internet

  • Customers are not familiar with the internet


fahasa ux ui case study nguyentantoan
 

Empathy Map


We put ourselves in the position of the user to experience the application, we discovered a lot of difficulties and negative emotions caused by the current solutions. This allows us to create empathy maps, capturing the user's thoughts and feelings about their task performance. Define the valuable context of understanding your users in the process of accomplishing their goals.


An empathy map allows us to identify more user pain points than we imagined there would be. Fahasa team is happy to see those findings and is ready to use them for improvement.


fahasa ux ui case study nguyentantoan
 

User Journey Map


Now it's time to aggregate all the insights we've gathered about your business, users, and products and bring it all into one timeline. This timeline will show us how users will interact with the product step by step. As a result, we were able to combine hundreds of previously achieved findings and find a product idea that would provide the necessary solutions.


fahasa ux ui case study nguyentantoan
 

3. Ideate


This stage allows us to come up with ideal solutions based on the ideas we have generated about User Journey Mapping.


Information Architecture & User Flow


We have tried to make the new purchasing solution as simple and straightforward as possible, noting that all service information is divided into two main sections:

  • Users are used to using the internet

  • People who are not familiar with the internet


fahasa ux ui case study nguyentantoan
 

Wireframe


The new Fahasa.com homepage requires a huge time investment. While architecting the product catalog, we organize and hierarchize each product category depending on the company's current business goals and personalize the homepage for our users. We understand who our users are, what they need and want, and explore business goals and how the product can help satisfy both the user and the company. After a long journey, we come to the most exciting phase of the project: User Interface Design.


fahasa ux ui case study nguyentantoan
 

4. Design


This is one of the most creative and exciting stages of the entire project.


Design System


A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.


fahasa ux ui case study nguyentantoan

 

Design Concept


fahasa ux ui case study nguyentantoan
fahasa ux ui case study nguyentantoan
fahasa ux ui case study nguyentantoan
fahasa ux ui case study nguyentantoan
fahasa ux ui case study nguyentantoan
fahasa ux ui case study nguyentantoan
fahasa ux ui case study nguyentantoan

Usability testing


To understand whether design solutions solved user problems and improved the overall experience, key performance metrics (KPIs) to measure UX success:


For User

  • Meet user demand

  • Easy to understand

  • Easy to use

For Product

  • Time to complete order

  • Unique and attractive UI

  • User-centric

For Busines

  • Brand Positioning

  • Maximise conversion rate

  • Retain existing users

  • Acquire potential users

Unfortunately, for security reasons, I only publicly limit the data that I can present. But if you have any feedback, I'm willing to listen and talk with you.

bottom of page