Thiết kế giao diện người dùng Kin Wallet

Yêu cầu dự án

Quá trình thiết kế của chúng tôi bắt đầu bằng cách xác định các yêu cầu sản phẩm. Trong trường hợp này, sản phẩm của chúng tôi cần giới thiệu cho người dùng Kik về quá trình kiếm và chi tiêu Kin. Điều này có nghĩa là chúng tôi sẽ đưa người dùng đến một trải nghiệm hoàn toàn mới bên trong Kik.

Trong lần lặp lại trước của sản phẩm này (phiên bản dành cho người dùng tham gia sự kiện phân phối mã thông báo), người ta đã quyết định rằng ví sẽ có giao diện thương hiệu Kin.

Điều này có nghĩa là người dùng Kik mới xem sản phẩm này sẽ trải nghiệm cả các tính năng mới và giao diện mới rất khác so với những gì họ đã sử dụng từ Kik cho đến nay.

Vì lý do này, chúng tôi đã sớm nhận ra rằng điều quan trọng là phải giữ phiên bản này gọn gàng nhất có thể.

Lập kế hoạch hành trình người dùng cấu trúc IA

Lên tàu

Người dùng sẽ được giới thiệu vào ví thông qua bot @KikTeam. Điều này cho phép chúng tôi khai thác những gì người dùng Kik quen thuộc - trò chuyện - để giới thiệu trải nghiệm mới này.

Kiến trúc thông tin ví (IA) - kiểm tra các cấu trúc khác nhau

Chúng tôi đã xem xét hai cấu trúc IA có thể trong hai lần lặp lại của dự án này.

  1. Một bộ tính năng mạnh mẽ bao gồm lịch sử giao dịch và một phần lớn các cách để kiếm Kin.
  2. Một bộ nạc chỉ bao gồm các tùy chọn cân bằng và kiếm / chi tiêu.

Lặp lại đầu tiên

Trong lần lặp đầu tiên, chúng tôi đã bắt đầu với trang chính được sử dụng cho ví tiền của người tham gia TDE và thêm điều hướng menu để kiếm tiền và lịch sử giao dịch. Chi tiêu và số dư sẽ vẫn ở trang chính để giảm thiểu phạm vi của dự án và xây dựng dựa trên những gì đã có sẵn cho người dùng. Cấu trúc menu sẽ giúp nhóm các bộ tính năng mạnh mẽ được lên kế hoạch cho phiên bản này thành các khu vực riêng biệt để giúp tìm đường và giảm tải nhận thức.

Đối với hai trang mới (lịch sử kiếm tiền và giao dịch), chúng tôi đã xem xét hai mẫu thiết kế thông thường:

  1. Dòng thời gian cho lịch sử giao dịch: Mẫu này sẽ cho phép chúng tôi trình bày thông tin theo thứ tự thời gian, phù hợp với mục đích của trang này - hiển thị các giao dịch Kin đến và đi theo thời gian. Đây là một phổ biến cho các ứng dụng ngân hàng.
  2. Thẻ nội dung để kiếm tiền: Mẫu này được sử dụng phổ biến trong tiêu thụ nội dung và các sản phẩm thương mại điện tử, phù hợp với không gian mà Kin sẽ hoạt động.

Chúng tôi cũng khám phá bằng cách sử dụng bố trí danh sách và thẻ lớn:

Thiết kế phiên bản này, chúng tôi đã mở rộng bộ giao diện người dùng cho thương hiệu Kin và chúng tôi đã thử nghiệm các kiểu và mẫu UI mới.

Lặp lại thứ hai

Chuyển sang lần lặp thứ hai của dự án này (IPLv2), chúng tôi bắt đầu với một bộ tính năng nhỏ hơn. Chúng tôi đã tìm kiếm một giải pháp thiết kế đơn giản giúp đưa người dùng Kik đến một trải nghiệm mới một cách rõ ràng và sẽ dễ thực hiện.

