Третий проект буткемпа Ironhack UX/UI Design

Команда

И на этот раз команда, ну нет команды!
Это сольный проект.

О проекте

Улучшить наши навыки пользовательского интерфейса. Для этого пришлось выбрать относительно известное мобильное приложение. Затем посмотреть, что мы могли бы улучшить.

Поэтому я решил работать над мобильной версией приложения Discord.

Я сделал этот выбор, потому что, как и многие из моих коллег-айронхакеров, я являюсь пользователем этого приложения, и надо сказать, что мобильная версия не очень удобна для пользователя.

Нам пришлось выбирать между 3 и 7 страницами для работы. Итак, я просмотрел приложение и сделал свой выбор, основываясь на собственных разочарованиях, а также на основе элементов на этих страницах, чтобы иметь различные аспекты пользовательского интерфейса для работы (меню, профиль, карточки…)

И особенно это очень-очень длинное меню…

Визуальный анализ конкурентов

Поскольку Discord — это в основном приложение для геймеров, я пошел посмотреть, что предлагают конкуренты, что было похоже и / или отличается.

Цветовые палитры

Вот цветовые палитры, используемые этими тремя конкурентами.

А вот и из мобильного приложения Discord

Эвристический анализ

После этих небольших исследований возвращается очень дикое название эвристического анализа.

Снова следуя десяти самым популярным эвристикам юзабилити для дизайна пользовательского интерфейса, я определил и записал в таблицу эвристические ошибки, которые я обнаружил.

Вторичное исследование

Я также хотел узнать больше о бренде, поэтому пошел задать несколько вопросов своему лучшему другу доктору Гуглу.

И я увидел, что Discord разработал дизайн-систему, которую мне не терпелось изучить.

Вы можете найти его здесь внизу страницы.

Первое, что меня поразило, это то, что цветовая палитра Design System полностью отличается от той, что используется в их мобильном приложении…

Что я хочу сделать

Переподключите приложение к дизайн-системе.
Исправьте все ошибки доступности.
Упростите и реорганизуйте это очень-очень-очень длинное меню…
Добавьте инклюзивности

Восстановите связь с дизайн-системой

Для этого я просто взял цветовую палитру и шрифт, присутствующие в документе.

Ginto Nord для бренда
Whitney для текста

Подписка на Nitro, кажется, находится в центре маркетинга Discord, но в системе дизайна нет никаких следов, поэтому я решил использовать Ginto Nord для идентификации Nitro, но применил его курсивом , чтобы создать эффект движения и скорости. имя предполагает.

Исправьте все ошибки доступности

Здесь я работал в основном над ошибками контраста, следуя рекомендациям Дизайн-системы и регулярно проверяя контраст, размер используемых иконок и текстов.

Упростите и реорганизуйте это очень-очень длинное меню…

Для этого пункта я просто превратил этот длинный список в аккордеонное меню. Я также вернул возможность выхода из системы, которая была в самом конце на 1-й вкладке нового меню.

Я также решил переработать часть страницы профиля с этим макетом для псевдонима, который с моей ментальной моделью хотел щелкнуть по нему, чтобы изменить его (что, очевидно, было не так…)

Добавить инклюзивность

Для этой цели я должен признать, что я не знал, как или что делать, так как эта тема велика.

Поэтому у меня возникла идея добавить другую цветовую тему с официальной «Размытием» Discord в качестве темы по умолчанию, затем розовую тему и две темы с более нейтральными цветами.

И я также изменил иконку ракеты (очень мужскую) на более нейтральную и более подходящую для своей цели.

Наложение действий

Я также переработал раздел игр, чтобы сделать его более читабельным и воздушным, изменив расположение карточек.

Обзор до и после

Вот ссылки на два потока прототипов, если вы хотите протестировать меню аккордеона и значок геймпада с его наложением.

Первая ссылка

Вторая ссылка

Чему я научился в этом проекте?

Я прекрасно провел время в проекте, мне очень понравилось погружаться в пользовательский интерфейс и узнавать больше о Figma.

Я также заметил, что даже если в этом проекте мы были действительно сосредоточены на пользовательском интерфейсе, навыки, которые я получил в UX в двух предыдущих проектах, также были полезны: визуальный анализ конкурентов и вторичные исследования, которые привели меня к дизайн-системе.

Не стесняйтесь оставлять комментарии, если у вас есть какие-либо предложения о том, что я мог бы сделать лучше, или указать на какие-либо ошибки, которые я, возможно, сделал.
Спасибо за прочтение.