Очень подробно про дизайн нового мобильного приложения Zarina

Привет, это «Лайв Тайпинг»! Мы разрабатываем мобильные приложения для людей и рассказываем об этом. В сентября зарелизили новое приложение одного из брендов Melon Fashion Group. В кейсе по косточкам разберём дизайнерские решения на этом проекте и покажем, к каком результату они привели

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

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

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

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

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

Главный критерий UI-дизайна — эстетичность. Приложение должно было выглядеть как Instagram*, в который заходишь, чтобы провести время и получить наслаждение от контента. А главное — приложение должно было помочь сформировать у пользователей потребность носить такую же одежду, как на фото.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У Zarina есть онлайн- и офлайн-магазины. Если покупатель заказывает одежду онлайн, и её нет в физическом магазине, то доставить её смогут только на дом со склада. Это вызывает сложности у пользователя — в таком случае примерить вещь в магазине не выйдет.

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

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

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

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

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

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

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

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

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

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

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

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

Теперь покупки можно совершать с мобильного телефона. У бренда довольно долго была только одна возможность продавать товары онлайн — с сайта. Теперь мир постоянных покупателей Zarina изменился: люди могут покупать одежду, которая им нравится, с телефона. В приложении их ждут более низкие цены, акции, бонусы и подарки. Скачать приложение под iOS можно здесь, а под Android — вот здесь.

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

Общение с покупателями на важные темы. Наш клиент хотел сделать для своих покупателей больше, чем eCommerce-приложение. Магазину Zarina нужна была площадка, которая позволит бренду общаться с аудиторией и обсуждать важные темы. Приложение стало той трибуной, с которой Zarina может транслировать свои идеи и искать отклик у аудитории.

Ну вот и всё! Если хотите поближе познакомиться с проектом — смотрите наш кейс на Behance. А если вашему бизнесу нужны советы по разработке мобильного приложения, пишите мне — постараюсь помочь.

* — такими символами теперь отмечаются организации, признанные в России экстремистскими