top of page

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

Đã cập nhật: 22 thg 2


Project Background


Với tư cách là UX/UI Designer trong nhóm, nhóm đã thiết kế lại và nâng cấp phiên bản hiện tại của trang thương mại điện tử Fahasa.com. Nhóm thiết kế đã xây dựng hệ lại bộ Design System mới, cấu trúc lại thông tin sản phẩm và điều chỉnh một số bản thiết kế để:

  • Thích hợp cho việc cập nhật tính năng mới

  • Đối phó với tình hình covid để giải quyết các vấn đề kinh doanh và phục vụ độc giả trên khắp Việt Nam

fahasa ux ui case study nguyentantoan

Về Fahasa.com


Nền tảng thương mại điện tử Fahasa.com được ra mắt vào tháng 10 năm 2015, đây là một bước tiến xa hơn trong việc chuyển đổi số của doanh nghiệp bán lẻ sách với hơn 200.000 đầu sách từ các nhà xuất bản trong nước và quốc tế. Fahasa sau đó đã ra mắt ứng dụng Android vào tháng 11 năm 2017 và iOS vào tháng 8 năm 2018.


Fahasa.com thành công nhờ cung cấp cho độc giả tất cả các đầu sách có trên thị trường với giao diện người dùng (UI) tối giản, tìm kiếm sản phẩm dễ dàng, phù hợp cho cả những người đã quen sử dụng Internet và những người mới sử dụng Internet.


Tính năng nổi bật:

  • Sàn TMĐT với hơn 200.000 sản phẩm cùng nhiều ưu đãi

  • Thứ tự sắp xếp logic dễ tìm kiếm.

  • Có thể đánh giá, bình luận sản phẩm, tạo bộ sưu tập sản phẩm yêu thích

  • Quản lý tài khoản. Theo dõi đơn hàng từ khi mua đến khi giao hàng

  • Phương thức thanh toán nhanh chóng - đơn giản

 

Problem Statement


Fahasa nhận thức được tầm quan trọng của chuyển đổi số từ năm 2015 và bắt đầu chuyển đổi thông qua thương mại điện tử, ứng dụng và mạng xã hội. Chiến lược này cho đến nay vẫn được sử dụng hiệu quả để giúp Fahasa luôn dẫn đầu trong ngành bán lẻ hiệu sách. Tuy nhiên, để giữ vững vị trí dẫn đầu, Fahasa cần đưa ra những giải pháp giá trị độc đáo để tạo lợi thế cạnh tranh bền vững.


Trong quá trình phát triển và mở rộng nhanh chóng, có một số hạn chế về trải nghiệm người dùng; nó làm giảm đáng kể tốc độ, chất lượng và giá trị mà các dịch vụ mà Fahasa có thể cung cấp cho khách hàng.


fahasa ux ui case study nguyentantoan
 

Design Process


Nhóm tiếp cận dự án bằng quy trình HCD (Human-Centered Design) bằng cách tiến hành nghiên cứu người dùng trước tiên. Sau khi tổng hợp những thông tin từ việc khảo sát và phỏng vấn người dùng, chúng tôi đã xác định vấn đề và chuyển ngay sang giai đoạn lên ý tưởng. Từ bản phác thảo cho đến wireframe, chúng tôi dần dần tạo ra phiên bản đầu tiên của ứng dụng. Sau đó, chúng tôi đang tiến hành thử nghiệm khả năng sử dụng; dựa trên phản hồi từ người dùng mà chúng tôi liên tục cải thiện thiết kế, quá trình này lặp lại nhiều lần trong suốt quá trình thiết kế.


fahasa ux ui case study nguyentantoan
 

1. Goal Setting


Mỗi dự án thành công được xác định bằng mục tiêu rõ ràng. Trong giai đoạn này, nhóm của tôi đã trao đổi và hiểu thêm về hướng đi và kì vọng của công ty với lần nâng cấp sản phẩm này. Để dự án thành công, điều quan trọng là phải đảm bảo tất cả các bên liên quan đều có cùng quan điểm.


Stakeholder Interview


Một trong những thách thức lớn nhất là các nhóm lớn thường khó đạt được sự đồng thuận; Mọi người đều có tầm nhìn về chiến lược và mục tiêu của công ty đối với các sản phẩm.


