Образ жизни Zarina — одежда и аксессуары модного бренда

Разработка eCom-приложения для магазина женской одежды ZARINA: как мы помогли бренду запустить продажи в мобайле

Зачем бренду ZARINA мобильное приложение

Наш клиент — ZARINA, крупный ретейлер. Магазины открыты в 180 городах России, в Армении, Казахстане, Беларуси, а сам бренд входит в группу компаний Melon Fashion Group.

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

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

Как мы помогали клиенту достичь целей

1. Выяснили, каким eCommerce-приложением хочет быть ZARINA

Когда клиент пришёл к нам, ZARINA меняла своё позиционирование. Нарратив романтичности и девичести, проговариваемый в tone of voice бренда, в его айдентике, даже в дизайн-коде помещений, сменился на минимализм и самодостаточность. Бренд ZARINA стал более серьёзным, но от этого не менее женственным.

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

Главный критерий UI-дизайна — эстетичность. Клиенту хотелось, чтобы приложение ZARINA выглядело как стильный лукбук, любую вещь из которого — можно купить.

2. Подобрали референсы

Ориентировались на приложения MANGO, H&M, 12Storeez, Massimo Dutti, Farfetch. Эти проекты — контентные. В них много фотографий и разделов с упором на визуальную составляющую. Маркетинговая политика ZARINA тоже отдаёт предпочтение визуалу — это проявляется и в количестве фотосессий, и в активности, с которой бренд ведёт свои социальные сети.

3. Разработали дизайн-концепцию будущего приложения

— Утвердили простые формы. Предложили клиенту остановиться на минималистичных иконках и уйти от скруглённых элементов. Контент Зарины — стильный сам по себе. Если бы мы начали скруглять углы на фотографиях, то потеряли бы значимую часть фото и сломали геометрию. Это привело бы к изменению посыла и откинуло нас к игривости предыдущего дизайна.

— Выбрали самодостаточный шрифт. Искали шрифт, который удобно читать, и который мог бы украсить приложение. Circe подошёл нам идеально. Это спокойный геометрический гротеск с гуманистическими чертами. Его форма — про минимализм и упрощение, но в то же время в ней есть изюминка. Например, у букв «Ж» и «К» интересный узел, в котором сходятся диагональные штрихи. Такие детали и задают шрифту стиль.

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

4. Помогли пользователю сориентироваться в каталоге

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

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

— Не забыли про быструю покупку. Естественно, пользователь может положить товар в корзину или добавить его в избранное прямо из каталога, не переходя в карточку товара. Эта неприметная функциональность — мастхэв для любого eCom-приложения. Она делает его удобнее и отвечает на потребность человека купить вещь в ту же секунду, как он её захотел.

5. Сосредоточили внимание человека на товаре

— Задали концепцию центрирования. Модели на фотографиях ZARINA находятся в центре экрана. Мы хотели поддержать композицию основного фото и установили все элементы карточки товара (фото, название, цвет, стоимость) на одну ось. Тему с центрированием продолжили на Главном экране, хотя часто он выравнивается по левому краю.

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

6. Упростили сложный бизнес-процесс клиента при оформлении заказа

У ZARINA есть онлайн- и офлайн-магазины. Если покупатель заказывает одежду онлайн и её нет в физическом магазине, то доставить заказ смогут только на дом со склада. Самый сложный в UX момент — понять, как не расстроить человека, если он выбрал товар и хочет доставить его в магазин, но не может этого сделать. Эту проблему нужно было решить до того момента, как пользователь начнёт оформлять заказ. Для этого мы:

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

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

— Спроектировали две корзины. На случай, если человек пропустит предыдущие шаги, мы сделали такую цепочку: пользователь выбирает товар → кладёт его в корзину → и на этапе корзины понимает, каким способом может его получить.

Мы не встречали такого в обычных екомах и волновались, что наша гипотеза не подтвердится. Но в один момент нашли референс ecom-магазина Goods. Это придало нам уверенности: если крупный представитель на рынке делает так, то у нас это тоже сработает.

7. Сделали из приложения ZARINA больше, чем eCom

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

— Возможность выбрать свой стиль. Приложение ZARINA не просто продаёт одежду. Оно стремится помочь каждой покупательнице подобрать образ, который подойдёт ей по самоощущению. В каталоге приложения есть раздел товаров «Выбери свой стиль» — он помогает понять, какой стиль ближе конкретной девушке: повседневный, деловой, женственный, минималистичный или ультрамодный.

— Образ целиком. Хотели добавить кнопку «Купить образ целиком». Но это очень сложное флоу для человека: кнопка работает только в идеальном мире, где человеку нравится вся одежда из образа, устраивают цены, а все размеры есть в наличии. Вместо неё сделали фичу «Образ целиком». Это мини-галерея в карточке товара, которая показывает вещи на модели. Из мини-галерии легче выбрать то, что подходит. А ещё она действительно помогает пользователю совершать покупки: ему не надо возвращаться в каталог, чтобы добавить сумочку с фотографии — достаточно пролистать экран вниз и нажать «В корзину».

Мобильное приложение ZARINA: итоги нашей работы

— В сентябре 2022 выпустили в релиз нативное приложение ZARINA для платформ iOS и Android.
— Показатели приложения под NDA.

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

Кейс на Behance: https://www.behance.net/gallery/155578387/Zarina-Mobile-app

Выставлено в номинациях:
   — Образ жизни
   — Приложение интернет-магазина розничной торговли