О проекте
TripShock — это онлайн-маркетплейс, специализирующийся на продаже туристических услуг и развлечений. TripShock базируется во Флориде и работает более чем в 30 городах, включая Новый Орлеан, Дестин, Миртл-Бич и Ки-Уэст
Проблема
Текущая версия сайта визуально и функционально устарела, что ограничивало конкурентоспособность компании на рынке. Сайт содержал множество отвлекающих элементов и неработающих виджетов, что негативно влияло на пользовательский опыт.
Решение
В ходе обсуждений было принято решение разделить процесс редизайна на две фазы. Первая фаза включала минимальные функциональные изменения, где это было крайне необходимо, и разработку нового пользовательского интерфейса. Вторая же фаза была напрвлена на доработку пользовательского опыта. Такой подход позволил снизить нагрузку на команду разработки и избежать фрустрации пользователей от одновременной смены интерфейса и функционала сайта.
Моя роль
В данном проекте я работала UX/UI-дизайнером и взаимодействовала с продакт-менеджером, разработчиками и коллегой-дизайнером. С продакт-менеджером мы обсуждали бизнес-цели и приоритеты редизайна, с разработчиками определяли технические ограничения и контролировали процесс реализации, а с дизайнером мы делили отрисовку макетов и сверяли результаты в конце каждого спринта.
Дополнительно я проводила аналитическую работу: кабинетные исследования и конкурентный анализ, проектировала структуру страниц, наполняла дизайн-библиотеку компонентами и после запуска участвовала в улучшении функционала.
Дополнительно я проводила аналитическую работу: кабинетные исследования и конкурентный анализ, проектировала структуру страниц, наполняла дизайн-библиотеку компонентами и после запуска участвовала в улучшении функционала.
Подготовка
Перед тем как приступить к проектированию, я провела кабинетное исследование: собрала обратную связь от пользователей и провела конкурентный анализ. Это позволило выявить основные проблемы:
Неочевидная навигация – пользователи не всегда понимали, куда кликать, чтобы найти нужный раздел.
Плохая структура контента – важные блоки терялись среди второстепенной информации.
Несовременный UI – сайт выглядел устаревшим по сравнению с конкурентами.
Проблемы адаптивности – на мобильных устройствах интерфейс сдвигался, элементы накладывались друг на друга.
Неочевидная навигация – пользователи не всегда понимали, куда кликать, чтобы найти нужный раздел.
Плохая структура контента – важные блоки терялись среди второстепенной информации.
Несовременный UI – сайт выглядел устаревшим по сравнению с конкурентами.
Проблемы адаптивности – на мобильных устройствах интерфейс сдвигался, элементы накладывались друг на друга.
Результаты
- Улучшена навигация – пользователи стали быстрее находить нужную информацию.
- Обновленный UI – сайт стал современным
- Адаптивность – страницы корректно отображаются на всех устройствах.
- Ускорена работа команды – благодаря библиотеке компонентов процесс дизайна и разработки стал более структурированным.
Этот проект позволил мне не только улучшить продукт, но и отточить навыки командной работы, организации дизайн-процесса и взаимодействия с разработчиками.
1. Прототипирование
- Пересмотрела структуру страниц, чтобы контент был логично распределён.
- Раскидала информацию по прототипам.
- После утверждения структуры перешла к следующему этапу.
2. Выбор концепции
- В основу дизайн-концепции легли новые гайдлайны компании, оттуда взяла фирменные цвета, шрифт и паттерны. Для структуры страниц и сценариев использовала прототипы и всю информацию, полученную на предыдущих этапах
3. Отрисовка макетов
- Совместно с коллегой создала макеты страниц, следуя единому стилю.
- Параллельно наполняла дизайн-библиотеку компонентами, чтобы ускорить работу и обеспечить единообразие интерфейса.
- Разработала визуальные элементы (кнопки, иконки, типографику, цветовые схемы), которые улучшили восприятие интерфейса.
3.1. Личный челлендж
Одной из ключевых задач над которой я работала в процессе прототипирования и отрисовки макетов была доработка функционала на таких страницах как Destinations, Blogs, Stories и Partners. Ранее на этих страницах отображались только информационные карточки, отсортированные по дате добавления, что практически исключало возможность поиска конкретного блога или направления. Я отфильтровали весь контент по направлениям и реализовали список, позволяющий пользователям самостоятельно выбирать и просматривать нужную информацию, что значительно повысило удобство использования сайта.
4. Сборка UI-кита
Стили в фигме задали в самом начале проекта, чтобы потом было легче. По ходу отрисовки, создавали компоненты, варианты и использовали их дальше. Также завернули часто используемые блоки в компоненты, чтобы потом при необходимости можно было быстро поправить на всех страницах.
5. Разработка
В процессе переноса дизайна в код я следила за реализацией макетов, взаимодействовала с разработчиками и помогала адаптировать решения под технические ограничения.
Проводила дизайн-ревью, чтобы убедиться, что финальная версия соответствует задуманному.
Проводила дизайн-ревью, чтобы убедиться, что финальная версия соответствует задуманному.
6. Внедрение новых фич
После запуска обновленного дизайна мы сфокусировались на улучшении функционала.
Внедряли новые фичи, тестировали их на пользователях и корректировали на основе полученной обратной связи.
Внедряли новые фичи, тестировали их на пользователях и корректировали на основе полученной обратной связи.
Процесс
