Концепция редизайна booking.com
В 2022 г. я имел опыт работы в двух продуктах, оба — мобильные приложения, где не было потребности проектировать UX с нуля. Тут я придумывал UX с нуля.
Задача
Собрать сложный интерфейс с нуля, который продемонстрирует мою крутость. Похуй, что это не реальный проект, сделайте также по уровню сложности дома, потом поговорим. (на самом деле это давн не сложно, но тогда было сложно...)
Решение
Первое, что пришло в голову, взять за основу пользовательский опыт сайта booking.com которым ранее пользовался и концептуально изменить дизайн взаимодействия так, чтобы проверить, что придумаю не имея ограничений.
Что сделал
- Юзабилити-тестирование сайта booking.com на боли, барьеры и точки сопротивления (поиск отеля, сравнения отелей, выбор отеля и номера)
- Вторичное исследование: desk, competitive, trend иных букинг платформ
- wireframes и wireflow mvp
- Юзабилити тест интерфейса через кликабельный прототип wireflow
- Создал атомарную систему
Кратко: я наивно думал, что делаю UI для планшетного приложения, не понимая ничего в особенностях разработки, ограничениях и правилах. Гайдлайны только читал, но опыта применения на практике не имел (iPadOS гайдлайн пригодилися только в выборе типографической системы, размерах всех кнопок и именовании компонентов, но по факту я сделал не нативный «франкинштейн» с иконками из библиотеки Material Symbols. Как говорится, ежик плакал но кушал кактус. Это показывает каким глупым, невежественным и далеким от разработчиков я был. Студенту простительно, я только учился и нарабатывал опыт на своих граблях, кроме того меня никто не учил, я не мог просто пойти к ментор и все узнать за неимением средств на образование в тот период.
Атомы
Иерархия и типографическая система соответствует Human Interface Guidelines, однако и тут бардак, ставил интерлиньяж кратный 4dp для работы в grid system после мастер-класса Дениса Ланина про интерлиньяж, не понимая что делаю.
Про цвета показать нечего: нейтральная палитра серого, парочка бренд-цветов booking.com выполняющих роль акцентных для минимального сходства, однако целью сделать интерфейс похожим на сайт не ставил или не мог понять, как их использовать если честно. В целом, палитра booking объективно устаревшая и лично мне не понятна. Я их выбрал, чтобы взять оттуда контент, не более того.
Отступы и радиусы стандартные для 4dp grid system, добавлены в переменные.
Молекулы и организмы
Элементы разложены по секциям для удобства, если присутствует организм, сбоку от него или под ним всегда есть молекула с неймингом Elements / Имя.
Применение атомарного дизайна на примерах
Это краткое разъяснение, погрузиться еще глубже вы можете на тех. интервью
