Giới thiệu tổng quan

Bắt đầu ra mắt vào năm 2014 nhưng với cái tên The coffee house và sự phát triển của thương hiệu là điều mà nhiều Startup đáng mơ ước, đặc biệt trong ngành F&B. "Ngôi nhà cà phê" cho biết sẽ trở thành Starbucks thứ 2 ở Việt Nam, khi nhắc tới The coffee house là nhắc tới một thương hiệu cà phê Việt.

Vai trò của tôi

Do TCH thời gian đó chưa có designer trong team nên cần tìm một bạn freelancer biết về thiết kế ứng dụng để giúp xây dựng lại giao diện cho ứng dụng The Coffee House trên mobile, và thế là TCH tìm đến tôi. Cùng làm việc với tôi lúc đó là một anh Digital Director của TCH, công việc chính của tôi bao gồm:

• Xác định các đối thủ cạnh tranh của TCH
• Xây dựng và xác định lại tập khách hàng (User Personas) của TCH
• Xác định được ngữ cảnh cũng như khó khăn của khách hàng
  
• Tạo ra User Flow
  
• Thiết kế Wireframes
  
• Thiết kế UI
  

Tìm hiểu đối thủ cạnh tranh

Trong phân khúc thị trường tầm trung của chuỗi cafe dễ thấy được sự cạnh tranh khốc liệt đến từ các thương hiệu có tiếng như Highlands, The Coffee Beans, StarBucks, Cộng Cà Phê, Phúc Long, Trung Nguyên Legend... Nhưng dễ thấy StarBucks được định vị ở phân khúc cao cấp khi các cửa hàng đều được đặt ở những vị trí trung tâm đắc địa, điều tương tự với Trung Nguyên Legend.

Vậy trong phân khúc thị trường tầm trung còn lại đối thủ của The Coffee House sẽ bao gồm:

• Highland
• The Coffee Bean
• Cộng Cà Phê
• Phúc Long

Tìm hiểu vấn đề (Understand Goal)

Có 2 vấn đề TCH muốn giải quyết khi tìm đến tôi:

1. TCH muốn thiết kế lại giao diện app (UI) mobile mới hoàn toàn, trở nên chuyên nghiệp, đồng nhất với thiết kế thương hiệu của họ. UI hiện tại của họ đã quá cũ và khó sử dụng đối với khách hàng.
2. Giúp họ tăng số lượng khách hàng trung thành đồng thời giúp tăng trải nghiệm (UX) của khách hàng thông qua hệ thống tích lũy điểm thưởng khi mua hàng bằng app TCH để canh tranh với các chuỗi cửa hàng khác.

Ta có thể phân tích những điểm chưa hợp lý trên màn hình Thông Tin Cá Nhân ở trên như sau:

1. Phần QC code được thiết kế khá là nhỏ và thời điểm ấy các máy scan code của các cửa hàng chưa được trang bị các thiết bị quét tối tân nhất nên khả năng quét code rất là khó khăn khiến cho nhân viên và khách hàng đều gặp khó khăn khi sử dụng và drop-off ở bước này. Đây là một pain-point khá rõ ràng trong thực tế sử dụng được users (cả nhân viên lẫn khách hàng) feedback lại.

2. Phần "Tích điểm để nhận quà từ TCH" hóa ra là một cái button để điều hướng người dùng vào trang quà tặng khi tích đủ điểm của TCH nhưng lại không được thiết kế như một cái button khiến cho khách hàng không tài nào biết được => Điều này vô tình khiến cho khách hàng không có nhu cầu tích lũy điểm thưởng vì không biết nhận được gì.

3. Thông tin người dùng với thiết kế này vô tình bị lộ hết ra bên ngoài khi đưa máy cho nhân viên quán quét mã code.

Trên là những phân tích sơ bộ của tôi khi gặp anh Digital Director để giải thích cho anh ấy hiểu được những bất cập của UI hiện tại khiến cho trải nghiệm (UX) của khách hàng không được tốt dẫn đến việc TCH không đạt được những goals mà họ đã đề ra.

Xác định người dùng (Who)

Sau khi trao đổi chúng tôi xác định được người dùng chính của app TCH bao gồm 2 tập người dùng như sau:

Tập người dùng 1

Giới tính: Nam, nữ

Tuổi: 18 - 23

Nghề nghiệp: Học sinh, sinh viên

Sở thích khi uống cafe: Ngồi tụ tập uống cafe tán gẫu, học bài

Thu nhập: Chủ yếu đến từ bố mẹ hoặc đi làm thêm

Mong muốn: Tìm được chỗ gặp gỡ nói chuyện với bạn bè hoặc có thể ngồi học bài

Tập người dùng 2

Giới tính: Nam, nữ

Tuổi: 25 - 35

Nghề nghiệp: Người đi làm

Sở thích khi uống cafe: Làm việc, họp mặt, gặp gỡ đối tác.

Thu nhập: 10 - 20tr/ tháng

Mong muốn: Có chỗ để gặp gỡ khách hàng, trò chuyện với bạn bè hoặc một môi trường để làm việc bên ngoài văn phòng.

Sau khi đã nắm được 2 tập khách hàng chính của TCH. Tôi dùng công cụ Empathy Map để xác định chi tiết được những người dùng chính (users) sử dụng app TCH như sau:

Empathy map & User Personas

Tìm hiểu nhu cầu của khách hàng

Để hiểu được chính xác nhu cầu cũng như mong muốn của người dùng cũng như xem xét cách họ tương tác với dịch vụ mà TCH cung cấp nên tôi đã tạo ra Customer Journey Map

User Flow & Wireframes

Sau khi đã xác định được hành trình (Customer Journey) và thói quen mua hàng của user (User behaviour), bước kế tiếp tôi cần làm là vẽ user flow minh hoạ mục đích mua hàng của khách hàng: 

• Mục đích thứ 1 (Primary goal): Dùng app đặt nước giao đến nhà/công ty và tích lũy điểm.
  
• Mục đích thứ 2 (Secondary goal): Đổi điểm thưởng trên app TCH.
  

Sau khi đã có được user flow tổng quan của 2 trường hợp. Chúng tôi tiếp tục trao đổi với nhau và vẽ nên wireframes của app trước khi lên UI cuối cùng:

Mockups

UI Design

Dựa vào wireframes và các thông tin thu thập được ở trên. Tôi muốn thiết kế của mình giúp khách hàng có thể đạt được 2 mục tiêu chính mà họ mong muốn đó là có thể đặt nước giao tận nơi và dùng điểm tích luỹ được để đổi lấy quà từ TCH.

• Style thiết kế theo dạng đơn giản, gọn gàng và chuyên nghiệp, tránh màu mè rối mắt gây khó chịu cho users
• Thiết kế chung UI cho cả 2 platform iOS và Android
• Design này sẽ giúp user đặt hàng và đổi điểm khi sử dụng app dễ dàng hơn.

Prototype

Sau khi hoàn thành UI thì bước tiếp theo tôi sẽ lên prototype cho các màn hình UI mà mình đã design. Việc thực hiện các bản Prototype này mục đích là để giúp cho các bạn Dev có cái nhìn tổng quan và dễ hình dung về flow đi trong app như thế nào.

Kết

Sau khi đạt được sự thống nhất với bên TCH thì tôi cũng đã bàn giao file thiết kế và bản prototype cho đội ngũ Dev bên đó để họ tiến hành code. 

Nếu bạn có muốn làm một cốc cafe hay trà sữa của TCH thì hãy tải app tại đây nhé:

https://apps.apple.com/vn/app/the-coffee-house/id1138218678