Цель и задачи проекта
Цель
Совместно с командой маркетологов и специалистов «ВкусВилл» развить проект направления доставки рационов «ВкусВилл Готовит»
Задачи
- Переосмыслить дизайн сайта и подготовить единую дизайн-систему для главного сайта направления и его рекламных посадочных страниц.
- Реализовать отображение рационов, товаров и программ в зависимости от города, автоопределение города пользователя по местоположению и выбор города
- Разработать авторизацию и оформление заказа на сайте, и связать проект с общей базой «ВкусВилл»
- Запустить обновленную систему рационов и товаров
- Реализовать скидочную систему промокодов, благодаря которой покупатели смогут получать скидки и дополнительные дни к рационам
- Технически поддерживать основной сайт направления и его дополнительные посадочные страницы
С чем работаем?
На старте мы имели старый сайт направления доставки рационов «ВкусВилл Готовит» с 7 доступными рационами и стандартной авторизацией по e-mail, проект работал только по Москве и МО, а оплата производилась через «Робокассу». Проект уже работал, но его необходимо было развивать и команда «ВкусВилл Готовит» была готова к изменениям на сайте.
Концепты и фундамент новой дизайн системы
Первым шагом в работе над дизайн-системой необходимо было переосмыслить внешний вид сайта — гайдлайнов фирменного стиля проекта «ВкусВилл Готовит» у нас не было, имелся лишь логотип проекта, а также старый дизайн сайта.
Первый концепт
Сначала мы пересмотрели дизайн по своему, без каких-либо предпочтений и пожеланий, надо было с чего-то начать — мы решили взять за базис дизайн основного сайта «ВкусВилл», и вот что получилось:
Самый первый концепт дизайна «ВкусВилл Готовит», приближенный к дизайну «ВкусВилл» (концепт целиком по клику на картинке)
Второй концепт
Посовещавшись с маркетологом направления ВВГ решили, что для проекта необходим свой собственный стиль — маркетолог собрал драфт главной страницы, на базе которого мы собрали новый концепт.
Новый концепт с учетом пожеланий от маркетолога «ВкусВилл Готовит» (концепт целиком по клику на картинке)
Стилизация страниц
Полученный концепт с небольшими изменениями подтвердили, следом перестилизовали все оставшиеся страницы — и запустили в верстку.
Страница сбалансированного рациона 850 ккал/день «ВкусВилл Готовит»
Страница заказа рациона с доставкой в магазин «ВкусВилл»
Страница часто задаваемых вопросов
Личный кабинет пользователя со списком заказов
Личный кабинет менеджера со списком заказов
Страница успешного оформления заказа с переходом к оплате
Контентная страница о доставке продуктов «ВкусВилл» вместе с сбалансированными рационами «ВкусВилл Готовит»
Страница 404 с вспомогательным блоком со всеми рационами «ВкусВилл Готовит»
Страница «Устаревший браузер», информирующая о том что нужно обновиться или поставить другой бразуер
Адаптивность и доступность с мобильных устройств
Основная масса пользователей «ВкусВилл Готовит» (больше 70%) заходит с планшетов и смартфонов. Естественно, для планшетов и мобильных также подготовлены дизайн макеты, а после они были успешно сверстаны и интегрированы.
Адаптация главной страницы сайта в планшетный и мобильный вид
Стайлгайд 1.0
Как только собрался базис основных страниц, сразу же собрался стайлгайд с основными элементами дизайн системы — для проекта, который динамично развивается это важно — на базе такого набора элементов удобно собирать страницы и систематизировать элементы + отражать состояния интерактивности всех элементов предполагающих взаимодействие.
Стайлгайд, ч.1
Стайлгайд, ч.2
Обложка репоста в социальных сетях или мессенджерах
Обновления в дизайне
В декабре ближе к Новому году, в ходе непрерывных обсуждений с маркетологами «ВкусВилл Готовит» поняли, что карточки рационов можно сделать поярче, а в дизайн блоков просилась динамика, и нужно добавить преимущества направления доставки рационов перед другими доставками.
В январе выкатили свежий вид карточек рационов, в дизайн добавили градиентов, и показали преимущества, к тому же попутно обновили слайдер, формы заказа и отображение блюд рациона — стало лучше, симпатичнее и удобнее.
Обновленная версия главной страницы (новый вид главной страницы целиком по клику на картинке)
Новая авторизация и оформление заказа. Интеграция с общей базой «ВкусВилл»
Для того чтобы связать аккаунт пользователя на сайте «ВкусВилл Готовит» с картой «ВкусВилл», внедрили новую авторизацию по номеру телефона.
Авторизация по номеру телефона в два шага
Оформление заказа связали с API «ВкусВилл» для того чтобы информацию о заказанных рационах «ВкусВилл Готовит» можно было наблюдать во всех сервисах «ВкусВилл», а не только на сайте «ВкусВилл Готовит».
Выбор города и автоопределение города в зависимости от местоположения
Расширение регионов доставки рационов предполагало постепенный охват в крупных городах, таких как, к примеру, Санкт-Петербург. Развития проекта и расширение зоны доступности рационов требовало разработки автоопределения города и отображения действующих программ и рационов под конкретный город.
Мы добавили автоопределение города и возможность выбрать город самостоятельно в шапке сайта. В выбранном городе рационы стали доступны только те, которые присутствуют в конкретном городе или регионе.
Выбор города с выпадающим списком
Автоопределение города в зависимости от местоположения пользователя
Автоопределение города и выбор города в шапке
Стайлгайд 2.0
Новая версия стайлгайда знатно разрослась — мы перегруппировали элементы в соответствии с назначением, для удобства и контроля версий. Проект посредством рефакторинга плавно перекочевал в Фигму, так стало удобнее работать и дизайнерам и front-end разработчикам.
Кнопки, ссылки, элементы управления, доты, буллиты, уведомления
Карточки рациона
Типографика
Шапка и подвал десктоп, уведомление Cookies
Обложка репоста 2.0
Скидочная система промокодов
Разработанная с нуля скидочная система промокодов позволила добавлять дополнительные дни к рационам или получать фиксированную скидку на рационы.
Страница оформления заказа с активированным промокодом (страница целиком по клику на картинке)
Разработка рекламных посадочных страниц и разделов направлений
Для того чтобы запустить в рекламу рационы и другие направления «ВкусВилл Готовит», требовалось создать посадочные страницы под выбранные маркетологами «ВкусВилл Готовит» направления. Благодаря дизайн-системе лендинги получили новые цвета оформления без потери идентичности дизайна сайта «ВкусВилл Готовит».
Для тестируемых товаров «ВкусВилл Готовит» были подготовлены такие разделы как рецепты и наборы.
Посадочная страница детокс рациона (лендинг целиком по клику на картинке)
Посадочная страница айс рациона (лендинг целиком по клику на картинке)
Посадочная страница баланс рационов (лендинг целиком по клику на картинке)
Посадочная страница спорт рационов (лендинг целиком по клику на картинке)
Раздел товаров «Наборы». Разводящая страница
Раздел товаров «Рецепты». Разводящая страница
Развитие продолжается!
На момент написания кейса (21.07.2020) мы по прежнему технически поддерживаем и продолжаем развивать проект, так что мы не останавливаемся на достигнутом и продолжаем сотрудничать с «ВкусВилл Готовит».
Взглянуть на сайт можно по ссылке ниже