Trong trường hợp xấu nhất, tất cả các thành viên trong nhóm chắc chắn rằng họ nghĩ giống nhau cho đến khi vấn đề phát sinh do hiểu lầm.


Chúng tôi bắt đầu giai đoạn nghiên cứu bằng cách phỏng vấn các bên liên quan của Fahasa. Thông qua đó, chúng tôi đã tìm thấy các chi tiết về hoạt động kinh doanh của họ và động lực để thiết kế lại sản phẩm hiện có.


Trong một cuộc phỏng vấn các bên liên quan, nhóm đã có cái nhìn rõ ràng về những thay đổi cần thiết và cách tiếp cận sản phẩm hiện tại.


fahasa ux ui case study nguyentantoan
 

Product Audit


Sau khi hiểu rõ về tầm nhìn, chiến lược và mục tiêu kinh doanh của Fahasa, chúng tôi xem xét thiết kế hiện tại và những sai sót của nó.


Thoạt nhìn, sản phẩm ban đầu của Fahasa rời rạc và quá tải thông tin. Màu sắc không phù hợp với màu sắc thương hiệu và thiết kế gây nhầm lẫn cho người dùng. Thay vì giúp người dùng dễ dàng mua sản phẩm mong muốn, nó chỉ khiến họ bối rối và dễ nhầm lẫn.


Ở giai đoạn này, chúng tôi đã đặt câu hỏi từ góc độ người dùng và có vẻ như một số tính năng chưa bố trí hợp lý.


fahasa ux ui case study nguyentantoan
 

Competitors’ Analysis


Trong giai đoạn này, chúng tôi đã lập hồ sơ về các công ty đối thủ cạnh tranh, các giải pháp cốt lõi của họ và cách họ định vị mình trên thị trường. Chúng tôi quan sát những thành công và thất bại của đối thủ cạnh tranh và phân tích điểm mạnh và điểm yếu của họ trong trải nghiệm khách hàng. Điều này cung cấp một cái nhìn rõ ràng về bối cảnh ngành cho nhóm. Điều này đã truyền cảm hứng cho cả nhóm mang đến cho ngành công nghiệp một cách tiếp cận hoàn toàn mới với một sản phẩm hoàn toàn mới.


fahasa ux ui case study nguyentantoan
 

2. Research


Cốt lõi của quá nâng cấp Fahasa.com là nghiên cứu người dùng. Bỏ qua giai đoạn này có thể dẫn đến sai lầm và thậm chí có khả năng tung ra một sản phẩm hoàn toàn vô dụng.


Lúc đầu, Fahasa có thể nghĩ rằng họ biết rõ người dùng của mình. Tuy nhiên, trong quá trình nghiên cứu, họ phát hiện ra rằng các giả định của họ về nhu cầu và mong muốn của người dùng không phải lúc nào cũng phù hợp với thực tế. Cần phải gặp gỡ và cố gắng đồng cảm với những người dùng thực.


User personal


Nghiên cứu người dùng là giải pháp không chỉ mang tính thẩm mỹ mà còn thực tiễn và có tính ứng dụng cao. Ở đây, chúng tôi cần kết nối với những người dùng đã và đang sử dụng sản phẩm hàng ngày.


Kiến thức và thông tin có giá trị nhất đã thu được từ các cuộc phỏng vấn người dùng. Điều này cung cấp sự kết nối với người dùng và giúp nhóm cảm nhận được những vấn đề và đồng cảm với trải nghiệm hiện tại của họ.


Có nhiều loại khách hàng khác nhau, tuy nhiên, dựa trên dữ liệu được thu thập, chỉ cần tạo hai hồ sơ người dùng phổ biến là đủ:

  • Khách hàng thông thạo internet (Nhân viên văn phòng, các bạn trẻ)

  • Khách hàng chưa rành về internet (Phụ huynh, người lớn tuổi)


fahasa ux ui case study nguyentantoan
 

Empathy Map


