Веб-приложение
Parallel Twin
Figma, Angular,
BaaS Firebase
2022
База данных мотоциклов
Задача
Ко мне обратился разработчик с идеей веб-приложения, которое нужно ему самому и может быть полезным мотолюбителям по всему миру.
Он заранее продумал, какой должен быть функционал на каждой странице веб-приложения и приложил набросок того, как он всё это видит.
Моей задачей стало спроектировать и отрисовать макет с учётом уже имеющихся данных и результатов собственных исследований
Изучение аналогов
Я изучила уже существующие базы данных мотоциклов, в ходе аудита вписала плюсы и минусы их функционала и интерфейса, после чего мы с заказчиком утвердили, чем наш проект будет отличаться от имеющихся и в чём его ценность
Поиск по фильтрам
Наглядная инфографика
Персонализация поиска
Коллекции избранного
Стильный интерфейс
UX-исследования
Прежде чем приступить к отрисовке макета я провела изучение потребностей ЦА, чтобы убедиться, что проект не только предоставляет уникальный функционал, но и учитывает все возможные запросы
Глубинное интервью с заказчиком/представителем ЦА (формат опросника)
Портреты персон
Jobs To Be Done
Опросник
Так как заказчик является непосредственным представителем целевой аудитории, я попросила его заполнить детальный опросник и по итогу выявила основные моменты, на которые нужно обратить внимание при создании макета
Уникальность проекта и боль ЦА: отсутствие удобной базы данных мотоциклов
География: США, Европа, СНГ; как следствие возможность выбрать язык и единицы измерения
Главный акцент при онбординге: панель выставления фильтров и случайная подборка моделей
Целевая аудитория: разбирающиеся в мотоциклах люди, интересующиеся новички и бывшие автомобилисты
Что важно для ЦА: быстрый динамический поиск и наглядная инфографика
Страхи ЦА: сложность подбора идеально подходящей модели мотоцикла
Целевое действие: добавление понравившейся модели в избранное с целью последующей покупки на других ресурсах
Сайт на старте позиционируется как бесплатный агрегатор информации, впоследствии возможна монетизация
Критерий успеха проекта: если он будет на слуху среди мотолюбителей
Важные метрики: количество заходов; время, проведённое на сайте
Персоны + JTBDs
На основе заполненного представителем ЦА опросника я прописала персоны, чтобы учитывать потребности разных типов пользователей веб-приложения, и составила несколько jobs to be done, чтобы не упустить ничего важного
Референсы
и вдохновение
Заказчик предложил сделать сайт с основной тёмной темой, оставив вариант создания светлой для будущего, и приложил референс, на основе которого я продумала футуристичный дизайн в тёмно-синих тонах с яркими цветовыми акцентами, а также грамотным сочетанием флэт-дизайна и градиентом
Решение
При проектировании и сборе из компонентов финальной версии страниц я опиралась на созданные заказчиком наброски, результаты UX-исследований и референсы по стилю. Акцент сделан на поисковую систему, главную фишку веб-приложения, результаты выдаются автоматически при выставлении параметров для ускорения процесса поиска. Минимизировано количество поясняющего текста, но продуманы тултипы при наведении. Акцентные кнопки первого порядка подсказывают пользователю возможные действия, чтобы помочь ему привыкнуть к новому ресурсу

Макет передан заказчику и сейчас находится в процессе разработки
Типографика
и палитра
В выборе цветовых акцентов я отталкивалась от сделанного специалистом по брендингу логотипе, акцентные цвета с него использованы в градиенте, более приглушённые их версии для лучшей читаемости — в оформлении компонентов.
Шрифты выбраны без засечек и, помимо ассоциации со спортивным стилем, за счёт сжатости позволяют сделать карточки компактнее, не теряя в информативности.

После сборки страниц в первой итерации мы решили отказаться от объёмного оформления компонентов,  проверили новые флэт кнопки на достаточность контраста, и остановились на второй итерации
Релиз проекта
Планируется во второй половине 2022 года
Посмотреть наработки
Отзыв заказчика