Разработка дизайн-концепции сайта Макфа

Разработка дизайн-концепции сайта Макфа

UI-дизайн
E-commerce
B2C

О клиенте

Макфа — лидер рынка макаронных изделий и муки в России, крупный производитель круп и зерновых хлопьев.

logo-lanta

Задача

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

Работа над проектом

26 декабря. Россияне спешат в Ашаны за продуктами для праздничного оливье, вокруг царит приятная суета и запах мандаринов.

«

Здравствуйте! Меня зовут Василиса! Нам нужно разработать новую дизайн-концепцию для сайта Макфы...

»

— читаем в только что поступившей заявке.

Хорошая новость! Поработать над проектом для лидера отрасли — это всегда серьёзный вызов. Год обещает начаться интересно. Вернёмся отдохнувшие с каникул, полные идей и сил, запланируем интервью с клиентом, проведём пару воркшопов, накидаем идей, презентуем варианты. Методичная работа по спланированному сценарию бесспорно наша сильная сторона. Читаем дальше:

«

Времени у нас до 11 января. В этот день от вас нужна презентация главной страницы в новом дизайне. Учитывая, что всё руководство будет недоступно до конца праздников, вы можете задать свои вопросы сегодня до конца рабочего дня и завтра до обеда. В приложении техническое задание. Жду ответа.

»

Смотрим ТЗ — нужен новый концепт главной страницы сайта, который будет олицетворять пользу продукции. Её, кстати, четыре вида: макароны, крупы, хлопья и мука. В дизайне обязательно должны присутствовать ассоциации со спортом и здоровым образом жизни.

Методичная и спокойная работа отменяется. У нас есть сутки, чтобы уточнить детали и забрифовать клиента. Ещё неплохо бы показать какой-то скетч или описать идею и успеть хоть частично её согласовать.

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

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

Макароны, гречка, перловка, спорт, зож, овсянка, бег, велосипед… Стоп. Велосипед, макароны? А что если нам объединить спортивные образы с продукцией? А ещё лучше сделать эти образы целиком из ассортимента Макфы. Если всё сделать чётко — будет бомба.

Нет времени объяснять, рисуем от руки прототип и показываем клиенту.

«

Годится, только гантели давайте заменим на бадминтон, и я уже должна бежать, очень надеемся на вас! С наступающим!

»

— отвечает Василиса.

Отлично, мы на правильном пути, от азарта появляется огонёк в глазах.

Начинаем думать над способами реализации. Коллажирование не даст реалистичного результата. 3D — долго. Остаётся делать реальные модели и проводить фотосъёмку.

Изучили возможности материалов и получили следующие пары:

  • Макароны → Велосипед
  • Гречка → Роликовые коньки
  • Овсяные хлопья → Бадминтон
  • Мука → Парашют

Нанимаем декораторов, распечатываем примерные лекала, закупаем десятки пакетов ракушек, спагетти, риса, муки, специй. Договариваемся с арендой студийного света. Договариваемся с охранником офисного здания. Планируем сборку моделей и фотосъёмку на 30 декабря.

День съёмки

Стартуем в 14:00. Декораторы, пройдя инструктаж, принимаются за работу.

Мы планировали чередование светлого и тёмного фона на сайте. Значит нужны четыре поверхности. С двумя светлыми всё просто. Одна чисто белая, чтобы ее было легко заменить в фотошопе, а вторая — деревянная столешница рабочего стола.

С тёмными сложнее. Пришлось красить из баллончика кусок картона и покупать упаковку ламината нужного цвета, а потом сдавать обратно со словами «к сожалению, не подошёл».

Пять часов ушло на создание моделей. Еще два — на съёмку.

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

Завершение

Мы вернулись к работе 5-го января. Два дня потратили на постпродакшн фотографий и дорисовку декоративных элементов. Три дня — на отрисовку макета и подготовку презентации для клиента.

11 января всё было готово. Мы справились. Презентация прошла отлично — концепт утвердили с первого раза.

Это было маленькое новогоднее чудо, доказавшее, что команда может многое, когда есть единство и стремление делать свою работу хорошо.

Результат

В итоге у нас  получились уютные интерфейсы, подчеркивающие полезность продукции и её качество. Всего было реализовано около десяти дизайн-макетов для всех страниц сайта и создан единый UI-кит для масштабирования стиля при создании новых разделов и блоков контента.

