Spora GT
КЕЙС: UX/UI разработка интерактивного сайта с сложной анимацией
ОПИСАНИЕ ЗАДАЧИ
Разработать интерактивный геймифицированный сайт для удобного расчета стоимости и онлайн заказа заездов.
ЭТАПЫ РАБОТЫ
Перед началом работ я учитываю все комментарии и требования заказчика, а также работаю с возражениями и пониманием рынка.
1
Оценка и анализ требований
Перед началом работ я обязательно узнаю возможности программистов и стек, на котором работает или будет работать проект.
2
Знакомство с командой и стеком
Оценка рынка и оценка конкурентов. Подробный анализ с презентацией сильных и слабых мест, а также фичей наиболее сильных конкурентов.
3
Анализ рынка, конкурентов и ЦА
Если это готовый проект, то я обязательно провожу исследование аудитории: глубинные интервью и обрабатываю статистическую информацию.
4
Анализ UX (пользовательского опыта)
Перед стартом разработки и дизайна необходимо описать и отобразить основные flow (пути) пользователя в блок-схемах.
5
Составление User Flow (Путь пользователя)
По сути, это создание каркаса сайта, основанного на построенных ранее User Flow. Наброски быстро создаются, их легко править и первично тестировать.
6
Создание Wireframe (Каркас проекта)
Нанесение дизайна и улучшение user interface, проработка мелких деталей, вроде теней или градиентов.
7
UI дизайн и прототипирование
Тестирование может проводиться как на этапе 4, так и на этапе 8 - на готовом дизайне. Зависит от целей и задач проекта.
8
Тестирование интерфейса
После тестирований необходимо снять аналитические данные и обработать их, затем выбрать наиболее успешный дизайн или внести правки и повторить тестирование.
9
Срез аналитики и статистических данных
АНАЛИЗ КОНКУРЕНТОВ
Анализ конкурентов позволяет отследить характерные рынку тренды
и акцентировать внимание пользователя на важных деталях
и акцентировать внимание пользователя на важных деталях
1
Конкуренты добавляют кнопки с основными услугами и предложениями помимо пунктов меню и CTA.
2
Конкуренты используют калькуляторы - конструкторы для определения клиентом точной стоимости без участия менеджеров по продажам.
3
Конкуренты отображают в прокручивающихся блоках (каруселях) весь автопарк с минимальным ценником.
CUSTDEV
Исследование потребностей клиента с помощью проведения специальных «глубинных» интервью.
Исследование потребностей
Потребность в заказе подарка без выбора авто
Потребность в оплате услуг
онлайн
онлайн
Потребность в полной информации о услугах
Потребность в понимании точной стоимости трек-сессии
РОЛИ В ПРОЕКТЕ (АНАЛИЗ ЦА)
Молодые люди с интересом к гонкам, которые делают подарки друг другу или покупают услуги для себя.
Молодые люди, 25-30 лет
Корпоративные клиенты
Корпоративные клиенты - юридические лица, которым интересно провести определенное мероприятие или тимбилдинг.
Изучение целевой аудитории необходимо для того, чтобы сервис отвечал всем потребностям и запросам пользователей. Также следует углубленно изучать пользовательский опыт.
Портреты ЦА
РЕШЕНИЕ
Разработать удобный конструктор тарифов
Сделать конструктор геймифицированным (реф. NFS)
Внедрить оплату и выбор даты онлайн
Добавить блок с подарком на сумму (без выбора авто)
ЦВЕТОВАЯ ГАММА
#0A0A0A
#C4C4C4
#FFFFFF
#BF2920
ШРИФТЫ
Для заголовков
Для подзаголовков
Для текста
СЕТКА
Сетка помогает создать базовую структуру, скелет из «невидимых» линий, на который ложатся элементы дизайна. Это связывает их в общую систему и рационально поддерживает композицию.
Сетка
WIREFRAMES
Каркас необходим для фокусировки заказчика и исполнителя на том, как именно экраны взаимодействуют между собой, а не на том, как они выглядят.
Каркас сайта
ГЕЙМИФИКАЦИЯ
#ff5400
NFS
Так как целевая аудитория - это молодые люди, которые интересуются гонками, то для упрощения процесса понимания стоимости и оплаты был выбран путь оплаты через геймификацию. Игровую модель. Таким образом было принято решение сделать поэтапное оформление похожим на игру в известные гоночные симуляторы вроде NFS или Forza.
Референс: Need For Speed
РАЗБОР ФИЧЕЙ
Позволяет пользователям приобрести сертификат с полным пониманием выбора: автомобиля, услуги, суммы и даты.
Поэтапное оформление и пошаговая оплата
#ff5400
Кнопки, которые ведут пользователей по основным путям для выбора автомобиля и заказа сертификата онлайн.
Кнопки с основными путями
#ff5400
Карусель с выбором автомобилей и ключевой информацией о них, с кнопкой CTA ведущей на основной путь (flow) в конструктор по оформлению заказа онлайн
Карусель с авто
#ff5400
Если пользователь не знает какой автомобиль понравится человеку, которому он готовит подарок, то мы оставляем ему выбор покупки подарочного сертификата на сумму.
Сертификат на сумму
#ff5400
КОНЕЧНЫЙ ПРОДУКТ
Покупка через выбор автомобиля
Главная
Покупка через выбор сертификата
ГЛАВНАЯ СТРАНИЦА
ОСНОВНЫЕ ПУТИ (FLOW)
Пошаговое геймифицированное оформление сертификатов поможет пользователю определить стоимость цены и не испытывать дефицита информации.
Поэтапная покупка
ПУТИ ПОЛЬЗОВАТЕЛЕЙ (ПОЭТАПНОЕ ОФОРМЛЕНИЕ)
Job offer
Предложение работы
При нажатии кнопки "Отправить" вы соглашаетесь с политикой обработки персональных данных.
Готов к решению сложных задач
Рассматриваю разные варианты и формы сотрудничества
+995 595 09 11 98 / +7 977 287 94 57 / tsanavagn@gmail.com
© Вся представленная информация на сайте достоверна.
Цанава Георгий - UX/UI дизайнер.
tsanava.com
© Вся представленная информация на сайте достоверна.
Цанава Георгий - UX/UI дизайнер.
tsanava.com