Дизайн интерфейса сетевого интернет-магазина
Фаберлик
29 марта 2017 года
СТАРТ
СРОК
6 месяцев
ОБЪЕМ
152 экрана — проектирование, 50 экранов — дизайн
ФОРМАТ
Кликабельные макеты
Разработали прототипы и дизайн интернет-магазина косметики для компании, которая работает по МЛМ-модели.
ЧТО СДЕЛАЛИ
Сайт пока не запущен.
РЕЗУЛЬТАТ
Зачем это нужно?
Структура сетевого маркетинга такова: сверху стоит главный человек, у него есть замы, у замов — помощники, у помощников — региональные координаторы и так далее. На нижнем уровне находятся тысячи продавцов, которые работают «в поле», то есть продают товары. У «Фаберлик» это косметика.

Все бы ничего, но неожиданно наступил 2017 год. Оказалось, что часть покупателей больше не хочет куда-то ходить и с кем-то встречаться, чтобы приобрести косметику. Бумажные каталоги им разглядывать не слишком интересно, и даже пробники, которые можно понюхать, ситуацию не спасают. Заказывают всё в интернете и запросто обходятся без старого доброго МЛМ.

Выход тут только один — запустить свой интернет-магазин. Точнее, перезапустить. Ранее у «Фаберлик» уже был интернет-магазин, но закрытый — заказывать косметику там могли только «свои» продавцы. Новая площадка предназначалась для широкой аудитории.

Вероятно, у некоторых читателей уже возник вопрос: почему нельзя взять уже существующий интернет-магазин и открыть его для всех? Отвечаем: потому что это был профессиональный интерфейс, а теперь потребовался массовый. Мы попытались заказать товар в старом интернет-магазине, но не смогли. Зато спам с него приходит до сих пор.
С чего начать?
Аудитория интернет-магазина оказалась слишком знакомой по прошлым проектам, чтобы исследовать ее с нуля. К тому же и заказчик мог столько всего рассказать про покупателей косметики «Фаберлик», что тратить деньги и время на изучение людей не имело смысла.

Так что мы объединили нашу экспертизу и воплотили ее в портретах пользователей, которые будут покупать в интернет-магазине. А это и рядовые потребители, и продавцы косметики, те самые «сетевики». Они ведь тоже должны заказывать товар на сайте. У них совершенно другие сценарии использования — нужно быстро найти нужный товар и заказать много. Побродить и повыбирать что-нибудь под настроение — это не про них.
Что делать с портретами? Прогнать их через пока еще не существующий магазин. Надо понять, как люди будут вести себя на сайте, что захотят смотреть, как станут оформлять заказы. Для этого не нужен Sketch — достаточно постоять у доски и нарисовать маршрут пользователя. Вот он.
Маршрут состоит из шагов. Шаги помогают продумать структуру сайта.
Маршруты пользователей могут быть разными. Чем больше вариантов действий мы предусмотрим, тем лучше.
Когда маршрут известен, можно начинать рисовать интерфейсы. А можно и не рисовать. Мы любим собирать прототипы из бумаги — на первом этапе так получается быстрее придумать концепт.

Обычно мы используем стикеры, но для «Фаберлика» решили нарезать их фирменные каталоги. Магазин косметики — это не всегда UX. Часто все решают эмоции, которые заставляют нас вести себя нерационально. Картинки должны быть яркими и привлекательными, чтобы передать дух компании. Мы начали с главной страницы, а потом сели составлять сеты с настроениями, которые неожиданно стали идеей для сценария. Точнее, визуальной историей, которая будет помогать покупателям выбирать наборы косметики под настроение, сезон или стиль одежды. Не просто листать бесконечный каталог, а сразу погружаться в контекст.

Как показать заказчику такой концепт? Сфотографировать и залить в InVision — так, чтобы можно было кликать на кнопки. Этот сервис позволяет загружать изображения на сервер и прикреплять ссылки к отдельным областям (например, к кнопкам, иконкам или стрелкам). С помощью InVision мы показали клиенту многостраничный интерактивный прототип, нарисованный от руки, по которому можно «погулять».
Главное в интернет-магазине — за ручку довести посетителя сайта до покупки. Для этого нужен сценарий — нельзя просто нарисовать картинки для каждого шага. Путь посетителя от выбора товара до заказа мы прописывали вместе с заказчиком, и заняло это очень много времени.

