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