Для одного из самых крупных в РФ оптовых дистрибьюторов и импортеров крупногабаритных, сверх крупногабаритных автошин, колесные дисков компании ООО «Вэйт» мы разработали полномасштабный дизайн-проект.
Дизайнером заказчика была разработана визуальная концепция, и были сделаны детализированные прототипы некоторых основных страниц.
На этапе агрегации требований по данному проекту мы с заказчиком пришли к выводу, что нам не хватает большого количества макетов страниц + у нас уже было понимание того, что данный проект будет масштабироваться и развиваться, а также нужна дизайн-структура.
По mind-map карте проекта мы определили необходимый перечень страниц с учетом всех нюансов каждого из интерфейсов на них.
Также, необходимы были работы по приведению макетов к необходимому техническому состоянию, чтобы они смогли пройти проверку перед передачей на следующий этап разработки – ко frontend-ерам. А они у нас въедливые, по-хорошему дотошные. На этапе этой проверки, даже при учете того, что сами макеты делаются по регламенту и с учетом изначальных технических требований, могут вылезать правки и дополнительные требования, чтобы в дальнейшем страница нормально сверсталась и у будущих пользователей сайта, и чтобы ни на телефоне, ни на компьютере или планшете не возникало никаких проблем с использованием.
Также, дополнительно, на этом этапе делается еще одна проверка на логичность интерфейсов и логичность в передаче данных в backend-часть и интегрированные сервисы.
Изначально самым первым и важным этапом мы разработали полноценный UI-kit, в рамках которого мы определили и типизировали компоненты, из которых в дальнейшем строились остальные интерфейсы и страницы.
По каждой странице сайта были созданы 3 вида макетов – десктоп, планшет, мобильная версия. Каждый из макетов имеет 2 вида отображения – светлая и темная версии.
Вот полный перечень типов страниц, который мы получили на этой итерации дизайна:
- Главная
- Страница раздела каталога
- Страница конкретного товара
- Главная страница личного кабинета
- Профиль компании-покупателя в личном кабинете
- История заказов пользователей, относящихся к компании-покупателю
- Страница регистрации новой компании
- Страница с подробной информацией по каждому заказу
- Отдельная страница с разными профилями грузополучателей (их может быть несколько у одной компании-покупателя)
- Страница оформления заказа
- Отдельная страница для заполнения и редактирования реквизитов компании заказчика (их может быть несколько у одного пользователя)
- Страница с дополнительными контактными лицами (Покупатель у нас b2b, и в компании покупателя может быть несколько ответственных менеджеров, делающих закупки)
- Страница Избранных/отложенных товаров в ЛК
- Страница брендов товаров
- Страница бонусной программы для компании покупателя
- Страница для вывода бонусов в виде заказываемых сертификатов OZON (баллы меняем на сертификаты)
- Страница Корзины
Всего 17 типов страниц, но в 3 разрешениях и 2 цветовых схемах. В итоге, 102 варианта! Что, довольно много, но и сайт у нас будет непростой.
В данный момент, все созданное на этапе дизайне передается на верстку и затем на интеграцию.
По просьбе заказчика мы уже выложили часть основных страниц, которые необходимы для того, чтобы отобразить товары и начать процесс индексации. Посмотреть их можно тут:
Остальные – пока в процессе, сайт обновляется итерационно и после каждого спринта новые страницы и функционал "прирастает". Классический agile-подход.
В следующей части кейса мы расскажем о "фишках" этого проекта подробнее, поэтому следите за обновлениями!