Здравствуйте! MAX у вас под рукой – цифровое производство для новой школы. Сегодня мы расскажем, как мы сделали редизайн сайта «ВкусВиллы» и помогли совершить революцию в сфере розничной торговли.
Кто мы?
MAX — новая школа цифрового производства, мы занимаемся дизайном и разработкой. №1 в пищевых технологиях. Спроектировал первый самокат, в основном используя «ВкусВиллу» и «Пятерочку». Бегущий человек в Яндекс.Еде — тоже наша работа. У нас много крутых кейсов — посмотреть их можно на сайте.
С чего всё началось?
Гуляя по Москве, наши основатели увидели магазин «ВкусВилла» и решили, что компания MAX обязана создать для них новый современный сайт.
Мы написали «ВкусВиллу» на почту и предложили сотрудничество (скриншот легендарного письма ниже).
На тот момент мы были всего лишь небольшой студией (сейчас мы входим в десятку российского дизайна и делаем самые популярные приложения для доставки), но тем не менее ребята оценили наш бэкграунд и через два часа получили положительный ответ. Наше долгосрочное сотрудничество начинается здесь.
Цифры
— Более 34 000 000 посетителей сайта в год
— Добавлено более 1800 новых точек
— Более 350 000 заказов на доставку ежедневно
— Магазины есть в 155 городах РФ
От Избёнки до ВкусВилла
Все началось в небольшом киоске в Москве. В ассортименте «Избёнки» только молочная продукция. Компания продолжала расти, пришло время двигаться дальше и расширять ассортимент продукции, и на свет появился «ВкусВилл.
Компания подробно рассказывает о своем развитии на своем сайте. Если интересно, можете посмотреть здесь.
Нам очень хотелось показать, как бренд может превратиться из небольшого молочного киоска в современное цифровое предложение, оставаясь при этом экологически чистым и экономически эффективным. Также создайте веб-сайт, который станет новой сильной точкой продаж.
Первая версия сайта
Мы начали с дизайна, создали огромный чертеж разреза и наметили все, что у нас было. На этом этапе мы спроектировали около 105 экранов (несколько примеров ниже).
Продолжаем обсуждать дизайнерские идеи
Определитесь со стилем, расположением и цветом. Мы сделали первый неопределённый макет (наш основатель работал с дизайнерами по скайпу, чтобы сломать парадигму того, что мы рисовали на тот момент), и с каждым днём делаем всё ярче, красочнее и насыщеннее.
Мы спроектировали его в магазине в Санкт-Петербурге и визуально протестировали на реальных носителях.
Мы работаем по подходу RITE (постоянное итеративное улучшение на основе обратной связи). Мы создали дизайн, в тот же день представили его собеседникам и собрали отзывы. Мы работаем супербыстрыми пятидневными спринтами.
Мы разработали каталог продукции и создали готовый сайт. В то время «ВкусВилл» работал с несколькими компаниями, и заказы можно было размещать только на сайтах партнеров. Проводить внешние проверки, правки и улучшения.
Мы сравнивали шрифты и долго выбирали и находили идеальный. До ребрендинга работал во «ВкусВилле.
Для удобства пользователей мы ввели раздел «Коллекции» со специальными подборками.
Мы делаем нашу программу лояльности «Давайте дружить» заметной.
На главную страницу мы добавили раздел с рецептами (ранее рецепты можно было найти только в бумажном виде в офлайн-магазинах).
В футер мы добавили ссылку на интервью, историю компании и QR-код для скачивания приложения (его мы тоже разработали, о чем подробно расскажем в следующей статье).
Мы обновили сайт, поиск и избранное на основе отзывов клиентов.
В течение полутора месяцев заинтересованные стороны одобрили основную версию, которая пошла в производство.
Ааа.. это первая обновленная версия этого сайта!
В 2020 году посещаемость выросла в 7 раз, а количество ежедневных заказов достигло 10 000. Новый, удобный и современный сайт стал мощной точкой продаж.
Вторая версия сайта
В 2021 году компания объявила о ребрендинге. Они обновили свой логотип и слоган, а также появился новый крутой шрифт.
Нашей задачей было создание новой версии сайта.
Представляем методы продукта
Ставятся долгосрочные и краткосрочные цели. Например, одна из долгосрочных целей — повышение лояльности клиентов с помощью баннеров и реферальных систем. Для привлечения новых пользователей мы добавили в баннер яркие акценты (повышенные скидки, новые товары, кэшбэк) и разработали разделы «Новости» и «Журнал» для существующих пользователей”.
С помощью Яндекс.Метрики мы сформировали топ страниц выхода, чтобы лучше понимать, на какие сайты нужно обращать больше внимания пользователям.
Мы измеряли конверсии для каждого пути пользователя.
Были проанализированы метрики взаимодействия пользователя с сайтом (DAU и DPU). Еще есть метрика «фактор липкости» — она определяет, как часто пользователь открывает приложение и насколько он к нему лоялен.
Но одна из краткосрочных целей — увеличить среднее количество чеков (гипотеза состоит в том, что оптимизация процесса корзины покупок позволит пользователям совершать покупки быстрее). Они рекомендуют этим людям размещать товары, которые пользователи покупают чаще всего, на главной странице и добавлять самые популярные категории товаров в корзину.
Мы создали прототип, который использовал тепловые карты для отслеживания поведения пользователей, а затем расставлял приоритеты и подчеркивал страницы в дизайне.
украшенный
Разработка дизайн-системы
Мы добавляем в заголовок профиля наши самые популярные страницы. Мы создали интерактивный блок, который уведомляет время доставки и количество покупки. Для повышения лояльности пользователей мы создали баннеры с акциями, новинками и кэшбэками. Мы создали яркие и асимметричные иконки, чтобы повысить узнаваемость бренда.
Мы разработали сайт с доставкой, который стал новым конкурентным преимуществом компании и основной точкой продаж.
Чтобы увеличить прибыль бренда за счет продажи товаров, мы разработали B2B-страницу и добавили в нее все преимущества.
Разработка
Мы не занимались разработкой этого проекта, но вот что мы можем порекомендовать для такого типа проекта)
На российском рынке мы рекомендуем 1С-Битрикс. Стек позволяет создать многокомпонентный интернет-магазин и соединить CRM, аналитику сайта и трафика для удовлетворения маркетинговых и продуктовых потребностей.
На фронтенде мы рекомендуем использовать React — самую популярную и не требующую ресурсов библиотеку для разработчиков. Это повысит интерактивность сайта.
Стоимость
Нам не нравятся «сообщения с прямым ответом», поэтому мы указываем цены только для наших людей.
Отзыв
В видео нас хвалят, говорят какие мы искренние, какие классные, какие мы креативные)
Спасибо, что избавили меня от головной боли
Команда
Художественный руководитель:
Максим Авдеев
команда дизайнеров:
Катя Елисева
Вероника Казакова
Нина Виноградова
Евгений Савин
Настенька Петцева
Никита Черницын
Андре Тетлин
Артем Милованов
редактировать:
Мария Смирнова
Собственно, ссылка на сайт. Имеет трехлетнее авторское право)
Теперь бренд взял на себя разработку веб-сайтов и приложений, но мы очень рады быть частью такого масштабного предложения))
Фууух! На сегодня все)
Это наша ситуация)
Также у нас есть канал, где мы расскажем, как оформлять или ББ приложения. Там же у нас есть вакансии, а также рассказы наших сотрудников о том, как мы делаем свою продукцию в режиме on-site)
подписка)