Проект показал нам, что команда может многое, когда есть единство и стремление делать свою работу хорошо.

Другие кейсы

Аналитика и дизайн сайта клиники АО «Медицина»

Аналитика и дизайн сайта клиники АО «Медицина»

UX-проектирование
UI-дизайн
Редизайн
+ ещё 5

Сайт стоматологической клиники Агами

Битрикс
Веб
Корпоративный сайт

Личный кабинет и аналитика для девелопера элитной недвижимости Sminex

UX-проектирование
UI-дизайн
Личный кабинет
+ ещё 4

Личный кабинет клиента Scania

B2B
UI-дизайн
Личный кабинет
+ ещё 4
UX-исследование для сети медицинских центров

UX-исследование для сети медицинских центров

UX-проектирование
UI-дизайн
B2C
+ ещё 5
Автоматизация корпоративных заказов продуктов

Автоматизация корпоративных заказов продуктов

B2B
UX-проектирование
E-commerce
+ ещё 3
Аналитика и дизайн интернет-магазина оптики

Аналитика и дизайн интернет-магазина оптики

UX-проектирование
UI-дизайн
Интернет-магазин
+ ещё 4
Корпоративный сайт для лизинговой компании
1 награда

Корпоративный сайт для лизинговой компании

UX-проектирование
UI-дизайн
Исследование пользователей
+ ещё 5

Сервис поиска научных статей LitSystem для Медси

UX-проектирование
UI-дизайн
B2C
+ ещё 2

Редизайн процесса оформления заказа на сайте Faberlic

UX-проектирование
UI-дизайн
Интернет-магазин
+ ещё 5

Редизайн антивирусного ПО PRO32

UX-проектирование
UI-дизайн
Редизайн
+ ещё 1

Цифровая экосистема для AI-управления финансами для Нескучных Финансов

B2B
UX-проектирование
Highload-сервис
+ ещё 5

Корпоративный сайт «Сибирской горно-металлургической компании»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 3

Корпоративный сайт «Элтекс»

UX-проектирование
UI-дизайн
Редизайн
+ ещё 3

Новый сайт «Роскадастра»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 2
Юзабилити-аудит сайта клиники

Юзабилити-аудит сайта клиники

Веб
Аудит
Корпоративный сайт

Система удалённого мониторинга BMS

B2B
UX-проектирование
UI-дизайн
+ ещё 3
Корпоративный сайт «Банк Эсхата»

Корпоративный сайт «Банк Эсхата»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 4

Корпоративный сайт «Нового Втормета»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 3
CX-исследование агрокалькулятора для Фосагро

CX-исследование агрокалькулятора для Фосагро

Исследование пользователей
Сервисы
Юзабилити-тестирование сайта «МойОфис»

Юзабилити-тестирование сайта «МойОфис»

Юзабилити-тестирование
Веб
UX-исследования
+ ещё 1

Сайт стоматологической клиники АГАМИ

UX-проектирование
UI-дизайн
Битрикс
+ ещё 7
UX-тестирование и редизайн ключевых страниц интернет-магазина Faberlic

UX-тестирование и редизайн ключевых страниц интернет-магазина Faberlic

UX-проектирование
UI-дизайн
Интернет-магазин
+ ещё 4

Продуктовый листинг и товарный лендинг для «Ангстрема»

UX-проектирование
UI-дизайн
E-commerce
+ ещё 4

Лендинг к 10-летию Российского научного фонда

UI-дизайн
Веб
Спецпроект
+ ещё 3
Редизайн сайта компании Sintec Lubricants

Редизайн сайта компании Sintec Lubricants

UX-проектирование
UI-дизайн
B2C
+ ещё 2

Цифровая экосистема для интегратора образовательных услуг «Просвещение»

UX-проектирование
Цифровая экосистема
Веб
+ ещё 2
Аналитика и проектирование сайта Knauf

Аналитика и проектирование сайта Knauf

B2B
UX-проектирование
Интернет-магазин
+ ещё 4

Корпоративный сайт для РСХБ Лизинг

UX-проектирование
UI-дизайн
Битрикс
+ ещё 4
Юзабилити-аудит сайта Стартекс

Юзабилити-аудит сайта Стартекс

B2B
Интернет-магазин
B2C
+ ещё 2

Корпоративный сайт Unigreen Energy

