Как сделать дизайн для консервативной компании: кейс приложения Selgros

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

Мы, как и другие команды, сталкиваемся с ситуацией, когда для пользователей нужно сделать трендовый, вовлекающий и удобный дизайн, но при этом не нарушить дизайн-систему и бизнес-процессы клиента. Особенно если эти процессы консервативны.

Жертвовать комфортом пользователя мы не можем: если человеку неудобно в приложении, то он не будет в него возвращаться. И в чём тогда смысл? Но мы не можем и противоречить требованиям клиента. Поэтому наша задача — найти win-win решение. Сейчас расскажем, как делали это для Selgros.

Содержание кейса

• Зачем компании Selgros обратилась к нам: вникаем в задачи
  
• Решение задачи 1. Упрощаем ввод контактных данных при регистрации
  
• Решение задачи 2. Делаем приложение удобным для покупок на ходу
• Поиск визуального стиля приложения: смелее или проще?

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

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

1) помогало бы людям становиться клиентами магазина;

2) даже на ходу было бы удобным для пользователей, в том числе в возрастной группе 40-45+.

Кажется, что всё просто. Но есть «но».

Чаще всего крупные компании консервативны. У них есть регламенты, которые ограничивают эксперименты в дизайне и не позволяют упростить то, что очень хочется упростить.

Это не плохо, но влияет на работу на проекте. Приходится искать обходные пути для решения задач, чтобы прийти к результату, которой устроил бы и клиента, и пользователя. Так было и на проекте Selgros.

Задача

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

Получить карту можно только в физическом магазине: приехать с паспортом, заполнить бумажную анкету (указать имя, номер телефона, email, дату рождения, паспортные данные), сделать фото. Такая система:

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

Решение

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

Мы решили добиться «простоты» за счёт визуального дизайна:

— разбили ввод контактных данных на несколько экранов;

— поместили поля ввода в верхнюю часть экранов;

— использовали светло-серый цвет, чтобы добиться эффекта прозрачности;

— для кнопок навигации выбрали фирменный алый оттенок, чтобы привлечь внимание человека;

— поддержали простую композицию тонкими элементами типографики.

Результат

Регистрация поместилась на четырёх экранах. Из-за поэтапного процесса и визуально чистых экранов она не воспринимается человеком как нечто сложное и муторное. На этом этапе нам удалось найти баланс между «хочу» и «надо».

Задача

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

Решение

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

— Сделали пересчет баллов в рубли. Согласно бизнес-процессу клиента, бонусный счёт ведётся в баллах. 1 балл = 0,01 рубль. Если у покупателя 3000 баллов, то потратить он сможет только 30 рублей. Чтобы не нарушить ожидания человека из-за количества нулей, мы научили приложение пересчитывать баллы в рубли.

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

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

Результат

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

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

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

В нашей задумке такой дизайн не отсылал к бренду напрямую, но был понятен пользователю на уровне ассоциаций.

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

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

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

А как вы считаете, что важнее: строго соблюдать требования или экспериментировать и продавливать решения, если вы уверены в их успехе? Поделитесь своим мнением в комментариях и расскажите о своём опыте, если сталкивались с таким выбором.

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

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

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

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