Разработали приложение программы лояльности для клиентов Selgros Cash&Carry

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

Мы запустили первую версию мобильного приложения Selgros — она уже доступна в сторах. Приложение написано на Swift UI — и для нас, и для клиента это новаторство, так как технология достаточно новая и мы не рискуем делать на ней большие проекты. Поскольку MVP-версия приложения не нагружена функциональностью, мы это попробовали и нам удалось сделать классный проект.

— Более 50 тысяч скачиваний в Google Play (по данным от 21.11.2022).
— № 137 в рейтинге «Бизнес» App Store (по данным от 21.11.2022).
— Коммерческие показатели приложения под NDA.

————————————————————————
We've launched the first version of the Selgros mobile app — it's already available on the stores. The app is written in Swift UI – this is an innovation both for us and for the client, because the technology is fairly new, and we don't risk doing big projects on it. Since the MVP-version of the application is not loaded with functionality, we have tried it and managed to make a cool project.

For now, it is temporarily impossible to register in the app, as the company is now affected by restrictions. As soon as things get better, we will continue to refine and develop the project.

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

Зачем Selgros Cash&Carry мобильное приложение лояльности

Наш клиент хотел сделать удобный инструмент для новых и постоянных клиентов магазина Selgros Cash&Carry. Ему нужно было понятное и простое мобильное приложение, которое:

— помогало бы людям становиться клиентами магазина;
— давало бы им круглосуточный доступ к программе лояльности;
— было бы удобным для пользователей 40-45+;
— в дальнейшем могло вырасти в полноценный eCommerce проект.

Мы поняли задачи клиента и начали работу над приложением.

1. Приложение Selgros помогает людям получить карту лояльности

Основная задача сервиса — решить проблему людей, которые хотят стать клиентами Selgros Cash&Carry. Оформление карт лояльности в магазинах формата Cash&Carry сложное. Получить карту можно только придя со своим паспортом в гипермаркет на стойку информации. Такая система:

а) не очень удобна — нужно ехать в магазин, предъявлять паспорт, стоять в очереди, ждать, пока карту изготовят. Если, по закону подлости, забудешь паспорт, то магазин не сможет оформить карту, и тогда вся поездка пройдет впустую.

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

Наш клиент хотел заменить офлайновую регистрацию авторизацией в приложении Selgros.

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

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

В итоге регистрация поместилась на четырёх экранах: человек вводит имя, дату рождения, контакты, подтверждает номер телефона и придумывает пароль. За счёт визуально чистых экранов и подсказок по шагам регистрация воспринимается просто. Теперь стать клиентом Selgros Cash&Carry можно стать в любой момент, и для этого необязательно выходить из дома.

2. Приложение делает использование программы лояльности удобным

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

Что мы сделали для этого:

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

— Пересчет баллов рубли. Согласно бизнес-процессу Selgros Cash&Carry, бонусный счёт ведётся в баллах. 1 балл = 0,01 рубль. Если у покупателя 3000 баллов, значит, что потратить он сможет только 30 рублей. Мы научили приложение пересчитывать баллы в рубли, чтобы менеджерить историю покупок в плане списания баллов стало комфортно.

— Персональные акции. У Selgros Cash&Carry есть персональные еженедельные скидки, которые мотивируют лояльных пользователей делать выгодные покупки. Но покупателю сложно «добраться» до акций: бумажные купоны теряются, а ноутбук с собой на кассу не принесешь. В приложении акции работают как галерея персональных скидок — их удобно найти и они всегда остаются под рукой.

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

3. Визуальный дизайн приложения подчёркивает простоту его использования

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

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

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

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

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

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

————————————————————————
Why we started developing an application for Selgros Cash&Carry

Our client wanted to make a convenient tool for new and regular customers of the Selgros Cash&Carry store. He needed a clear and simple mobile app that:

