UX/UI
Редизайн
Интернет-магазин
Система бронирования
Анимация
Прототипирование
Редизайн интернет-магазина, создание системы бронирования
магазин горнолыжного и сноубордического снаряжения. У компании есть физический и онлайн-магазин, прокат и ски-сервис в Санкт-Петербурге.
Пан спортсмен
Моя роль
- Разработала новую структуру сайта
- Разработала новую визуальную концепцию
- Собрала UI kit
- Сделала анимацию части интерфейсов
- Создала новые разделы: онлайн-бронирование снаряжения, виджет онлайн-подбора лыж.
- Подготовила макеты 36-ти страниц под разные разрешения
Задачи редизайна
Магазин работает уже более 20 лет и его сайт визуально устарел и требовал обновления. Но главной задачей было переработать его структуру и юзабилити, чтобы поднять конверсию. А также привлечь внимание к дополнительным услугам магазина: ски-сервису и прокату.
Моя роль
- Разработала новую структуру сайта
- Разработала новую визуальную концепцию
- Собрала UI kit
- Сделала анимацию части интерфейсов
- Создала новые разделы: онлайн-бронирование снаряжения, виджет онлайн-подбора лыж.
- Подготовила макеты 36-ти страниц под разные разрешения
Задачи редизайна
Магазин работает уже более 20 лет и его сайт визуально устарел и требовал обновления. Но главной задачей было переработать его структуру и юзабилити, чтобы поднять конверсию. А также привлечь внимание к дополнительным услугам магазина: ски-сервису и прокату.
Проблемы старого сайта
На сайте было много элементов мешавших пользователю получить информацию или совершить покупку.
- Сложная навигация: трехуровневое меню с повторяющимися пунктами
- Главная страница не дает понимания пользователю, куда он попал
- Сложно найти нужную категорию товаров
Проблемы старого сайта
На сайте было много элементов мешавших пользователю получить информацию или совершить покупку.
- Сложная навигация: трехуровневое меню с повторяющимися пунктами
- Главная страница не дает понимания пользователю, куда он попал
- Сложно найти нужную категорию товаров
Разработка структуры
Вместе с командой проекта мы разработали новую структуру сайта. Выделили основные разделы: интернет-магазин, прокат и ски-сервис. Разбили товары на понятные группы. На основе этого переработали меню и навигацию по сайту.
Разработка структуры
Вместе с командой проекта мы разработали новую структуру сайта. Выделили основные разделы: интернет-магазин, прокат и ски-сервис. Разбили товары на понятные группы. На основе этого переработали меню и навигацию по сайту.
Создала UI-кит для всех разделов и основных элементов сайта.
UI Kit
Создала UI-кит для всех разделов и основных элементов сайта.
UI Kit
Теперь на главной странице пользователь сразу понимает, что он попал в магазин лыж. С главной страницы он может сразу перейти в каталог товаров, найти информацию о текущих акциях, а также информацию о дополнительных сервисах: ремонте и прокате.
Главная страница сайта
Теперь на главной странице пользователь сразу понимает, что он попал в магазин лыж. С главной страницы он может сразу перейти в каталог товаров, найти информацию о текущих акциях, а также информацию о дополнительных сервисах: ремонте и прокате.
Главная страница сайта
Для каталога я разработала разные варианты отображения карточки товара для лыж и других товаров. Лыжи — это основной приоритетный товар магазин, важно чтобы пользователь уже на карточке товара мог рассмотреть его крупно.
Каталог
Для каталога я разработала разные варианты отображения карточки товара для лыж и других товаров. Лыжи — это основной приоритетный товар магазин, важно чтобы пользователь уже на карточке товара мог рассмотреть его крупно.
Каталог
Для проката лыж и сноубордов я создала страницу с возможностью бронирования оборудования онлайн на сайте.
Пользователь может забронировать сразу несколько комплектов, добавить сопутствующее снаряжение: защиту и одежду для катания.
Можно взять комплект в аренду разово или сразу на сезон.
Пользователь может забронировать сразу несколько комплектов, добавить сопутствующее снаряжение: защиту и одежду для катания.
Можно взять комплект в аренду разово или сразу на сезон.
Бронирование прокатного снаряжения
Для проката лыж и сноубордов я создала страницу с возможностью бронирования оборудования онлайн на сайте.
Пользователь может забронировать сразу несколько комплектов, добавить сопутствующее снаряжение: защиту и одежду для катания.
Можно взять комплект в аренду разово или сразу на сезон.
Пользователь может забронировать сразу несколько комплектов, добавить сопутствующее снаряжение: защиту и одежду для катания.
Можно взять комплект в аренду разово или сразу на сезон.
Бронирование прокатного снаряжения
Эта функция помогает пользователю быстрее найти лыжи, которые подходят именно ему.
Для этого пользователь заполняет небольшую пошаговую форму.
Для этого пользователь заполняет небольшую пошаговую форму.
Калькулятор подбора лыж
Эта функция помогает пользователю быстрее найти лыжи, которые подходят именно ему.
Для этого пользователь заполняет небольшую пошаговую форму.
Для этого пользователь заполняет небольшую пошаговую форму.
Калькулятор подбора лыж
После заполнения формы, степень «подходимости» лыжи будет отображаться прямо в карточке товара и каталоге.
Я сделала макеты всех страниц сайта под разные разрешения экранов.
Для владельца сайтов написала гайд по подготовке и использованию фотографий товаров.
Для разработчиков сделала анимацию некоторых блоков, где было важно точно показать как будут вести себя элементы при анимации.
Для владельца сайтов написала гайд по подготовке и использованию фотографий товаров.
Для разработчиков сделала анимацию некоторых блоков, где было важно точно показать как будут вести себя элементы при анимации.
Передача макета
Я сделала макеты всех страниц сайта под разные разрешения экранов.
Для владельца сайтов написала гайд по подготовке и использованию фотографий товаров.
Для разработчиков сделала анимацию некоторых блоков, где было важно точно показать как будут вести себя элементы при анимации.
Для владельца сайтов написала гайд по подготовке и использованию фотографий товаров.
Для разработчиков сделала анимацию некоторых блоков, где было важно точно показать как будут вести себя элементы при анимации.
Передача макета
