Очень подробно про дизайн нового мобильного приложения 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. А если вашему бизнесу нужны советы по разработке мобильного приложения, пишите мне — постараюсь помочь.
* — такими символами теперь отмечаются организации, признанные в России экстремистскими
Вам бы связаться с зарой, а то их нелогичные скроллы с ума сводят
Мы бы и сами не прочь поработать и с Зарой, и с Юникло, и с другими брендами.
Бренды, напишите мне!
Мы бы и сами не прочь поработать и с Зарой, и с Юникло, и с другими брендами.
Бренды, напишите мне!
Ничего ты не понимаешь, это модно так
Хотел потыкать приложение, но... (ios 16.1.1, iphone 12, если что)
Спасибо, глянем.
Вау, очень интересная статья и классный проект! Прикольные решения : )
Очень симпатично вышло! Один клиент уже приводил Zarina в пример, когда обсуждали пожелания по дизайну )
Спасибо ☺️
выглядит стильно
Спасибо, приятно!
На каком стеке работает приложение, расскажите пожалуйста
Широкий вопрос)) Приложение нативное, Swift и Kotlin. Если конкретизируете, что именно интересует — расскажу подробнее
Это теперь так Зара называется в РФ ?
Лайкнул за слово "девичесть" )
еее, спасибо! долго его искали))
Лайв тайпинг красава!
На асос сильно похоже
Мне и клиенту асос оч нравится в плане визуала. Пользовались им в качестве референса
классно, приложение выглядит интересно
там ещё вещи очень часто дешевле стоят, чем в магазине)) рекомендую
Как все таки интересно можно транслировать смыслы лишь шрифтовыми/цветовыми решениями…!
Всё так! Спасибо!
Как вы проверяли гипотезу о том, что если сделать элементы в центре, то взгляд сосредоточится на модели?
Не то чтобы мы выдвигали такую гипотезу)) У нас была цель — создать правильную композицию. Обычно на фотографиях бренда модели находятся в центре. Если бы мы расположили элементы карточки справа, то сломали бы ось, и взгляд человека считывал элементы карточки отдельно друг от друга ¯\_(ツ)_/¯
Крутая работа!
Мне кажется, я купила что-то, пока читала кейс
Лучшая похвала для нас))
Я только не понял. Что магазину мешает товар со склада отвезти в магазин, куда может прийти человек и примерить его? Почему нужно было делать 2 корзины?
Спасибо, что спросили! Что я могу ответить со своей стороны: логистика — это бизнес-процесс клиента, на котором завязаны другие процессы. И сделать так, как кажется проще, в реальности не всегда возможно.
Мы как мобильные разрабочики не влияем на бизнес-процессы клиента, но можем подстроить приложение под них. И сделать это так, чтобы людям было удобно его использовать
Зачем? Если есть Wildberries…
Я только не понял, что мешало компании привезти товар в свой же магазин, чтобы покупатель пришёл и померил? Почему нужно было делать две корзины? Удобен был бы переключатель "Где получить" дома или в магазине.