Thiết kế UI/UX cho sản phẩm Web3

Thiết kế UI/UX sản phẩm Web3 giải quyết vấn đề gì?

Thiết kế UI/UX sản phẩm Web3 làm cho hành động tiếp theo trở nên dễ hiểu: người dùng đang làm gì, yêu cầu wallet có nghĩa là gì và điều gì sẽ xảy ra sau một giao dịch. Công việc này có giá trị nhất khi sản phẩm có các bước phức tạp, đối tượng hỗn hợp gồm người dùng bản địa crypto và người mới, hoặc có khoảng cách giữa logic sản phẩm và những gì giao diện hiện đang giải thích.

Chúng tôi bắt đầu bằng cách hiểu sản phẩm, người dùng và các quyết định mà giao diện phải hỗ trợ. Nghiên cứu và đánh giá đối thủ cung cấp thông tin cho luồng người dùng; wireframe sau đó cho phép nhóm đánh giá trình tự và độ rõ ràng trước khi áp dụng chi tiết hình ảnh. Đối với dApp, điều đó có thể có nghĩa là lập bản đồ quy trình onboarding thông qua một hành động cốt lõi. Đối với wallet hoặc sàn giao dịch, điều đó có thể có nghĩa là làm cho điều hướng, xác nhận và trạng thái lỗi dễ diễn giải hơn.

Một phạm vi tập trung có thể giải quyết một hành trình chính, trong khi phạm vi rộng hơn có thể kết nối nhiều hành trình thành một trải nghiệm nhất quán. Bản ghi nhớ Chiến lược ghi lại bối cảnh sản phẩm, luồng ưu tiên và quyết định thiết kế để founder, trưởng nhóm sản phẩm và nhà phát triển có thể làm việc từ cùng một brief. Nếu nhu cầu rộng hơn công việc giao diện, hãy kết nối phạm vi thiết kế với Thiết kế và hình ảnh Web3, Xây dựng thương hiệu sản phẩm hoặc Dịch vụ truyền thông xã hội và nội dung rộng hơn.

Chúng tôi thiết kế luồng wallet và giao dịch như thế nào?

Chúng tôi lập bản đồ hành trình người dùng như một chuỗi các quyết định và phản hồi của hệ thống, sau đó thiết kế các màn hình và trạng thái làm cho mỗi bước trở nên dễ hiểu. Điều đó cung cấp cho nhóm sản phẩm và kỹ thuật một cái nhìn chung về những gì người dùng thấy trước, trong và sau khi tương tác với wallet.

Phạm vi thiết kế có thể bao gồm:

• Onboarding giải thích sản phẩm cho những người có thể mới làm quen với crypto.
• Kết nối wallet, bao gồm giao diện trước và sau khi thử kết nối.
• Chuẩn bị giao dịch, xác nhận và phản hồi, với thông báo gas và lỗi được xem xét trong ngữ cảnh.
• Bước khôi phục hoặc bước tiếp theo được hiển thị khi một hành động không thể diễn ra như mong đợi.

Đối với mỗi hành trình, chúng tôi làm rõ mục tiêu của người dùng, thông tin cần thiết, điểm quyết định và các điểm có khả năng gây nhầm lẫn. Wireframe thiết lập hệ thống phân cấp và trình tự; thiết kế hình ảnh sau đó áp dụng một hệ thống nhất quán cho luồng đã thống nhất. Chúng tôi sử dụng nguyên mẫu có thể nhấp để đánh giá xem một người có thể đi theo đường dẫn dự định và hiểu ngôn ngữ giao diện trước khi triển khai hay không.

Hãy gửi cho chúng tôi bản giới thiệu sản phẩm, màn hình hiện có, câu hỏi người dùng đã biết và bất kỳ trạng thái giao dịch hoặc wallet nào mà nhóm của bạn đã ghi lại. Nếu những tài liệu đó chưa đầy đủ, công việc khám phá và luồng sẽ cho chúng tôi điểm khởi đầu để xác định những gì cần quyết định từ phía sản phẩm hoặc kỹ thuật. Để có bối cảnh triển khai, chúng tôi có thể phối hợp bàn giao thiết kế với Phát triển dApp.

