Thiết kế lại một ứng dụng

May 07 2023

Dự án thứ ba của chương trình đào tạo Ironhack UX/UI Design Nhóm Và lần này là nhóm, à, không có nhóm nào cả! Đó là một dự án đơn lẻ. Giới thiệu về dự án Cải thiện kỹ năng giao diện người dùng của chúng tôi.

Dự án thứ ba của bootcamp Ironhack UX/UI Design

Đội

Và lần này đội, tốt, không có đội!
Đó là một dự án cá nhân.

Về dự án

Cải thiện kỹ năng giao diện người dùng của chúng tôi. Đối với điều này, chúng tôi phải chọn một ứng dụng di động tương đối nổi tiếng. Sau đó để xem những gì chúng ta có thể cải thiện.

Vì vậy, tôi đã chọn làm việc trên phiên bản di động của Ứng dụng Discord.

Sự thật thú vị: Gamepad logo nhỏ có một cái tên, nó được gọi là Clyde.

Tôi đưa ra lựa chọn này vì giống như nhiều Ironhacker đồng nghiệp của tôi, tôi là người dùng Ứng dụng này và phải nói rằng, phiên bản di động không thực sự thân thiện với người dùng.

Chúng tôi phải chọn từ 3 đến 7 trang để làm việc. Vì vậy, tôi đã xem qua ứng dụng và đưa ra lựa chọn của mình dựa trên sự thất vọng của riêng tôi nhưng cũng dựa trên các yếu tố trong các trang này để có các khía cạnh giao diện người dùng khác nhau để hoạt động (menu, hồ sơ, thẻ…)

Và đặc biệt là thực đơn rất rất rất dài này…

Phân tích đối thủ trực quan

Vì Discord về cơ bản là một ứng dụng dành cho game thủ nên tôi đã xem các đối thủ cạnh tranh đang cung cấp những gì giống và/hoặc khác.

Team Speak phiên bản 5 vẫn đang trong giai đoạn Beta (trực tiếp đồng thời)

Hơi nước (đồng thời trực tiếp)

Slack (đồng thời gián tiếp)

Các bảng màu

Dưới đây là bảng màu được sử dụng bởi ba đối thủ này

Và đây là cái từ ứng dụng di động Discord

Tại sao rất nhiều màu sắc?

phân tích heuristic

Sau những nghiên cứu nhỏ này, đó là sự trở lại của cái tên rất hoang dã là phân tích heuristic.

Một lần nữa theo mười phương pháp phỏng đoán khả năng sử dụng phổ biến nhất cho thiết kế giao diện người dùng và tôi đã xác định và ghi chú trong một bảng các lỗi phỏng đoán mà tôi tìm thấy.

Nghiên cứu thứ cấp

Tôi cũng muốn tìm hiểu thêm về thương hiệu, vì vậy tôi đã hỏi người bạn thân nhất của mình là Tiến sĩ Google một số câu hỏi.

Và tôi có thể thấy rằng Discord đã phát triển một Hệ thống thiết kế mà tôi rất muốn nghiên cứu.

Bạn có thể tìm thấy nó ở đây ở dưới cùng của trang.

Điều đầu tiên gây ấn tượng với tôi là bảng màu của Hệ thống thiết kế hoàn toàn khác với bảng màu được sử dụng trong ứng dụng dành cho thiết bị di động của họ…

Tôi muốn làm gì

Kết nối lại ứng dụng với hệ thống thiết kế
Sửa tất cả các lỗi trợ năng
Đơn giản hóa và sắp xếp lại menu rất rất rất dài này…
Thêm tính toàn diện

Kết nối lại với Hệ thống thiết kế

Đối với điều này, tôi chỉ cần lấy bảng màu và phông chữ có trong tài liệu.

Ginto Nord cho thương hiệu
Whitney cho văn bản

Đăng ký Nitro dường như là trung tâm tiếp thị của Discord nhưng không có dấu vết nào của nó trong hệ thống thiết kế, vì vậy tôi đã chọn sử dụng Ginto Nord để xác định Nitro nhưng áp dụng chữ in nghiêng để tạo hiệu ứng chuyển động và tốc độ. tên gợi ý.

Sửa tất cả các lỗi trợ năng

Ở đây, tôi chủ yếu xử lý các lỗi về độ tương phản bằng cách tuân theo các đề xuất của Hệ thống thiết kế và thường xuyên kiểm tra độ tương phản, kích thước của các biểu tượng và văn bản được sử dụng.

Đơn giản hóa và sắp xếp lại menu rất dài này…

Đối với mục này, tôi chỉ cần thay đổi danh sách dài này thành một menu đàn accordion. Tôi cũng đặt lại tùy chọn đăng xuất ở cuối tab đầu tiên của menu mới.

Tôi cũng đã chọn làm lại một phần của trang hồ sơ với bố cục này cho biệt danh mà với mô hình tinh thần của tôi muốn nhấp vào nó để sửa đổi nó (rõ ràng là không phải như vậy…)

Bạn có nhận ra Marvin không? Personna của chúng tôi từ dự án đầu tiên!

Thêm tính toàn diện

Đối với mục tiêu này, tôi phải thừa nhận rằng tôi đã không biết làm thế nào hoặc phải làm gì khi chủ đề này quá lớn.

Vì vậy, tôi đã có ý tưởng thêm chủ đề màu khác với “Blurple” chính thức của Discord làm chủ đề mặc định, sau đó là chủ đề màu hồng và hai chủ đề có màu trung tính hơn.

Tôi đã kiểm tra độ tương phản cho chủ đề Blurple và Rose nhưng tôi vẫn phải kiểm tra hai chủ đề còn lại.

Và tôi cũng sửa đổi một biểu tượng tên lửa (rất nam tính) thành một biểu tượng trung tính hơn và phù hợp hơn với mục đích của nó.

Lớp phủ hoạt động

Tôi cũng làm lại phần trò chơi để dễ đọc và thông thoáng hơn bằng cách sửa đổi bố cục của các quân bài.

Tổng quan về Trước & Sau

Tôi dành cho bạn thực đơn rất rất rất dài…

Mọi thứ phù hợp trên một trang và bạn có thể chỉnh sửa biệt hiệu ngay bây giờ!

Không dư thừa thông tin ở đầu trang và thay đổi tên lửa thành biểu tượng gamepad.

Thẻ dễ đọc và thoáng hơn.

Dưới đây là các liên kết đến hai luồng nguyên mẫu nếu bạn muốn kiểm tra menu đàn accordion và biểu tượng gamepad với lớp phủ của nó.

liên kết đầu tiên

liên kết thứ hai

Tôi đã học được gì từ dự án này?

Tôi đã có một khoảng thời gian tuyệt vời với dự án, tôi thực sự thích tìm hiểu sâu về giao diện người dùng và tìm hiểu thêm về Figma.

Tôi cũng nhận thấy rằng ngay cả khi trong dự án này, chúng tôi thực sự tập trung vào UI, thì các kỹ năng tôi đã học được về UX trong hai dự án trước đó cũng rất hữu ích: Phân tích đối thủ cạnh tranh trực quan và nghiên cứu thứ cấp đã đưa tôi đến với Hệ thống thiết kế.

Vui lòng để lại nhận xét nếu bạn có bất kỳ đề xuất nào về những gì tôi có thể làm tốt hơn hoặc chỉ ra bất kỳ lỗi nào tôi có thể mắc phải.
Cảm ơn vì đã đọc.