Цель и задачи проекта
Цель
Совместно с командой маркетологов и специалистов «ВкусВилл» развить проект направления доставки рационов «ВкусВилл Готовит»
Задачи
- Переосмыслить дизайн сайта и подготовить единую дизайн-систему для главного сайта направления и его рекламных посадочных страниц.
- Реализовать отображение рационов, товаров и программ в зависимости от города, автоопределение города пользователя по местоположению и выбор города
- Разработать авторизацию и оформление заказа на сайте, и связать проект с общей базой «ВкусВилл»
- Запустить обновленную систему рационов и товаров
- Реализовать скидочную систему промокодов, благодаря которой покупатели смогут получать скидки и дополнительные дни к рационам
- Технически поддерживать основной сайт направления и его дополнительные посадочные страницы
С чем работаем?
На старте мы имели старый сайт направления доставки рационов «ВкусВилл Готовит» с 7 доступными рационами и стандартной авторизацией по e-mail, проект работал только по Москве и МО, а оплата производилась через «Робокассу». Проект уже работал, но его необходимо было развивать и команда «ВкусВилл Готовит» была готова к изменениям на сайте.
Концепты и фундамент новой дизайн системы
Первым шагом в работе над дизайн-системой необходимо было переосмыслить внешний вид сайта — гайдлайнов фирменного стиля проекта «ВкусВилл Готовит» у нас не было, имелся лишь логотип проекта, а также старый дизайн сайта.
Первый концепт
Сначала мы пересмотрели дизайн по своему, без каких-либо предпочтений и пожеланий, надо было с чего-то начать — мы решили взять за базис дизайн основного сайта «ВкусВилл», и вот что получилось:
![Самый первый концепт дизайна «ВкусВилл Готовит», приближенный к дизайну «ВкусВилл» Самый первый концепт дизайна «ВкусВилл Готовит», приближенный к дизайну «ВкусВилл»](https://walnut.team/wp-content/uploads/2020/07/Cover-concept-min_2-1024x608.png)
Самый первый концепт дизайна «ВкусВилл Готовит», приближенный к дизайну «ВкусВилл» (концепт целиком по клику на картинке)
Второй концепт
Посовещавшись с маркетологом направления ВВГ решили, что для проекта необходим свой собственный стиль — маркетолог собрал драфт главной страницы, на базе которого мы собрали новый концепт.
Адаптивность и доступность с мобильных устройств
Основная масса пользователей «ВкусВилл Готовит» (больше 70%) заходит с планшетов и смартфонов. Естественно, для планшетов и мобильных также подготовлены дизайн макеты, а после они были успешно сверстаны и интегрированы.
![Адаптация главной страницы сайта в планшетный и мобильный вид Адаптация главной страницы сайта в планшетный и мобильный вид](https://walnut.team/wp-content/uploads/2020/07/Cover-adaptive-min-1024x908.png)
Адаптация главной страницы сайта в планшетный и мобильный вид
Стайлгайд 1.0
Как только собрался базис основных страниц, сразу же собрался стайлгайд с основными элементами дизайн системы — для проекта, который динамично развивается это важно — на базе такого набора элементов удобно собирать страницы и систематизировать элементы + отражать состояния интерактивности всех элементов предполагающих взаимодействие.
Обновления в дизайне
В декабре ближе к Новому году, в ходе непрерывных обсуждений с маркетологами «ВкусВилл Готовит» поняли, что карточки рационов можно сделать поярче, а в дизайн блоков просилась динамика, и нужно добавить преимущества направления доставки рационов перед другими доставками.
В январе выкатили свежий вид карточек рационов, в дизайн добавили градиентов, и показали преимущества, к тому же попутно обновили слайдер, формы заказа и отображение блюд рациона — стало лучше, симпатичнее и удобнее.
Новая авторизация и оформление заказа. Интеграция с общей базой «ВкусВилл»
Для того чтобы связать аккаунт пользователя на сайте «ВкусВилл Готовит» с картой «ВкусВилл», внедрили новую авторизацию по номеру телефона.
![Авторизация по номеру телефона в два шага Авторизация по номеру телефона в два шага](https://walnut.team/wp-content/uploads/2020/07/Authorization-1-1024x317.png)
Авторизация по номеру телефона в два шага
Оформление заказа связали с API «ВкусВилл» для того чтобы информацию о заказанных рационах «ВкусВилл Готовит» можно было наблюдать во всех сервисах «ВкусВилл», а не только на сайте «ВкусВилл Готовит».
Выбор города и автоопределение города в зависимости от местоположения
Расширение регионов доставки рационов предполагало постепенный охват в крупных городах, таких как, к примеру, Санкт-Петербург. Развития проекта и расширение зоны доступности рационов требовало разработки автоопределения города и отображения действующих программ и рационов под конкретный город.
Мы добавили автоопределение города и возможность выбрать город самостоятельно в шапке сайта. В выбранном городе рационы стали доступны только те, которые присутствуют в конкретном городе или регионе.
![Выбор города с выпадающим списком Выбор города с выпадающим списком](https://walnut.team/wp-content/uploads/2020/07/city-select-1.png)
Выбор города с выпадающим списком
![Автоопределение города в зависимости от местоположения пользователя Автоопределение города в зависимости от местоположения пользователя](https://walnut.team/wp-content/uploads/2020/07/autoselect-1.png)
Автоопределение города в зависимости от местоположения пользователя
![Автоопределение города и выбор города в шапке Автоопределение города и выбор города в шапке](https://walnut.team/wp-content/uploads/2020/07/iPhone-XS-Longscroll-Mockup-1024x616.png)
Автоопределение города и выбор города в шапке
Стайлгайд 2.0
Новая версия стайлгайда знатно разрослась — мы перегруппировали элементы в соответствии с назначением, для удобства и контроля версий. Проект посредством рефакторинга плавно перекочевал в Фигму, так стало удобнее работать и дизайнерам и front-end разработчикам.
Разработка рекламных посадочных страниц и разделов направлений
Для того чтобы запустить в рекламу рационы и другие направления «ВкусВилл Готовит», требовалось создать посадочные страницы под выбранные маркетологами «ВкусВилл Готовит» направления. Благодаря дизайн-системе лендинги получили новые цвета оформления без потери идентичности дизайна сайта «ВкусВилл Готовит».
Для тестируемых товаров «ВкусВилл Готовит» были подготовлены такие разделы как рецепты и наборы.
![Раздел товаров «Наборы». Разводящая страница Раздел товаров «Наборы». Разводящая страница](https://walnut.team/wp-content/uploads/2020/07/Combo-1024x717.png)
Раздел товаров «Наборы». Разводящая страница
![Раздел товаров «Рецепты». Разводящая страница Раздел товаров «Рецепты». Разводящая страница](https://walnut.team/wp-content/uploads/2020/07/Recipes-1-1024x717.png)
Раздел товаров «Рецепты». Разводящая страница
Развитие продолжается!
На момент написания кейса (21.07.2020) мы по прежнему технически поддерживаем и продолжаем развивать проект, так что мы не останавливаемся на достигнутом и продолжаем сотрудничать с «ВкусВилл Готовит».
Взглянуть на сайт можно по ссылке ниже