Phiên bản ví này sẽ đơn giản, chỉ có một trang và bố cục, với tiêu đề và có các tab để phân biệt giữa hai loại thông tin:

  1. Cân bằng Kin và thông tin người dùng.
  2. Các dịch vụ kinh tế hai mặt - cơ hội để kiếm tiền và chi tiêu.

Sử dụng cấu trúc này cho phép chúng tôi tạo ra hai cấp độ phân cấp.

Tiêu đề màu xanh sẽ thu hút sự chú ý của người dùng vào sự cân bằng Kin của họ, với tên và hình ảnh của họ có thể đảm bảo rằng đây là tài khoản của họ.

Vùng tab có thể cuộn với tiêu đề dính, để chuyển trọng tâm từ cân bằng sang nền kinh tế. Chúng tôi giả định rằng một khi người dùng chuyển sự chú ý của họ từ số dư sang các tab này, họ không còn cần thông tin số dư nữa. Tuy nhiên, việc chuyển đổi giữa hai tab phải luôn khả dụng vì chúng tôi cung cấp cho cả hai tab cùng một mức phân cấp.

Thiết kế giao diện người dùng

Nhìn và cảm nhận

Kiểu giao diện người dùng của ví dựa trên hướng dẫn phong cách thương hiệu Kin. Chúng tôi hướng đến việc tạo ra một cái nhìn và cảm giác vừa đáng tin cậy vừa thân thiện bằng cách sử dụng tông màu xanh, biểu tượng đường và hình minh họa đường tối thiểu, tham khảo khoa học và công nghệ.

Từ hướng dẫn phong cách Kin: Anh hùng & minh họa tại chỗ, sử dụng logo, màu sắc và kiểu chữGiao diện người dùng ví

Ảnh động và chuyển tiếp màn hình

Chúng tôi đã sử dụng hai loại hình ảnh động

  1. Các hiệu ứng chuyển tiếp sẽ cung cấp phản hồi về hành động của người dùng và tạo ra kỳ vọng về những gì sắp tới.
  2. Làm cho lỗi và hệ thống ổn định thân thiện, phù hợp với mục tiêu của chúng tôi để tạo ra một cảm giác đáng tin cậy và thân thiện.

Chuyển tiếp

Sau khi người dùng đồng ý với các điều khoản, phải mất vài giây để thiết lập ví. Điều này có nghĩa là chúng tôi phải tạo ra một trạng thái tải nào đó. Chúng tôi quyết định sử dụng cơ hội này để nhấn mạnh những ý tưởng đằng sau Kin - phân cấp và cộng đồng.

Bằng cách sử dụng các yếu tố từ logo (hình cầu làm bằng hình tròn), chúng tôi đã tạo ra một phép ẩn dụ cho các cá nhân di chuyển theo tốc độ và hướng riêng của họ nhưng vẫn đi cùng nhau.

Tương tác vi mô

Chúng tôi đã cố gắng giữ các tương tác vi mô ở mức tối thiểu và chỉ sử dụng chúng làm phản hồi cho các hành động của người dùng.

Trường hợp cạnh

Các trường hợp cạnh và trạng thái lỗi không phải là một trải nghiệm tuyệt vời, tuy nhiên chúng ta cũng cần tính đến chúng trong thiết kế. Chúng tôi đã cố gắng tìm cách để làm cho trạng thái lỗi trông thân thiện hơn.

Cái gì tiếp theo

Nhận phản hồi của người dùng!

Trong khi thực hiện dự án này, chúng tôi đã có rất nhiều câu hỏi về khả năng sử dụng, bố cục phù hợp cho người dùng của chúng tôi và câu trả lời chung cho giao diện mới trong Kik.
Chúng tôi hiện đang trong quá trình thiết lập các hội thảo người dùng, thực hiện kiểm tra khả năng sử dụng và nhận dữ liệu cho phiên bản này một khi nó sẽ ra mắt.