Всем привет, меня зовут Максим. Я дизайнер, арт-дир, мама, папа, бухгалтер, HR и психолог в студии MAX.
Мы работаем со ВкусВилл и недавно сделали сайт про доставку. Про этот кейс хочется рассказать, потому что он показывает какой бред может быть в голове у дизайнера, как от него избавиться (от бреда, не дизайнера) и сделать хорошо.
Поехали.
Типовое
Вводные
У ВкусВилла нет курьеров, а склад — это магазины. Ребята сотрудничают с тремя компаниями, которые умеют доставлять продукты из магазинов: Instamart, SaveTime, Golamago. Каждая компания доставляет по разным районам и за разное время, у кого-то есть минимальная сумма заказа, а у кого-то ее нет, но есть платная доставка.
Заказать доставку на сайте ВкусВилла нельзя. Можно либо на сайтах, либо в приложениях доставщиков.
Прототип
- Набрасываем структуру:
- озаглавливаем страницу;
- даем подстрочник;
- объясняем принцип работы;
- далее — рассказываем про зоны покрытия;
- а из нюансов собираем блоки с крупными цифрами (чтобы пользователь выхватил их взглядом и на лету сравнил).
Все кажется логичным, прааавильным.
И тут до нас доходит
Крутить страницу, разглядывать зоны покрытия, запоминать о_0 их и сопоставлять с нужным местом доставки — непросто.
Сравнивать нюансы доставки, не видя разом все три компании — тоже не ОК. Мягко говоря.
Попробуйте:
Новый заход
2. Раньше писали «Доставка продуктов ВкусВилл к вам домой» — теперь «Доставка продуктов ВкусВилл». Можно же еще в офис заказать, например.
3. Раньше вываливали зоны покрытия, чтобы человек в них разобрался — теперь человек просто вводит адрес доставки, жмет на зеленую кнопочку и все.
4. Инфу про доставку сделали таблицей, потому что строчки в таблице удобно сравнивать. Человек видит что почем сразу по всем доставщикам:
Выкидываем из головы мусор
5. Мы хотели поставить фото курьера, это же «продукт лицом!»: вот он, уже стоит в дверях. Но, во-первых, курьер с пакетами (пусть даже в зеленой футболке) — шаблонно. Во-вторых, достаточно непросто подобрать такого курьера, в котором в полной мере отражался бы ВкусВилл. В-третьих, курьер — это не продукт ВкусВилла. Убираем:
6. Чуть позже звучит вопрос: «А зачем мы в 2018 году объясняем как работает доставка?». И правда? Убираем.
Выглядит фигово, конечно. Но правильно.
Правильное
7. Продукт ВкусВилла — это здоровые продукты. Малина с настоящих кустов, молоко из настоящей коровы, яйца из теплых куриц…
Кладем на фон продукцию и делаем из фоточек «слайд-шоу», которое интересно и вкусно разглядывать.
8. А когда рядом логотип, можно и не писать в заголовке «ВкусВилл»:
Горячую линию мы вынесли в якорный объект, потому что это важно. Когда ты можешь быстро написать/позвонить и тебе помогут — это про ВкусВилл.
9. Прорабатываем состояния, фигачим адаптив:
10. Вывод таблички про доставщиков делаем в той же подсказке, что и выбор адреса, чтобы взаимодействие было гладко-плавным:
Релизим. Отлавливаем баги, правим, улучшаем скорость работы сайта.
https://dostavka.vkusvill.ru/
***
Дизайнеры: Олег Александров, Ника Казакова, немного Макс Авдеев.
Арт-дир: Макс Авдеев.
Верстка: Саша Калинин.
Заходите к нам в телеграм-канальчик :) Там еще больше полезного. Все про студию: про основание, про новые проекты, про успехи и ошибки. В прямом эфире. Без воды. Тока суть: @max_kanalchik
