Когда интерфейс — это тоже подарок: дизайн-концепт приложения для доставки цветов

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

Сделать сервис, который будет выгодно отличаться от конкурентов с сухими карточками, пастельной палитрой и множеством фильтров: отстроиться от рынка, добавить эмоциональности и создать живой, яркий интерфейс, вызывающий улыбку и вдохновляющий пользователя на покупку.

‍Исследование и вдохновение 

Концепт мы разрабатывали для крупного онлайн-магазина по доставке цветов — с реальной задачей, бизнес-контекстом и целевой аудиторией.

Перед стартом мы изучили рынок, интерфейсы конкурентов, визуальный стиль клиента и пользовательские сценарии. Быстро поняли: большинство приложений похожи друг на друга. В них много фильтров, сухие карточки и нейтральные цвета.

Мы решили пойти другим путем: вдохновлять, а не нагружать. Так появился мудборд, в котором соединились три акцента:

✨волшебство — как ощущение чуда, которое хочется подарить;

💖 эмоции — вместо каталога с позициями — настроение;

🆕 современность — яркие цвета, трендовые иллюстрации и немного дерзости.

Мудборд помог нам заложить основу всего визуального стиля приложения: от цветовой палитры и персонажей до общей структуры интерфейса.

Концепция и метафора

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

Смыслы, которые мы вложили в эти три слова:

• «Дарите» — мягкий call to action. Он побуждает к действию через заботу.

• «Волшебство» — то самое чувство, которое возникает, когда тебе дарят цветы.‍

• «Сегодня» — акцент на быструю доставку: не потом, не «в течение двух дней», а прямо сейчас. Подчеркивает конкурентное преимущество сервиса.

Чтобы встроить метафору в интерфейс, мы использовали яркие визуальные образы и определенный Tone of Voice. Например, не скучное  «Ваш заказ в обработке», а  «Творим цветочное заклинание». Посмотрите, как выглядят экраны приложения.

Цвет, типографика и настроение

Мы выбрали яркие, сочные, но сбалансированные оттенки, чтобы передать пользователю нужные эмоции: 

• розовый — ассоциируется с легкостью, заботой и радостью,

• зеленый — напоминает о свежести и флористике,

• голубой — добавляет спокойствия и визуального «воздуха»,

• черный — используется для основных кнопок и выглядит контрастно и современно.

Никаких пастельных оттенков, блеклости и бежевой эстетики: если цветы — это праздник, то интерфейс должен быть таким же! 💐

Для типографики использовали Gilroy — он уже был в айдентике бренда. Шрифт легко читается и хорошо держит структуру на любом экране.

Главные герои: персонажи-цветы

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

Мы решили заимствовать этот прием олицетворения и дать голос нашим персонажам. У каждого из них — свой характер и роль, и похоже, они сами хотят немного рассказать о себе 🙂

Маскоты легко масштабируются: их можно анимировать, собирать в паттерны, использовать в маркетинге и коммуникации. Визуальный стиль становится гибким и узнаваемым.

Welcome screen: волшебство с первого взгляда

Первое впечатление — самое важное, поэтому мы сделали короткую анимационную сцену на загрузочном экране: цветок из букета оживает и начинает жить в доме получателя.

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

Анимация зациклена — ее можно смотреть сколько угодно или сразу перейти к интерфейсу. Мы тестировали сцену на пользователях и коллегах — и получили классный фидбек. Нам говорили, что персонаж вызывает доверие, а сам прием создает ощущение, что приложение сделано с заботой.

Главная страница: простая, яркая, но лаконичная 

Главная страница — это точка входа в приложение и главный сценарий выбора. Мы сделали ее легкой, наглядной и мотивирующей к действию:

• корзина появляется только тогда, когда в нее что-то добавлено;

• карточки товара без подложек — максимум воздуха и внимания к букетам;

• маскоты-цветы привлекают внимание к акциям и спецпредложениям;

• черная кнопка CTA выделяется даже на ярком фон

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

Карточка товара: понятная и удобная

Карточка товара устроена просто: фото букета на весь экран, понятные опции и два сценария на выбор — «Купить сейчас» или «Добавить в корзину».

Так мы закрываем обе задачи:

• тем, кто спешит, — быстрая покупка в пару тапов,

• тем, кто хочет вдумчиво собрать букет или добавить подарок, — подробная конфигурация через корзину.

Вот, например, что рассказывает персонаж из карточки товара: он точно знает, как устроено это приложение изнутри — ведь он в нем живет! 😀

Когда пользователь оформляет заказ, он должен чувствовать, что все под контролем. Поэтому мы сделали экран заказа максимально прозрачным — вся информация на виду: куда заказ едет, к какому времени, что внутри.

Мы добавили:

• четкие статусы доставки (но без перегруза),

• персонажа, который сопровождает заказ и «общается» с пользователем визуально,

• теплый tone of voice в UX-текстах — никаких сухих «Оформлено», только «Творим цветочное заклинание» (и краткий поясняющий тег рядом).

В этом экране метафора работает особенно сильно: заказ — это уже действие, уже магия. Осталось только дождаться, когда она сработает — то есть заказ доедет к получателю!

Мы придумали и собрали визуальную концепцию мобильного приложения для службы доставки цветов. В ней:

• понятная структура и легкая навигация,

• яркие цвета и выразительная типографика,

• персонажи, которые добавляют эмоцию,

• метафора, которая работает на всех уровнях — от слогана до всех действий.

Концепт получился теплым, современным и гибким. Его можно внедрять по частям, развивать, масштабировать… и точно нельзя забыть ❤️