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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Олег Александров

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

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

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

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

Кристина Барильник

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

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

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

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

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

Редакторы:

Влад Савин

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

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

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

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

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

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