Bạn nhận được gì trong bàn giao Figma?

Bạn nhận được một bộ tài liệu thiết kế có kết nối, giải thích cả hình thức dự định và đường dẫn người dùng đằng sau nó. Phạm vi màn hình chính xác được thống nhất trước khi bắt đầu thiết kế, để nhóm biết những gì đang được đánh giá và những gì sẵn sàng để triển khai.

Một dự án điển hình có thể bao gồm:

• Nghiên cứu và đánh giá đối thủ tập trung vào sản phẩm và đối tượng của nó.
• Luồng người dùng và wireframe cho các hành trình đã chọn.
• Thiết kế giao diện hình ảnh, với UI kit và thư viện thành phần để đảm bảo tính nhất quán.
• Một nguyên mẫu có thể nhấp để đánh giá trải nghiệm như một chuỗi, thay vì các màn hình riêng lẻ.
• Kiểm thử khả năng sử dụng và bàn giao cho nhà phát triển trong Figma.

Bàn giao sẽ giúp nhà phát triển hiểu cách sử dụng thành phần, mối quan hệ màn hình và các trạng thái quan trọng, không chỉ đơn giản là cung cấp các màn hình tĩnh hấp dẫn. Chúng tôi sắp xếp các tài liệu đã thống nhất trong Figma và xem xét các câu hỏi mở với nhóm sản phẩm để ý đồ thiết kế có thể được thực hiện trong quá trình triển khai. Khi nội dung ảnh hưởng đến khả năng hiểu, hãy mang ngôn ngữ sản phẩm hoặc thuật ngữ hiện có vào quá trình đánh giá; chúng tôi có thể phối hợp với Copywriter Web3 khi văn bản giao diện cần một phạm vi riêng.

Trước khi phê duyệt, hãy kiểm tra xem nguyên mẫu có bao gồm đường dẫn người dùng đã thống nhất hay không, các yếu tố lặp lại được thể hiện nhất quán hay không, và các trạng thái giao dịch và lỗi có vị trí rõ ràng trong luồng hay không. Những kiểm tra này làm cho việc đánh giá thiết kế trở nên cụ thể và cung cấp cho kỹ thuật một tài liệu tham khảo thực tế.

Quy trình thiết kế diễn ra từ brief đến bàn giao như thế nào?

Quy trình diễn ra từ việc hiểu sản phẩm đến một luồng đã thống nhất, sau đó qua thiết kế giao diện, đánh giá nguyên mẫu và bàn giao cho nhà phát triển. Thời gian phụ thuộc vào số lượng và độ phức tạp của các hành trình, mức độ sẵn sàng của các quyết định sản phẩm và tốc độ nhóm có thể đánh giá từng giai đoạn.

Chúng tôi bắt đầu bằng cách thu thập brief sản phẩm, đối tượng, giao diện hiện tại hoặc bản giới thiệu sản phẩm và các ràng buộc đã biết. Tiếp theo, chúng tôi xem xét tài liệu và thống nhất về các hành trình ưu tiên, sau đó chia sẻ wireframe để nhận phản hồi trước khi cam kết theo hướng hình ảnh. Điều này giữ cho phản hồi tập trung vào trải nghiệm thay vì trộn lẫn các thay đổi cấu trúc với sự hoàn thiện cuối cùng.

Một Đánh giá Cấp cao kiểm tra các luồng đề xuất, tính nhất quán của giao diện và độ rõ ràng của bàn giao trước khi kết thúc công việc. Nhóm dự án nhận được tài liệu Figma đã thống nhất và một bản ghi rõ ràng về các quyết định và câu hỏi còn tồn đọng. Để giữ cho phản hồi hữu ích, hãy chỉ định một người tổng hợp các nhận xét và có một người ra quyết định về sản phẩm hoặc kỹ thuật sẵn sàng khi hành vi wallet, ngôn ngữ giao dịch hoặc phạm vi cần làm rõ.

