Exchange Rate – Ứng dụng theo dõi tỷ giá

1. Đặt vấn đề

Exchange Rate là ứng dụng giúp theo dõi tỷ giá vàng và ngoại tệ từ các ngân hàng thuận tiện và nhanh chóng nhất từ đội ngũ Ansuz. Exchange Rate đối mặt với áp lực một giao diện mới. Yêu cầu giao diện hiện đại hơn, tập trung vào di chuyển dễ dàng. Với mong muốn cải thiện được Userlfow của Người dùng được đơn giản và dễ dàng hơn. Đội ngũ Rebo chúng tôi đã triển khai phương pháp Design Thinking dể phát triển lại trải nghiệm của người dụng.

Hình 1.1 Màn hình tỷ giá vàng
Hình 1.2 Màn hình tỷ giá ngân hàng

Hình 1.3 Màn hình biểu đồ

Sau khi dành thời gian phân tích ứng dụng Exchange Rate, chúng tôi phát hiện các vấn đề như sau:

Đây là App User Flow của Ứng dụng Exchange Rate

Hình 1.4. Exchange Rate App User Flow

1.1. Menu Drawer vuốt từ phía bên trái

Vấn đề hiện tại gây cản trở sự tự nhiên và dễ dùng cho người dùng là nút điều hướng “Home”

Người dùng muốn chuyển qua các màn hình phải mở Menu Home.

Hoặc thao táo vuốt Drawer từ trái màn hình ra. Quan trọng là ngay từ đầu người dùng không dễ dàng biết được phải tìm trong Drawer (có thêm các option khác cho họ). Điều này khiến người dùng phải “nghĩ” và tốn nhiều sức lực hơn khi dùng app. Và không phải người dùng nào cũng kiên nhẫn vậy.

1.2. Tốn nhiều tác vụ để thực hiện các task đơn giản

Việc tính lãi hiện tại phải chọn vào Icon, và chọn loại ngân hàng. Trong khi có thể tối ưu bằng nhấn trực tiếp vào ngân hàng trên màn hình coi lãi suất tiết kiệm để tính lãi tiết kiệm trên số liệu của ngân hàng đó.

Các tính năng đơn giản như: Chuyển đổi, Tính lãi tiết kiệm, đang được đặt vào thanh điều hướng. Làm tăng tác vụ cho người dùng khi muốn chuyển sang thông tin khác.

2. Đề xuất giải pháp

  • Sử dụng Pop-Up cho các tính năng đơn giản (chuyển đổi, tính lãi suất)
  • Tạo trang Công cụ cho phép chứa nhiều tác vụ nhanh như Quy đổi, Tính lãi tiết kiệm, Tính lãi vay
Hình 2.1. New App User Flow

3. Thực thi

3.1. Wireframe

Bởi xác định nhu cầu là cần được tái User Flow của ứng dụng, vì vậy chúng tôi buộc phải thực hiện Wireframe để đối chứng với khách hàng cũng như đảm bảo được chi phí chỉnh sửa. Chúng tôi hình thành Wireflow như sau:

3.1. New Wireflow
3.2. New Wireframe

Bên cạnh việc định hướng cụ thể cho khách hàng. Chúng tôi còn tạo ra nhiều giá trị hơn trong công tác trực quan hoá Wireflow, cho phép khách hàng hiểu rõ về sản phẩm.

3.2. Mockups

Bước cuối cùng, chúng tôi triển khai bản màu một cách chỉnh chu và hoàn chỉnh, đóng gói cho khách hàng UI Kit tiện lợi và phù hợp cho chỉnh sửa trong tương lai

3.3. Mockups mới của Exchange Rate
3.4. Style Library của dự án.

4. Chúng tôi đúc kết những gì

  • Menu Drawer và Bottom Navigation là 2 thành phần Top Level, cần cân nhắc khi sử dụng cả 2. Chỉ nên sử dụng khi Ứng dụng bạn thật sự phức tạp, nhưng muốn tối giản hoá.
  • Sau khi xác định được Userflow hiện tại, đặt câu hỏi liệu có làm tác vụ ngắn gọn hơn không? Nếu không, thì đề xuất giải pháp.
  • Ở nhiều trường hợp Wireframe không hoàn toàn tối ưu trải nghiệm, hãy xem xét Wireflow để giúp khách hàng hiểu hơn về sản phẩm và đánh giá kỹ năng bạn tốt hơn.

Thông tin về dự án: https://www.behance.net/gallery/128584743/EXCHANGE-RATE-RATE-TRACKING-FROM-VIETNAM-BANKS
Khách hàng: https://ansuzdev.com/p/exchange-rates
Thời gian: Thg 6 - Th7, 2021
Link CH Play: https://play.google.com/store/apps/details?id=net.ansuzdev.exchange_rates&hl=en&gl=US

Về tác giả

Leave a Reply

Your email address will not be published. Required fields are marked *

Bạn có thể tham khảo thêm