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

Главное о кейсе

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

— В сентябре 2022 выпустили в релиз нативное приложение ZARINA для платформ iOS и Android.
— Более 10 тысяч скачиваний в Google Play (по данным от 21.11.2022).
— № 58 в рейтинге «Покупки» App Store (по данным от 21.11.2022).
— По данным за последний месяц, среднее время нахождения пользователя в приложении — 15 минут.
— Коммерческие показатели приложения под NDA.

Смотреть кейс на Behance: https://www.behance.net/gallery/155578387/Zarina-Mobile-app


————————————————————————

The ZARINA mobile app: the results of our work

— In September 2022 we released the ZARINA native app for iOS and Android platforms.
— The app's performance is under NDA.

We helped our client to launch sales mobile and made it so that people do not experience any difficulty in working with the app. The time a person spends in the ZARINA mobile app is not just shopping. It is recreation, entertainment, and the time a person can spend together with the brand, discover something new and find their own style.

Look it on Behance: https://www.behance.net/gallery/155578387/Zarina-Mobile-app

Бизнес-задача и ее решение

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

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 не просто продаёт одежду. Оно стремится помочь каждой покупательнице подобрать образ, который подойдёт ей по самоощущению. В каталоге приложения есть раздел товаров «Выбери свой стиль» — он помогает понять, какой стиль ближе конкретной девушке: повседневный, деловой, женственный, минималистичный или ультрамодный.

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

————————————————————————
How we helped our client achieve his goals

1. We found out what app as of eCommerce application ZARINA wants to be

When the client came to us, ZARINA was changing its brand positioning. The narrative of romanticism, which was expressed in the brand tone of voice, identity, even in the design code of shops, was replaced by minimalism and self-sufficiency. ZARINA brand has become more serious, but no less feminine.

The client wanted to see a stylish, user-friendly app that would meet the new brand positioning and style closer to the premium segment. No screaming design and active sales. The main criterion for UI-design is aesthetics.

2. We found the references

We took cue from MANGO, H&M, 12Storeez, Massimo Dutti, and Farfetch. These projects are content-based. They have a lot of photos and parts with an emphasis on the visual component. ZARINA's marketing also gives preference to visuals — this is evident both in the number of photo shoots and in the activity with which the brand conducts its social networks.

3. We developed a design concept for the app

— We chose simple shapes. Gave up on rounded elements. Zarina's content is stylish in its own right. If we had started rounding corners in the photos, we would have lost a significant part of the content and broken the given geometry.

— We chose a new font. We were looking for a font that is easy to read and that could decorate the app. Circe was good. It is a calm geometric grotesque with humanistic features. Its form is about minimalism and simplicity, but at the same time it has a twist.

— Bordeaux is the new pink. The client wanted to get away from the pink colors, so we decided on a new accent color. Against the background of black, gray and white, which are the classic colors of eCom applications, the shade of burgundy looks good.

4. Helped the user navigate on the catalog

— We made a smart search. The feature helps people find the right things faster than they finish typing. With the help of algorithms the app specifies the information the user enters and helps people find goods.

— We worked out two ways of displaying products in the catalog. Goods are displayed in a grid or large cards.

— We haven't forgotten about the quick buy. Naturally, the user can put an item in the cart or add it to favorites right from the catalog without going to the product card.

5. Focused a person's attention on the product

— Set up the centering. We wanted to support the composition of the main photo and put all the elements of the product card (photo, name, color, price) on the same axis. We continued the centering theme on the Home screen.

— Hidden details. The information about the composition, manufacturer, product care and articles was rolled up into the "Details" line to save space, add air and not distract the user from studying the photos.

6. Simplified the complex business process of the customer at checkout

ZARINA has online and offline stores. If the customer orders clothes online and they are not in the physical store, they can only deliver them to the house from the warehouse. The most difficult moment in UX is to understand how not to upset a person, if he chose an item, starts to place an order and wants to deliver it in the store, but can't do it. To do this, we:

— Developed crossover filters.
— Added an "Exclusively Online" tag.
— Developed a feature of "Two baskets".

7. Making the ZARINA app more than an eCom

— Home screen, like on social networks. We suggested making a classic home screen — a selection of banners that are broken up in a carousel. But with a small addition: stories, like in social networks. Stories help the brand communicate with customers about important topics and showcase new collections.

— Categories. In the catalog of the application there is a section of products "Choose your style" — it help to understand what style is closer to a particular girl: casual, business, feminine, minimalist or trendy.

— The whole image. This is a mini gallery in the product card which shows what things the model is wearing. From this mini-gallery it is easier to choose what fits you. And it also really helps the user make purchases, because he doesn't have to go back to the catalog to add a purse from the photo — just swipe down the screen and click "Add to Cart".

Прочая информация о кейсе

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

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

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

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

————————————————————————
Why does ZARINA need a mobile app

ZARINA is our client. It's a clothing retailer with billions in revenue. Stores are open in 180 cities in Russia, in Armenia, Kazakhstan and Belarus. The brand is part of the Melon Fashion Group.

Our client approached us to develop a convenient service for customers, where people can buy clothes and spend time with their favorite brand. The mobile app had to help expand the client's target audience and improve their online shopping experience.

We were tasked with developing a stylish, aesthetically pleasing app with a lot of attention to UX so that the service would be convenient for all segments of the target audience.

Скриншоты