Giá dự án từ $500 / dự án; phạm vi cuối cùng được định hình xoay quanh các bàn giao và hành trình đã thống nhất cho sản phẩm của bạn. Để chuẩn bị cho cuộc trò chuyện xác định phạm vi, hãy chia sẻ sản phẩm làm gì, hành trình người dùng nào quan trọng nhất, những gì đã có trong Figma và ai sẽ đánh giá công việc.

Thiết kế giao diện Web3 có thể kiểm soát điều gì—và điều gì thuộc về wallet hoặc chain?

Thiết kế có thể làm cho tương tác wallet, trạng thái giao dịch hoặc thông báo lỗi dễ hiểu hơn; nó không thể xác định hành vi của dịch vụ cơ bản. Công việc của chúng tôi ghi lại phản hồi giao diện xung quanh các sự kiện đó để người dùng không bị thiếu ngữ cảnh.

Một wallet có thể hiển thị yêu cầu trong giao diện riêng của nó và một chain có thể trả về kết quả mà sản phẩm phải phản ánh. Chúng tôi không thể hứa rằng wallet sẽ chấp thuận yêu cầu, rằng giao dịch sẽ thành công hoặc mọi người dùng sẽ hoàn thành luồng; những kết quả đó nằm ngoài tầm kiểm soát của nhóm thiết kế.

Phản hồi thực tế là làm cho việc bàn giao trở nên rõ ràng. Trước khi phê duyệt thiết kế, hãy yêu cầu nhóm xác nhận:

• Trạng thái wallet và giao dịch nào nằm trong phạm vi trải nghiệm sản phẩm.
• Thông báo nào xuất hiện khi người dùng phải đợi, thử lại hoặc thực hiện hành động khác.
• Chi tiết lỗi nào có sẵn cho giao diện và chi tiết nào cần xác nhận từ kỹ thuật.
• Ai chịu trách nhiệm về các thay đổi đối với hành vi giao dịch sau khi bàn giao Figma.

Chúng tôi sử dụng Quy tắc Quyết định khi xử lý tài liệu sản phẩm và giữ cho việc đánh giá tập trung vào thông tin cần thiết cho công việc đã thống nhất. Gửi cho chúng tôi brief sản phẩm, màn hình hiện tại hoặc bản giới thiệu và hành trình bạn muốn cải thiện. Chúng tôi sẽ xem xét tài liệu, xác định các quyết định cần thiết và trả lại một đề xuất thiết kế có phạm vi.

Bảng giá

Giá khởi điểm bằng USD. Gói tùy chỉnh và chiết khấu theo số lượng theo yêu cầu. Thanh toán bằng USDT, USDC, BTC, ETH, SOL, TON hoặc token dự án của bạn.

Cách hoạt động

1. Chia sẻ bối cảnh sản phẩmGửi brief sản phẩm, màn hình hiện tại hoặc bản giới thiệu, đối tượng mục tiêu và hành trình người dùng quan trọng nhất.
2. Thống nhất phạm viChúng tôi xem xét tài liệu với bạn và thống nhất các luồng, trạng thái và bàn giao thuộc dự án.
3. Lập bản đồ trải nghiệmChúng tôi phát triển các luồng và wireframe dựa trên nghiên cứu, sau đó xem xét trình tự với nhóm sản phẩm của bạn.
4. Thiết kế và tạo nguyên mẫuChúng tôi áp dụng hệ thống hình ảnh, xây dựng nguyên mẫu có thể nhấp và kiểm thử trải nghiệm đã thống nhất.
5. Đánh giá và bàn giaoChúng tôi hoàn tất bàn giao Figma và làm rõ các quyết định thiết kế cũng như câu hỏi triển khai còn mở với nhóm của bạn.