Как Избёнка стала ВкусВиллом — редизайн сайта
Привет! На связи 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 — самая популярная и свободная по ресурсу разработчиков библиотека. Она нам добавит интерактивности сайту.
Стоимость
Мы не любители “ответили в директ”, поэтому просто укажем цены на наших ребят.
Отзыв
В видосике нас хвалят, говорят какие мы душевные, крутые и креативные)
Спасибо за то, что снимаете с меня головную боль
Команда
Арт-директор:
Максим Авдеев
Команда дизайнеров:
Катя Елисеева
Вероника Казакова
Нина Виноградова
Евгений Савин
Настенька Питерцева
Никита Черницын
Андрей Тетерин
Артём Милованов
Редакторы:
Мария Смирнова
Собственно, ссылочка на сайт. На нём три года стоял копирайт)
Сейчас бренд забрал дизайн сайта и приложения в инхаус, но мы были очень рады быть частью такого масштабного продукта))
Фууух! На сегодня все)
Вот такой кейс у нас получился)
А еще у нас есть канальчик, где мы расскажем, как дизайнили приложение ВВ. Также у нас там вакансии и рассказы от наших сотрудников, как мы делаем продукты в лайв-режиме)
Подписывайся)
Вкусвилл, конечно, покорил сердца миллионов.
И как Макс сделал эту продажу, просто охренеть. Невероятно. Снимаю шляпу)
Удивлен, что битрикс советуете для такого проекта. Я битрикс люблю, особенно если использовать по назначению, нормально проектировать архитектуру и тд. Но тут кажется можно брать выше, более мощный стек.
Особенно если смотреть в сторону бизнес-процессов, на таком масштабе их в коробку не загонишь, бизнес сам диктует что ему нужно (вы же сами на дизайне подтверждаете что типового мало) — значит нужны гибкие решения.
Уверен, что от битрикса осталась одна админка)
а ты на чем бы писал?)
Бэк на Python
Фронт на React
нормас) а че не на пхп?)
Да ну куда тут пыху) Вообще не для такого уровня задач
Тут бы не от языка отталкивался все же. Можно и на Go с Vue зафигачить)
Но такой масштаб явно не Битра) Видимо как запустились несколько лет назад, так по стеку ничего и не меняли.
Вангую реплатформинг для Вкусвилл 😁