Приложения МАКИ МАКИ. Часть 1. Проектирование и дизайн

Проектирование и дизайн

Мы давно и плодотворно работаем с сетью ресторанов МАКИ МАКИ. Началось наше сотрудничество с разработки адаптивного сайта для службы доставки.

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

Зачем переделывать старые приложения?

Импульсом для принятия решения стал планомерный рост заказов с мобильных устройств и уменьшение доли телефонных звонков, поступающих в call-центр.

При этом начали все острее ощущаться проблемы, которые накапливались со временем.

1. Устаревший интерфейс

Существующее приложение для iOS уже не отвечало новым гайдлайнам Apple, а версия под Andoroid представляла собой копию iOS без какой-либо адаптации под навигационные модели Android.

iOS

Android

Помимо стилевых проблем были и проблемы с юзабилити, например, невозможность восстановить пароль.

2. Отсутствие единой базы с сайтом

Все заказы поступающие через приложения, фиксировались на отдельном сервере и обрабатывались в call-центре под управлением системы Fast Operator.

При этом, сервер приложения не имел связи с сайтом.

Такое решение вызывало ряд проблем:

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

3. Высокая стоимость поддержки

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

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

Проектирование

В апреле мы приступили к работе. Для начала сформулировали концепцию приложения и начали готовить прототип. Проектированием занимался Егор Камелев.

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

Примеры достижений:

• Соверши два заказа в течение 14 дней и получи скидку 15%.
• Купи на сумму 1500 рублей и получи ролл «Каллифорния» в подарок.

За 4 итерации получился финальный прототип приложения для iOS, который принял заказчик.

Достижения и финальный прототип

Дизайн-концепция

Следующим шагом нам необходимо было создать стиллистическую и эмоциональную основу. Пожелания к дизайну были следующими:

• Темный фон
• Соответствие брендбуку
• Визуальное родство с сайтом и оформлением ресторанов

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

Однако, он показался заказчику слишком разноцветным, и Мише пришлось укладываться в рамки.

Постепенная эволюция главной страницы:

В итоге получился макет, соответствующий брендбуку и гайдлайнам Apple:

Значительные изменения претерпели экраны товара и личного кабинета:

Финальная версия:

Кабинет:

Корзина:

Весь процесс согласования и корректировок концепции фиксировался в Basecamp. Можете оценить масштаб происходящего.

Дизайн и тестирование

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

Изначально мы планировали делать приложение кроссплатформенным, но потом отказались от этой идеи и решили делать нативные версии для iOS и Android с адаптированными для каждой версии интерфейсами. Причины отказа от кроссплатформенных решений читайте во второй части статьи.

Как и с концепцией, все обсуждения велись в соответствующих тасках Basecamp.

Когда количество макетов перевалило за 20, перед нами встали сложности, которые не позволял решить Basecamp:

• Комментирование и обсуждение отдельных элементов UI
• Тестирование макетов на целевом устройстве
• Отслеживание и консолидация общих изменений: шрифтов, цветов кнопок и тд.

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

Тут на помощь пришел inVision.

Сервис позиционирует себя как инструмент для прототипирования и совместной работы над дизайном.

inVision позволил нам:

• хранить историю изменений;
• накладывать комментарии на отдельные части макетов;
• сравнивать версии;
• отслеживать статус макетов: принят/требует доработки;
• организовать структуру макетов по разделам;
• установить и протестировать прототип на целевом устройстве/в браузере.

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

Возможно, в следующих постах, мы проведем полный обзор сервиса и расскажем о работе с ним. А пока смотрите на финальный прототип приложения для iOS и упрощенную версию прототипа для Android:

Завершающим шагом в дизайне стала иконка приложения:

Всего было подготовленно 42 дизайн-макета для iOS и столько же для Аndroid. Подробно их можно посмотреть в галерее.

Макеты всех экранов iOS:

Android:

Кейс приложения на Behance

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

P.S. Если у вас возникли какие-то вопросы по процессу или вы хотите поделиться своим мнением, будем рады обсуждению в комментариях. Присоединяйтесь!