Как Избёнка стала ВкусВиллом — редизайн сайта

Привет! На связи MAX — диджитал-продакшн новой школы. Сегодня расскажем, как мы заредизайнили сайт ВкусВилла и помогли им совершить революцию в ритейле.

Как Избёнка стала ВкусВиллом — редизайн сайта

Кто мы?

MAX — диджитал-продакшн новой школы, делаем дизайн и разработку. №1 для фудтеха. Задизайнили первый Самокат, основные приложения ВкусВилла и Пятёрочки. Бегущий человечек в Яндекс.Еде — тоже наших рук дело. У нас много крутых кейсов – их можно посмотреть на сайте.

С чего всё началось?

Наш фаундер гулял по Москве, увидел один из магазинов ВкусВилла и решил, что MAX обязаны сделать для них новый, современный сайт.

Написали ВкусВиллу на почту и предложили сотрудничество (ниже скрин того самого легендарного письма).

Как Избёнка стала ВкусВиллом — редизайн сайта

На тот момент мы были небольшой студией (это сейчас мы топ-10 по дизайну в России и сделали самые популярные приложения доставки), но несмотря на это ребята оценили наш бэкграунд и через два часа дали положительный ответ. С этого и началось наше многолетнее сотрудничество.

Как Избёнка стала ВкусВиллом — редизайн сайта

Цифры

— более 34 000 000 посетителей сайта в год

— открыто 1800+ новых точек

350 000+ ежедневных заказов доставки

— магазины есть в 155 городах РФ

От Избёнки до ВкусВилла

Всё началось с небольшого киоска в Москве. Ассортимент Избёнки состоял только из молочных продуктов. Компания росла, пришло время двигаться дальше и расширять ассортимент, так появился ВкусВилл.

Подробно о своём развитии компания рассказала на сайте. Если интересно, можно посмотреть здесь.

Как Избёнка стала ВкусВиллом — редизайн сайта

Нам очень хотелось показать, как бренд произвел трансформацию из небольших молочных киосков в современнный диджитальный продукт, сохранив экологичность и пользу. Также создать сайт, который станет новой мощной точкой продаж.

Первая версия сайта

Начали с проектирования , создали огромную карту разделов, расписали вообще все, что у нас было. На этом этапе мы мы спроектировали около 105 экранов ( ниже парочка примеров).

Перешли к дизайн-концепции

Определились со стилями, типографикой, цветами. Делали первые неуверенные макеты (наш фаундер по скайпу с дизайнером ломал парадигму, в которой мы тогда рисовали), с каждым днём делали всё ярче, красочней и сочнее.

Как Избёнка стала ВкусВиллом — редизайн сайта

Делали оформление и проводили визуальные пробы на реальных носителях в питерском магазине.

Как Избёнка стала ВкусВиллом — редизайн сайта

Работали по методу RITE (непрерывное итеративное улучшение на основе обратной связи). Делали дизайн, в тот же день показывали респондентам и собирали обратную связь. Работали супербыстрыми пятидневными спринтами.

Как Избёнка стала ВкусВиллом — редизайн сайта

Разработали каталог продуктов и сделали сайт с доставкой. На тот момент ВкусВилл сотрудничал с несколькими компаниями и сделать заказ можно было только на сайте партнеров. Проводили фронтенд-ревью, правили, улучшали.

Сравнивали шрифты, долго выбирали и нашли идеальный. Он был с ВкусВиллом до самого ребрендинга.

Как Избёнка стала ВкусВиллом — редизайн сайта

Ввели раздел «Коллекции» со специальными подборками для удобства пользователей.

Как Избёнка стала ВкусВиллом — редизайн сайта

Сделали программу лояльности «Давайте дружить» визуально понятной.

Как Избёнка стала ВкусВиллом — редизайн сайта

Добавили на главную раздел с рецептами (раньше их можно было найти только в бумажном виде в оффлайн-магазине).

Как Избёнка стала ВкусВиллом — редизайн сайта

Добавили в футер ссылки на интервью, историю компании и QR-код для загрузки приложения (его мы тоже дизайнили, расскажем подробно в следующей статье).

Как Избёнка стала ВкусВиллом — редизайн сайта

Прокачивали сайт, поиск и избранное на основе обратной связи от покупателей.

Как Избёнка стала ВкусВиллом — редизайн сайта

За полтора месяца стейкхолдеры утвердили главную и версия пошла в прод.

Ииии…вот она, первая обновленная версия сайта!

В 2020 году трафик вырос в 7 раз, а заказы доходили до ежедневных 10 000. Новый, удобный и современный сайт стал мощной точкой продаж.

Вторая версия сайта

В 2021 году компания объявила о ребрендинге. У ребят обновился логотип и слоган, появился новый классный шрифт.

А у нас появилась задача сделать новую версию сайта.