UI-дизайн
Битрикс
Time & Material
+ ещё 5
Аналитика и проектирование b2b-портала для «Восток-Запад»

Аналитика и проектирование b2b-портала для «Восток-Запад»

B2B
UX-проектирование
Личный кабинет
+ ещё 1

Личный кабинет клиента Soax

B2B
UX-проектирование
UI-дизайн
+ ещё 3
Суперапп по контролю за здоровьем для фармацевтической компании Протек
3 награды

Суперапп по контролю за здоровьем для фармацевтической компании Протек

UX-проектирование
UI-дизайн
Бизнес-анализ
+ ещё 1

Новый сайт GMS Clinic

UX-проектирование
UI-дизайн
Битрикс
+ ещё 9

Личный кабинет и админ-панель для обучающей платформы Puzzle Brain

UX-проектирование
UI-дизайн
Личный кабинет
+ ещё 2
Дизайн-концепция сайта для музея Алросы

Дизайн-концепция сайта для музея Алросы

UI-дизайн
B2C
Веб
+ ещё 1

Редизайн корпоративного сайта Extyl

Редизайн
Веб
Корпоративный сайт
Система управления умными счётчиками ЖКХ для Связь инжиниринг М
1 награда

Система управления умными счётчиками ЖКХ для Связь инжиниринг М

B2B
UX-проектирование
UI-дизайн
+ ещё 2
Юзабилити-аудит сайта Орматек

Юзабилити-аудит сайта Орматек

Веб
UX-аудит
Корпоративный сайт

Личный кабинет для оплаты коммунальных платежей ТОСК

UX-проектирование
UI-дизайн
Личный кабинет
+ ещё 2
Личный кабинет HR-партнёра Ингосстрах
3 награды

Личный кабинет HR-партнёра Ингосстрах

B2B
UX-проектирование
UI-дизайн
+ ещё 5
Улучшение UX в сервисе подбора туров Слетать.ру

Улучшение UX в сервисе подбора туров Слетать.ру

UX-проектирование
UI-дизайн
B2C
+ ещё 1

Мобильное приложение «Умный двор» для Lanta

UX-проектирование
UI-дизайн
Мобильное приложение
Дизайн облачного сервиса TDCloud для Ресэнерго

Дизайн облачного сервиса TDCloud для Ресэнерго

B2B
UX-проектирование
UI-дизайн
+ ещё 1
UX-исследование и тестирование на респондентах для АО «Медицина»

UX-исследование и тестирование на респондентах для АО «Медицина»

Исследование пользователей
Юзабилити-тестирование
Личный кабинет
+ ещё 3
Юзабилити-аудит сайта Мособлгаз

Юзабилити-аудит сайта Мособлгаз

Веб
UX-аудит
Корпоративный сайт
Ювелирный маркетплейс GoldPrice

Ювелирный маркетплейс GoldPrice

UI-дизайн
Редизайн
Личный кабинет
+ ещё 3

Личный кабинет HR-партнера для Транснефти

B2B
UX-проектирование
UI-дизайн
+ ещё 3
Фирменный стиль и лендинг для образовательной платформы Держава IT

Фирменный стиль и лендинг для образовательной платформы Держава IT

UX-проектирование
UI-дизайн
Брендинг
+ ещё 1
Сайт производителя оптических приборов и прицелов Dedal Optic

Сайт производителя оптических приборов и прицелов Dedal Optic

UX-проектирование
UI-дизайн
Веб
+ ещё 1
Мобильное приложение по доставке продуктов RoyalFarm

Мобильное приложение по доставке продуктов RoyalFarm

UX-проектирование
UI-дизайн
B2C
+ ещё 2
Сервис управления рекламой Аds.Market
1 награда

Сервис управления рекламой Аds.Market

B2B
UX-проектирование
UI-дизайн
+ ещё 2
Сервис покупки билетов Авиабилеты.Онлайн

Сервис покупки билетов Авиабилеты.Онлайн

UX-проектирование
UI-дизайн
Редизайн
+ ещё 1
Интернет-магазин элитных дверей Deft

Интернет-магазин элитных дверей Deft

UX-проектирование
UI-дизайн
Интернет-магазин
+ ещё 3

Сайт дистрибьютора ресторанных принадлежностей и оборудования Мегахаб

UX-проектирование
UI-дизайн
E-commerce
+ ещё 1
Обсудить проект