Заказчик

Федеральный медиахолдинг, который формирует картину дня

Холдинг 1MI, созданный в 2016 году — один из крупнейших в стране. В него входят несколько федеральных и региональных СМИ, а также паблики в социальных сетях. Ежемесячно ресурсы посещают около 14 млн пользователей.

Задача

Мобильный помощник, с которым хочется исследовать город и открывать новые локации

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

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

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

Станислав

менеджер проектов WINFOX

Решение

Доверились Flutter, продумали каждую анимацию и разработали админ-панель для управления приложением

Сделали прототипирование, дизайн и разработку приложений для Android и iOS, а также код для панели администратора.

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

Бэкенд реализовали как классический REST на фреймворке Yii2.

«Использовали библиотеку Intervention Image для сжатия изображений и применили подход поэтапной и возобновляемой загрузки файлов с помощью TUS-библиотеки. Firebase помог нам организовать авторизацию через Google-аккаунт и отправку пуш-уведомлений».

Валерий

разработчик WINFOX

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

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

Дмитрий

UX/UI-дизайнер WINFOX

Онбординг при первом входе в приложение

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

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

Авторизация привычными способами

Войти в приложение можно по телефону, почте или с помощью аккаунта в соцсети.

От авторизации по смс мы отказались: этот способ дороже в реализации.

Интеграция с Яндекс Картами

Приложение использует интерфейс карт, наиболее привычный жителям России. У Яндекс Карт хорошая детализация и они часто обновляются. 

Поиск маршрутов

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

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

Избранные маршруты

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

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

Фото и видео маршрута

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

Пользователь может полистать фото и посмотреть видео, которые добавили другие.

Создание маршрута

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

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

Станислав

менеджер проектов WINFOX

Редактирование авторского маршрута

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

Следование по маршруту

Приложение подсказывает, как проходит маршрут: пользователь видит подсказки вверху экрана. 

Если человек сошел с маршрута, он также об этом вовремя узнает.

Профиль пользователя

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

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

Просмотр и добавление отзывов

Перед тем, как начать путь, можно почитать, что думают о нем другие. А пройдя маршрут, можно оставить свой отзыв.

«Все отзывы пользователей модерируются — это позволяет следить за контентом в приложении».

Станислав

менеджер проектов WINFOX

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

«Графический интерфейс панели администратора реализован с помощью Vue.js — популярного JavaScript-фреймворка с открытым кодом. За отправку запросов на сервер у нас отвечает HTTP-клиент Axios, который поддерживает все популярные браузеры».

Анастасия

разработчик WINFOX

Управление администраторами

Админ-панель позволяет разграничивать уровни доступа пользователей.

Например, пользователю можно назначить роль модератора или администратора.

Управление маршрутами

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

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

Модерация отзывов

Администратор просматривает отзывы перед тем, как они становятся доступны в приложении.

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

Результат

Кроссплатформенное приложение для трекинга активности во время ходьбы, бега и езды на велосипеде, которое объединяет горожан

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

Активная разработка приложения и панели администратора заняла около шести месяцев.

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

Станислав

менеджер проектов WINFOX