Как Избёнка стала ВкусВиллом — редизайн сайта

Внедряли продуктовый подход

Сформировали долгосрочные и краткосрочные цели. Например, одна из долгосрочных целей заключалась в повышении лояльности клиентов через баннерную и рекомендательную систему. Для привлечения новых пользователей делали яркие акценты на баннерах (добавили на них скидки, новинки, кешбэк), а для постоянных пользователей развивали разделы “новости” и “журнал”.

Как Избёнка стала ВкусВиллом — редизайн сайта

С помощью Яндекс.Метрики сформировали топ страниц выхода для лучшего понимания того, на какие сайты нужно сильнее сфокусировать внимание пользователей.

Как Избёнка стала ВкусВиллом — редизайн сайта

Замеряли конверсии на каждом пути пользователя.

Как Избёнка стала ВкусВиллом — редизайн сайта

Анализировали метрики взаимодействия пользователя с сайтом (DAU и DPU). Так же метрику Sticky Factor — она определяет как часто пользователь открывает приложение и насколько лояльно к нему относится.

Как Избёнка стала ВкусВиллом — редизайн сайта

А вот одна из краткосрочных целей заключалась в увеличении среднего чека (гипотеза была в том, что упрощение сбора корзины быстрее доведет пользователя до покупки). Предложили ребятам вынести на главную продукты, которые пользователь покупает чаще всего и добавить в корзину самые популярные категории товаров.

Как Избёнка стала ВкусВиллом — редизайн сайта

Сделали прототип, отследили поведение пользователей по тепловой карте, далее в дизайне расставили приоритеты и акценты на странице.

Как Избёнка стала ВкусВиллом — редизайн сайта

Наводили красоту

Разработали дизайн-систему

Добавили в шапку профиля самые популярные страницы. Создали интерактивный блок, который оповещает о сроках доставки и сумме покупок. Для увеличения лояльности пользователей создали баннеры, на которых расположились акции, новинки и кешбэк. Нарисовали яркие и асимметричные иконки для увеличения узнаваемости бренда.

Как Избёнка стала ВкусВиллом — редизайн сайта
Как Избёнка стала ВкусВиллом — редизайн сайта

Задизайнили сайт с доставкой, она стала новым конкурентным преимуществам компании и основной точкой продаж.

Как Избёнка стала ВкусВиллом — редизайн сайта

Для того, чтобы увеличить прибыль бренда за счёт продажи товара для бизнеса, сделали дизайн B2B странички и добавили на неё все преимущества.

Как Избёнка стала ВкусВиллом — редизайн сайта

Разработка

На этом проекте мы не занимались разработкой, но вот что можем посоветовать для таких проектов)

На российском рынке советуем 1С-bitrix. Стек позволяет создать многокомпонентный интернет-магазин и подключить CRM, аналитику по сайту и трафику для маркетинговых и продуктовых нужд.

На фронте мы рекомендуем использовать React — самая популярная и свободная по ресурсу разработчиков библиотека. Она нам добавит интерактивности сайту.

Стоимость

Мы не любители “ответили в директ”, поэтому просто укажем цены на наших ребят.

Отзыв

В видосике нас хвалят, говорят какие мы душевные, крутые и креативные)

Спасибо за то, что снимаете с меня головную боль

Команда

Арт-директор:

Максим Авдеев

Команда дизайнеров:

Катя Елисеева

Вероника Казакова

Нина Виноградова

Евгений Савин

Настенька Питерцева

Никита Черницын

Андрей Тетерин

Артём Милованов

Редакторы:

Мария Смирнова

Собственно, ссылочка на сайт. На нём три года стоял копирайт)

Сейчас бренд забрал дизайн сайта и приложения в инхаус, но мы были очень рады быть частью такого масштабного продукта))

Как Избёнка стала ВкусВиллом — редизайн сайта

Фууух! На сегодня все)

Вот такой кейс у нас получился)

А еще у нас есть канальчик, где мы расскажем, как дизайнили приложение ВВ. Также у нас там вакансии и рассказы от наших сотрудников, как мы делаем продукты в лайв-режиме)

Подписывайся)

97
75 комментариев

Комментарии просто наводнены аккаунтами, созданными ради одного-единственного комментария во славу публикации. Тьфу.

9
Ответить

Я, кстати, часто начинаю читать статьи с просмотра комментов и если вижу такое, как здесь то даже не трачу время дальше на чтение. Если уж таких примитивных ботов только смог нагнать - значит банальный звиздобол и точно так же звиздит и в кейсе.

8
Ответить

ну пидоры купили пачу акков- пускай

2
Ответить

Фууух самый лонгридистый мой лонгрид)

8
Ответить

Отличное сочетание текста и картинок. Было интересно)

1
Ответить

УРААААА

5
Ответить

Ребята, это оооочень круто!🔥

4
Ответить