Đặt mình vào vị trí của người dùng khi trải nghiệm ứng dụng, chúng tôi phát hiện ra rất nhiều khó khăn và cảm xúc tiêu cực do các giải pháp hiện tại gây ra. Điều này cho phép nhóm tạo Biểu đồ đồng cảm (Empathy Map), ghi lại suy nghĩ và cảm xúc của người dùng. Xác định bối cảnh để hiểu người dùng trong quá trình hoàn thành mục tiêu của họ.


Empathy Map cho phép nhóm xác định nhiều điểm gây khó khăn của người dùng hơn chúng tôi tưởng tượng. Đội ngũ Fahasa rất vui khi thấy những phát hiện đó và sẵn sàng cải tiến.


fahasa ux ui case study nguyentantoan
 

User Journey Map


Bây giờ là lúc tổng hợp tất cả thông tin chi tiết mà nhóm đã thu thập về doanh nghiệp, người dùng, sản phẩm và đưa tất cả vào một biểu đồ. Biểu đồ này sẽ cho chúng ta thấy từng bước người dùng sẽ tương tác với sản phẩm như thế nào. Kết quả là nhóm có thể kết hợp hàng trăm phát hiện đã đạt được trước đó và tìm ra ý tưởng sản phẩm sẽ cung cấp các giải pháp cần thiết.


fahasa ux ui case study nguyentantoan
 

3. Ideate


Giai đoạn này cho phép chúng tôi đưa ra các giải pháp hợp lý dựa trên những ý tưởng mà chúng tôi đã tạo ra ở những bước trên


Information Architecture & User Flow


Chúng tôi đã cố gắng làm cho giải pháp mua hàng trở nên đơn giản và dễ hiểu nhất có thể, lưu ý rằng cấu trúc thông tin được chia thành hai phần:

  • Người dùng quen sử dụng internet

  • Những người không rành về internet


fahasa ux ui case study nguyentantoan
 

Wireframe


Trang chủ Fahasa.com là phần quan trọng nhất, đòi hỏi đầu tư thời gian rất lớn. Các danh mục sản phẩm, nhóm sắp xếp và phân cấp từng danh mục sản phẩm tùy thuộc vào tính chất sản phẩm và mục tiêu kinh doanh hiện tại của công ty. Ngoài ra, danh mục sản phẩm còn cá nhân hóa cho người dùng. Fahasa hiểu người dùng của mình là ai, họ cần và muốn gì, đồng thời đề suất thêm các dịch vụ, sản phẩm có thể giúp thỏa mãn người dùng và tăng doanh số công ty.


fahasa ux ui case study nguyentantoan
 

4. Design


 Sau một hành trình dài, chúng ta sẽ đến giai đoạn thú vị nhất của dự án: thiết kế giao diện người dùng.


Design System


Design System là một tập hợp các tiêu chuẩn để quản lý thiết kế trên quy mô lớn. Bằng cách giảm sự dư thừa, các thiết kế có thể sử dụng lại, mang tính nhất quán, trực quan trên các trang và kênh khác nhau.


Hệ thống thiết kế là một tập hợp các tiêu chuẩn để quản lý thiết kế trên quy mô lớn bằng cách giảm sự dư thừa trong khi tạo ngôn ngữ dùng chung và tính nhất quán trực quan trên các trang và kênh khác nhau.


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


Để hiểu liệu các giải pháp thiết kế có giải quyết được các vấn đề của người dùng và cải thiện trải nghiệm tổng thể hay không, các chỉ số hiệu suất chính (KPI) để đo lường thành công của việc nâng cấp:


Đối với người dùng

  • Đáp ứng đúng nhu cầu người dùng

  • Dễ hiểu

  • Dễ sử dụng

For Product

  • Tối ưu thời gian hoàn thành đơn hàng

  • Giao diện người dùng độc đáo và hấp dẫn

  • Phát triển sản phẩm lấy người dùng làm trung tâm

For Busines

  • Định vị thương hiệu

  • Tối đa hóa tỷ lệ chuyển đổi

  • Giữ chân người dùng hiện tại

  • Có được người dùng tiềm năng

Thật đáng tiếc, vì lý do bảo mật, tôi chỉ công khai giới hạn dữ liệu mà Tôi có thể trình bày. Nhưng nếu bạn có bất kỳ phản hồi nào, tôi sẵn sàng lắng nghe và trao đổi. ux/ui case study fahasa.com.

Comments


bottom of page