Перед стартом работы важно опираться на реальные данные и устоявшиеся пользовательские паттерны. Проведено много исследований, где пользователи ожидают увидеть корзину, как должны располагаться кнопки и как проходит процесс чекаута и оформления заказа.
Я не стал нарушать привычные сценарии. Адаптировал проверенные решения под задачи бизнеса, определил сегменты аудитории и прописал c заказчикам jobs stories. Определили ключевые метрики, которые будут доказательством эффективного дизайна.
Перед тем как рисовать в фигме я отобразил в блокноте основные механики работы элементов.
В создание архитектуры проекта поделил пространство на 2 части (высокое/глубокое).
-Высокое пространство задает границы макета и фиксированны к его краем. Оно задает формат.
— Глубокая часть макета – это контент который скллится внутри. Таким образом дизайн смотрится эффективно и целостно с любого устройства, имея четкую архитектуру.
В качестве метафоры взял прилоудер который переходит в hero блок, отсылающий нас к железной дороге. Это отражает динамику самого поезда — постоянное движение вперёд, смену ландшафтов, путешествие.
Бегущая строка на экране динамически меняет свое положение по вертикали или горизонтали в зависимости от позиции курсора пользователя. Таким образом экран вовлекает пользователя во взаимодействие, создавая ощущение, что контент физически реагирует на его действия.
Большое внимание уделял микровзаимодействиям. Добавление товара в корзину и смелое решение выделять ховер карточки красным цветом, который укладывается в айдентику РЖД.
Концепция хорошо показала себя при тестироваии и попала в ключевые сегменты:
Conversion Rate — Целевой показатель 4.28%
Form Error Rate (check out) — 5.12%
Проект получил призовые места на TagLine и на Рейтинге рунета
