Кейс: мобильное приложение для повышения финансовой безопасности
Дизайн
- Цветовая палитра
При создании цветовой палитры приложения мы ориентировались на корпоративные цвета ГУУ. Заказчик хотел, чтобы дизайн был солидным и деловым, в спокойных тонах и отражал опыт, профессионализм, компетенцию и надежность учебного заведения.
Цвета символики вуза — синий, красный и белый. Синии цвет имеет исторические отсылки к фундаментальным наукам и научным основам управления производством, а также символизирует стабильность и успешность.
Мы предложили вузу смелое решение и выбрали яркий синий и белый в качестве основы, а для цветовых акцентов — насыщенную дополнительную палитру, которую использует ГУУ для оформления материалов институтов, структурных подразделений. Красочный дизайн выгодно выделяет приложение на фоне «сухих» учебников.
- Иконка
На иконку приложения мы поместили инверсную версию логотипа — стилизованное изображение двух книг в различной перспективе — в соответствии с рекомендациями брендбука. Знак символизирует две составляющие государственного управленческого образования: менеджмент и юриспруденцию. В то же время свободное пространство в сочетании с элементами логотипа напоминает буквы «Г» и «У», которые входят в аббревиатуру вуза.
Иконка — первое, что видит человек в магазине приложений и в меню своего смартфона. Поэтому уместно использовать логотип ГУУ для его продвижения среди широкой аудитории.
- Иллюстрации
Бренд ГУУ визуально основывается на строгих формах и минимализме, которые подчеркивают основательность, глубину, прочность и непрерывность знании. Поэтому мы встроили в этот серьезный мотив дружелюбные и радостные иллюстрации. Такой самобытный прием в онбординге задает tone of voice приложению.
Двумерные персонажи визуализируют тексты и упрощают их восприятие, при этом не перетягивая все внимание на себя. Изображения выполнены в одной цветовой гамме с приложением, но не сливаются с фоном за счет контрастности. Лаконичные и вместе с этим забавные фигурки вызывают приятные ассоциации и дают пользователю ощущение, что управление финансами — это не сложно.
- Сквирклморфизм
Общая стилистика приложения основана на элементах фирменного знака. Все блоки закругленные, мягкие и выразительные — такой трендовый прием называют сквирклморфизмом (от англ. «squircles» — квадраты с закругленными углами). Иконки внутри приложения также поддерживают этот стиль.
- Шрифт, навигация, темная версия
Golos Text хорошо подходит для чтения длинных текстов с экрана и рекомендуется для сайтов государственных и социальных сервисов. Понятный и удобный интерфейс, не перегруженный графическими элементами, позволяет быстро находить нужные разделы. А в зависимости от привычек и вкусов можно выбрать версию приложения — темную или светлую.
Уроки
На данный момент курс состоит из девяти тем: «Введение. Особенности структуры личного бюджета», «Управление личным бюджетом», «Финансовая безопасность», «Налоги», «Страхование», «Вклады», «Кредиты» и «Инвестиции». Уроки шаг за шагом знакомят пользователей с банковскими услугами и продуктами, представленными на рынке.
- Доступность
Не важно, когда у пользователей наиболее высокая работоспособность — утром или вечером. Они могут свободно выбирать время для занятий и оптимальный темп — это делает процесс обучения комфортным и эффективным.
- Разные форматы
Разговорные видео или лекции-презентаций помогают визуализировать сложные концепции и процессы. Лонгриды с иллюстрациями, примерами, фотографиями, схемами и заданиями обеспечивают подробное описание и объяснение ключевых тем. Если информации слишком много, ее можно загрузить в виде pdf-файла. А подкасты с функцией фонового воспроизведения и изменения скорости позволяют учиться на ходу.
Все занятия легко добавлять в «Избранное», чтобы вернуться к ним, когда будет время для самообразования.
- Тесты
После каждого урока пользователь может пройти тест, чтобы оценить уровень освоения материала и применить полученные знания на практике. Если попытка будет неудачной, он поймет, какие темы стоит пройти еще раз.
В разделе «Прогресс» удобно отслеживать результаты по пройденным урокам и тестам, анализировать, насколько хорошо усвоен материал, и планировать дальнейшее обучение.
Интерактивность
Прежде чем приступить к разработке приложения, мы рассмотрели популярные электронные образовательные ресурсы по финансовой безопасности. Тщательный анализ помог обозначить основные проблемы каждого конкурента. Одна из них — отсутствие интерактивности.
Поэтому мы добавили в приложение элементы геймификации — за прохождение тестов пользователям начисляются баллы, которые они могут обменять на фирменную продукцию университета. Процесс обучения сопровождается прогресс-барами, чек-боксами и прочими элементами, благодаря которым повышение финансовой безопасности становится похожим на игровой квест с множеством достижений.
Также в ГУУ стремятся создать поддерживающую учебную среду, которая поощряет сотрудничество и способствует критическому мышлению. Поэтому в приложении есть особый раздел, где пользователь может внести предложение по курсу на общее голосование.
Панель администрирования
Административная панель является частью приложения и взаимодействует с ним через API. Освоить ее использование под силу человеку даже без особых знаний в сфере программирования.
Управлять приложением может как один сотрудник, который будет совмещать сразу несколько ролей, так и несколько ответственных. Всего предусмотрено шесть ролей:
- Контент-менеджер
- Модератор новостей
- Модератор портала идей
- Модератор тестов и курсов
- Модератор чатов
- Администратор
У администратора наиболее полный доступ к сервису: он изменяет контент в приложении, управляет пользователями и формами обратной связи. Данные, доступные для редактирования, хранятся в базе на одном сервере с приложением.
Текстовые экраны легко заполнять на основе шаблона, который состоит из следующих элементов:
- Текстовый заголовок 1
- Текстовый блок, для которого на дизайне определяются следующие стили:
- Стили заголовков в четырех стилях (от большего к меньшему).Стили для абзаца текста, включая форматирование.Стили оформления маркированного и нумерованного списков.Стиль оформления таблиц.Стиль оформления ссылок.Стиль оформления изображений.Стиль оформления документов.Стиль оформления цитат.
Через административную панель можно уточнить личные и контактные данные пользователей, опубликовать новости и рекомендации с помощью визуального редактора, загрузить курсы и тесты к ним, заполнить информацию о приложении и прикрепить ссылки на важные документы, открыть опросы, сделать рассылку и ответить на обращения в чате.
Лендинг
Чтобы привлечь внимание потенциальных пользователей и убедить их пользоваться ФинБезГУУ, мы разработали лендинг, оформленный в стилистике приложения. На странице есть подробное описание всех функций, а скриншоты и видео иллюстрируют удобство интерфейса. Анимированные карточки динамично рассказывают о полезности продукта, чтобы пользователи могли оценить его преимущества. В слайдере перечисляются основные темы уроков, а отдельная кнопка призывает пользователей запустить приложение. Внизу страницы расположен раздел с актуальными новостями из мира экономики и финансов, а в подвале — QR-коды и ссылки для быстрого скачивания приложения.
PWA
Мы разработали Progressive Web Application с аналогичным интерфейсом и функционалом. PWA дает пользователям доступ к возможностям мобильного приложения в браузере смартфона. Иконку PWA легко добавить на экран — так его практически не отличить от мобильного приложения.
В России актуальность PWA резко возросла, поскольку отечественные приложения подвергаются санкциям со стороны зарубежных сторов. Также PWA позволяет значительно расширить аудиторию за счет пользователей, которые не могут устанавливать приложения из-за нехватки свободного места на смартфоне. В среднем мобильное приложение весит от 20 до 50 Мбайт, в то время как PWA — менее 1 Мб.
При первом подключении к интернету PWA сохраняет на устройстве необходимые данные для работы даже в офлайн режиме. Это особенно удобно для пользователей с медленным интернетом или непостоянным подключением.
Еще одно важное преимущество заключается в том, что обновления в PWA можно вносить прямо на сервере, а пользователю не нужно тратить время на их установку.
PWA работает внутри системы и всегда выглядит одинаково независимо от браузера и устройства пользователя. Это значительно упрощает разработку и поддержку приложения.
Как и мобильное приложение, PWA может отправлять push-уведомления и хранить данные локально. Используя протокол HTTPS для передачи данных, PWA обеспечивает безопасное соединение и конфиденциальность данных пользователя.
Кроме того, PWA индексируются поисковыми системами так же, как и обычные веб-сайты, что обеспечивает дополнительную видимость и доступность для пользователей.
Результат
Мы разработали приложение ФинБезГУУ, с помощью которого легко выстроить грамотное и ответственное отношение к финансам и снизить риски дезинформации. Оно подойдет тем, кто тревожится насчет денег, мечтает обрести финансовую независимость, хочет закрыть все долги и научиться контролировать расходы, планирует копить и инвестировать.
Приложение выгодно отличается от обычного учебника:
- простая навигация, современный дизайн и геймификация
- доступная информация, понятная всем;
- экономия времени для поиска и отбора актуальной информации для изучения;
- оперативное обновление информации;
- возможность внедрения новых функций при необходимости.
Ссылка на сайт: https://landing-finbez.guu.ru/