Как разработать функциональное мобильное приложение за 2 месяца

От заказчика мы получили стандартные требования для eCom-приложений. Сложность была в другом — в условиях жестких дедлайнов нужно было дать пользователям максимально полезные и нужные функции в первом релизе. А значит, из всех требований мы должны были определить ключевые возможности, которые закроют основные потребности пользователей. 

Список функций для первого релиза получился таким:

• Авторизация
• Просмотр списка событий и поиск по нему
• Просмотр баннеров с акциями
• Выбор места на схеме зала
• Добавление билета в корзину
• Оплата заказа
• Скачивание билета
• Применение скидочного промокода

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

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

Создаем дизайн и запускаем разработку

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

У Kassir.ru уже был устоявшийся корпоративный стиль и веб-сайт, поэтому нам не нужно было изобретать новые цвета и логотипы. Для акцентов и кнопок мы взяли фирменные оттенки Kassir.ru — черный и желтый. Шрифты оставили стандартные iOS и Android: San Francisco и Roboto.

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

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

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

Разрабатываем фронтенд и помогаем с бекэндом

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

Над этим проектом мы работали по модели оплаты Fix Price, то есть стоимость каждого этапа была фиксированной. При такой модели заказчик оплачивает анализ проекта, потом дизайн, разработку и тестирование — это обычная последовательность для разработки. Другой формат оплаты, Time & Material со ставкой по факту затраченных часов специалистов — более гибкий, и с ним соблюсти последовательность действий и ускорить работу было бы проще. Но, несмотря на выбранную модель оплаты, мы все равно нашли возможность распараллелить дизайн и разработку, чтобы выиграть в сроках.

Еще до согласования дизайна первых экранов мы запустили работу по основной архитектуре. Потом разрабатывали сценарии, которые уже были одобрены в дизайне. С приложением Kassir.ru мы работали по методологии Agile — как только создавалась какая-то функция или модуль, она передавалась в тестирование и ее можно было считать готовой. Если нужно было внести изменения в завершенные блоки, разработчики предупреждали об этом тестировщиков, чтобы все работало как надо.

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

Подключаем тестирование на ранних этапах

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

На этапе проверки технического задания специалисты проверяли ТЗ на отсутствие несостыковок и наличие описания поведения в неоднозначных кейсах.

На этапе дизайна тестировщики смотрели, чтобы все экраны состояний интерфейса были на месте, — например, экраны с нулевой датой, ошибками ввода и другие.

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

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

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