Контакты

Россия 196084 , Санкт-Петербург, ул. Заозерная, дом №8, корпус 2, Литера А, офис 212

Мы работаем по будням с 10.00 до 19.00 +7 (495) 215-53-16 +7 (812) 748-20-96 info@notissimus.com
Социальные сети

Заказчик

«Хлебная Усадьба» — пекарня с непрерывным производственным циклом, собственным автопарком и более чем двадцатью точками розничной торговли в Санкт-Петербурге и области.

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

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

new-logo-vertical
Представитель заказчика Пекарня "Хлебная Усадьба"

Задача

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

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

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

Система автоматизации, которая уже используется заказчиком для решения кассовых задач — iiko.

Прототип

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

Прототип всегда делается долго (в этот раз работа заняла два месяца) : согласовываются и внешний вид мобильного приложения, и сторонние сервисы, которые должны быть задействованы (к примеру, выбор провайдера для валидации телефонного номера при регистрации)

Прототип включал в себя заставку и онбординг (от англ. «вхождение») , который призван ознакомить пользователя с возможностями приложения, а в дальнейшем с его новинками: скидочная карта в телефоне; информация об акциях, скидках, подарках; адреса торговых точек — чтобы легко можно было найти ближайшую

designer
Елизавета Брагина Ведущий дизайнер NOTISSIMUS

Онбординг

Только первый вход

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

boss
Александр Маркович Руководитель проекта
Было пожелание, чтобы клиенты указывали дату рождения. Да, это необычное требование, но мобильное приложение призвано, в том числе, дарить подарки — и эта особенность становится объяснимой.

Авторизация по номеру телефона — теперь ещё один общепринятый стандарт: проще ввести код из SMS, чем запоминать пароль. Однако, мы просим и электронную почту, («кризис бумаги» снова ввел её в обиход) — клиент расплатился на кассе, а на e-mail отправился чек — очень удобно для всех.

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

Мы постарались, чтобы приложение было максимально полезным для пользователя: уведомления, новости, акции, подарки, отзывы и предложения — всё вовремя и всё в одном месте!

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

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

designer
Елизавета Брагина Ведущий дизайнер NOTISSIMUS

Дизайн

У заказчика был свой бренд-бук (что встречается далеко не всегда) , а значит, существенная часть работы по дизайну уже сделана. Со стороны представителей заказчика других особых предложений не было, они лишь обозначили предпочтения и в большей степени хотели отталкиваться от наших идей.

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

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

designer
Елизавета Брагина Ведущий дизайнер NOTISSIMUS

Экран «Адреса магазинов»

Адрес магазинов списком

Адреса магазинов
на карте

Кликабельные пикты - по клику открывается поп-ап с карточкой пекарни

Карточка выбранной пекарни

Экран «Каталог» и карточка товара

Каталог

Карточка товара

Дизайн-система

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

К примеру, таб-бар состоит из иконок и сепаратора — их дизайн создается независимо и отражается в общей картине. Создание дизайн-системы — ещё один отраслевой стандарт, не мы его придумали.

Преимущество дизайн-системы в том, что она делает заказчика независимым от разработчика, не «привязывает» к нему. Мы передаем заказчику все материалы, и другому дизайнеру легко будет вносить правки, не опасаясь всё испортить или утонуть в изменениях.

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

boss
Александр Маркович Руководитель проекта

Результат проделанной работы​