Его мы тоже рисовали от руки.
А заказчика не смущали такие картинки?
Нет, не смущали. Главное — история, а не красивые квадратики. Поэтому неважно, где рисовать страницы сайта: на бумаге, в Axure, Sketch или каком-то другом инструменте.
Дальше — дело техники
Когда клиент утвердил концепт на бумажках, мы наконец-то пошли рисовать прототипы в Sketch. История у нас была, остальное — дело техники. Нарисовать интерфейс интернет-магазина не так сложно, потому что у него много типовых страниц:

  • главная;
  • каталог;
  • карточка товара;
  • корзина;
  • личный кабинет;
  • акции и предложения.

Мы делали прототипы сразу для всех устройств, поэтому получилось 152 страницы. Это и ушедшие в дизайн, и отбракованные — если даже на руках есть внятная история, ее не всегда с первого раза удается передать в картинках. Увы.
Мы делали прототипы сразу для всех устройств, поэтому получилось 152 страницы. Это и ушедшие в дизайн, и отбракованные — если даже на руках есть внятная история, ее не всегда с первого раза удается передать в картинках. Увы.
Дизайн — это не просто
Пока мы делали прототипы, от нас ушел дизайнер, а новый тогда еще не появился. Поэтому пришлось заказывать дизайн у фрилансеров. Из-за этого потратили три лишние недели, чтобы только определиться с концептом. Удаленно работать с дизайнерами сложно — приходится объяснить по скайпу, что именно мы хотим.

Чтобы хоть как-то упростить и ускорить процесс, мы собрали 30 примеров дизайна, которые показали заказчику. Он выбрал понравившиеся, и мы уже примерно представляли, как должен выглядеть финальный результат. У заказчика было и особое пожелание: не делать сайт розовым — таких и без него полно в этой сфере.

Мы разместили заказ на FL.ru, и нам за несколько дней ответило 59 человек. Казалось бы, это успех. Из них мы выбрали троих лучших, заказали у каждого по концепту и стали ждать. Когда дождались, оказалось, что никто не попал даже близко к тому, что мы хотим. Поблагодарили за труд, заплатили деньги и попрощались.

Второй заход мы сделали уже с другими дизайнерами. Но сперва объяснили, как делать не надо: показали неудачные концепты предыдущих исполнителей, рассказали, чего ждем. Как результат, потратили еще время — никто не смог нарисовать нормальный интернет-магазин косметики, хотя все уверяли, что имеют опыт работы в fashion.

Всего мы заказывали концепт дизайна девять раз. Показать заказчику смогли только три — за остальные было неловко. Менеджеры со стороны клиента выбрали сразу два концепта, которые мы в итоге и смиксовали в один. И он получился розовым. Да, такое бывает.

Пока фрилансеры сменяли друг друга в поиске великой идеи, мы успели нанять дизайнера в штат. Передали ему концепт и 150 прототипов страниц, и пошло-поехало.

Всего для сайта нарисовали 50 страниц с готовым дизайном — и для веба, и для смартфонов, и для планшетов.
Результат
Мы затянули сроки, и за это время клиент успел обновить интернет-магазин без нас. Сделал красиво и современно, но покупать в нем могут только консультанты. Наработки магазина «для всех» с нашим дизайном клиент сохранил, но в тот момент не использовал.

Через полгода «Фаберлик» вернулся к нам. Работа продолжается.
Сколько стоит?

От 1 200 000 руб.


Смысл

Не всегда легко и просто довести дело до конца. Но мы доводим.
«Работалось очень комфортно и удобно. Менеджер действительно выступает на стороне заказчика, это очень позитивно. Но не хватает регулярных статус-репортов. При всем при том, что регламент и общие сроки соблюдаются, очень советую вам высылать еще недельную сводку заказчикам или публиковать для заказчика канбан или гант, в котором было бы видно текущее состояние проектных задач и БДДС по проекту. Коммуникация на проекте была подстроена под нас и была максимально комфортной и качественной. Мы получили именно то, что хотели, и результат был отличный. Он однозначно соответствует ожиданиям. Единственное, что сильно выбилось из ожиданий, — общий срок по проекту, но этот вопрос можно урегулировать в проекте при помощи регулярной отчетности, демонстрирующей причины увеличения сроков. Из предложений — немножко не хватило команде хотя бы одной личной встречи, работалось бы более комфортно».

Валерий Капленко
Директор по информационным технологиям
Другие кейсы
Made on
Tilda