— can help people become customers of the store;
— Give them round-the-clock access to the loyalty program;
— be user-friendly for auditorium older 40-45 age;
— in the future could grow into a full-fledged eCommerce project.

We understood the client's goals and started working on the app.

1. The Selgros app helps people get a loyalty card

The main task of the service is to solve the problem of people who want to become Selgros Cash&Carry customers. It is difficult to obtain a loyalty card in Cash&Carry stores. To get a card you have to come to the information desk in the hypermarket with your passport. This system:

a) is not very convenient — you need to go to the store with your passport, stand in a line, wait for the card to be made. By Murphy's Law you can forget your passport, and the store can not issue a card, and then the entire trip will be vainly.

b) not in keeping with the spirit of time — now that you can order just anything through a mobile app, offering customers to receive bonus cards only in a physical store is not modern and uncaring.

Our client wanted to replace offline registration with authorization in the Selgros app.

The customer's form has many levels of nesting: birthdate, phone number, e-mail, choosing your shopping center. So the registration process is very messy. We needed to make it easier for people to feel comfortable. We couldn't remove the fields because this information is important for business processes.

We decided to achieve "simplicity" of the process through visual design. The registration screens became clearer: they have a lot of air, and the data entry fields are located at the top of the screen. The light gray color creates a sense of transparency, the subtle typographic elements support a simple composition, and the bright scarlet buttons help to navigate.

Registration fits on four screens. Thanks to the visual clarity and cues on the steps, registration is easy to understand. Now you can become a Selgros Cash&Carry customer at any time, and you don't have to leave your home to do it.

2. The app makes it easy to use the loyalty program

The app had to be as lightweight as possible because it will be used by people 40+. One of the usage scenarios is that they will be doing it while walking around the store with a shopping cart. So the app needs to be one-handed and be as predictable as possible in terms of what the user will see on the next screen.

What we've done for it:

— Loyalty Card. The first thing a person sees when entering the app. Our decision to place the card on the main screen helps the customer check the bonus account quickly, when he walks between the racks, and not look for the card while standing in line at the store's checkout.

— Points are converted to rubles. According to Selgros Cash&Carry business process, the bonus account is kept in points. 1 point = 0.01 rubles. If a customer has 3000 points, it means that he can only spend 30 rubles. We have taught the app to convert the points into rubles, so that it is easy to manage the history of purchases in terms of deducting points.

— Personal promotions. Selgros Cash&Carry has personal weekly discounts that motivate loyal users to make profitable purchases. In the app the promotions work as a gallery of personal discounts – they are easy to find and always remain at hand.

— Purchase history. Checks in the application look like real. For this our designers conducted research and compared checks from different stores to each other. In the purchase history, the user can see how many points have been credited for each item.

3. The visual design of the app emphasizes its ease of use

One of the goals of the app, to be user-friendly for the customer when they're in the store, is played by the contrasting design. It was important for us to give as much air as possible and make the bright red color accentuate rather than scream. This is why we highlighted red only the main elements that help the user to navigate. We chose graphite black as the main color for the text, rather than black itself, to provide contrast without hurting the user's eyes.

We wanted to be a non-conformist on this project. So we offered the client unusual solutions for onboarding and "blank" states of the screens. In our idea, each such design did not refer to the brand directly, but was understandable to the user at the level of associations.

The client felt in love of our solutions, but after long coordination at a higher level, we still came to the conclusion that it is necessary to follow the brand book more strictly. The final design became more conservative.

It was important for us to come to an agreement with the brand policy and make design beautiful, so we prepared a second version for these screens.

The final visual design of the app was simpler than we intended, but that doesn't spoil the app. We kept the contrast, plenty of air, and stayed true to the client's brand book.

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

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

————————————————————————
The Selgros app is a mobile loyalty program for regular customers at Selgros Cash & Carry hypermarkets. The app can tell a person at any time about his bonus account, show the purchase history, orientate him through the points he has accumulated, and suggest advantageous promotions.

Скриншоты