СВЯЗАТЬСЯ
EN

Мобильное приложение
|

iOS
Android
  • ЗАДАЧА ПРОЕКТА
    Разработать архитектуру мобильного приложения под iOS и Android платформы для удаленной биржевой торговли. Изучить данный рынок приложений, собрать и применить лучшие мировые практики. Также учесть нюансы сложной законодательной системы РБ по проведению инвестиционных операций.
    • изучение рынка
    • проектирование продукта
    • итерационное улучшение
    • внедрение и сопровождение
  • ЗАДАЧА ДИЗАЙНА
    Разработать визуальный концепт в современном облике, при этом внушающий доверие и профессионализм в финансовой сфере. Задача: уйти от шаблонного скучного финансового продукта, учесть разношерстную целевую аудиторию. Созданный стиль должен оставаться актуальным следующие 5-6 лет.
    • разработка UI
    • создание цифровых иллюстраций
    • интерактивный прототип
    • создание UI Kit
  • КОМАНДА
    Разработка архитектуры и визуальной части приложения велась одновременно на двух платформах разными командами разработчиков: iOS и Android. Работа проходила параллельно с внедрением биржей нового протокола передачи данных.
    • продуктовый дизайнер
    • менеджер проекта и PO в одном лице
    • команда iOS — 3 человека
    • команда Android — 2 человека
    • backend внедрение протакола — 2 человека
Смотреть полную версию проекта на Behance
BEHANCE
О КОМПАНИИ
Aigenis — профессиональный участник рынка ценных бумаг. Виды деятельности: дилерская, брокерская, доверительное управление.

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

Цель продукта: предоставить способ инвестирования собственных денежных средств в ценные бумаги — облигации и акции. Покупка и продажа, а также получение оперативной информации об эмитентах, параметрах выпусков ценных бумаг, котировках с организованной биржевой площадки.
ВИЗУАЛЬНЫЙ КОНЦЕПТ ОСНОВНЫХ ЭКРАНОВ
01 ЭТАП
01 ЭТАП
Стратегия и исследование
Kickoff meeting
Оценивание проекта
Конкурентный анализ
Дизайн принципы
Создание и проработка сценариев
02 ЭТАП
02 ЭТАП
Информационная архитектура
Создание персон, доработка сценариев
Создание архитектуры на базе сценариев
Разработка ваерфреймов
03 ЭТАП
03 ЭТАП
Прототипирование и тестирование
Создание прототипов
Тестирование прототипов
Итеративная доработка чистовых прототипов
Создание интерактивных прототипов
04 ЭТАП
04 ЭТАП
Разработка UI концепта
Создание мудборда
Разработка визуального концепта
Разработка стиля иллюстраций
Утверждение концепта
05 ЭТАП
05 ЭТАП
Чистовой UI и иллюстрации
Визуальная разработка всех экранов
Создание цифровых иллюстраций
Утверждение, внесение правок
06 ЭТАП
06 ЭТАП
UI KIT передача в разработку
Создание итогового кликабельного прототипа
Разработка UI KIT
Подготовка и передача артефактов разработчикам
Сопровождение этапа разработки
СТРАТЕГИЯ И ИССЛЕДОВАНИЕ
• Kickoff meeting
• Оценивание проекта
• Конкурентный анализ
• Дизайн принципы
• Создание и проработка сценариев
Оценка проекта
Во время проведения Kickoff митинга были определены основные задачи и цели продукта. Спланировали и обсудили этапы работы над проектом, определили дедлайны для каждого этапа. Также выделили основной функционал и приоритизировали, разбив на несколько этапов развития продукта. Обсудили роль каждого члена команды, определили вопросы коммуникации, за кем закрепляется последнее «да».

После Kickoff митинга была проделана оценка продукта, то есть сколько времени потребуется на разработку каждого этапа. В первую итерацию разработки и запуска продукта было выделено 6 основных этапов.
Конкурентный анализ
Для более глубокого и эффективного понимания специфики продукта был проведен конкурентный анализ ведущих инвестиционных продуктов на рынке СНГ. Было выявлено три прямых конкурента: Lacerta, Тенькофф, СберБанк.

• Был проведен количественный конкурентный анализ на наличие и отсутствие функционала;
• Анализ глобальной навигации;
• Анализ визуального оформления и подачи информации.
ДИЗАЙН
ПРИНЦИПЫ
  • ПРОСТОТА
    Приложение должно быть простым и понятным для разного уровня: от продвинутых до инвесторов-новичков.
  • ДОВЕРИЕ
    На рынке РБ только начинают появляться подобные продукты, необходимо показать, что данному продукту можно доверять.
  • ЛЕГИТИМНЫЙ
    На данный момент в РБ сложная законодательная система, требуется соблюсти все правила и законы.
сценарии пользователей
На базе персон и их целей были проработаны основные сценарии пользователя. Был выбран формат повествовательных сценариев с отображением основных шагов.
ИНФОРМАЦИОННАЯ АРХИТЕКТУРА
• Создание персон, доработка сценариев
• Создание архитектуры на базе сценариев
• Разработка ваерфреймов
Создание персоН
Одновременно при создании черновых вариантов сценариев пользователей, разрабатывались персоны. Было выделено два вида собирательного образа в виде персон:

1. Опытный инвестор в лице Георгия, задача которого сохранить и преумножить свои капиталы. Основные проблемы: недоверие мобильным приложениям; мало времени на изучение информации о компаниях; инвестирует через несколько разных онлайн бирж, то есть нету общей "картины" в одном месте.

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

  • РАЗРАБОТКА АРХИТЕКТУРЫ
    После сценариев был разработан SiteMap, при создании которого будущий функционал был разделен на основные логические группы — страницы мобильного приложения.
  • ?
    Определили какой вид глобальной навигации будет использоваться и какие сущности она будет содержать. Было выделено: что купить; биржа; мой счёт; аналитика; профиль.
Разработка ваерфреймов
На базе сценариев и SiteMap для ускорения работы был проведен первый этап разработки быстрых бумажных ваерфреймов. После обсуждения и внесения правок были созданы уже цифровые ваерфреймы, которые отображали основные сценарии и приблизительный будущий контент.
ПРОТОТИПИРОВАНИЕ И ТЕСТИРОВАНИЕ
• Создание прототипов
• Тестирование прототипов
• Итеративная доработка чистовых прототипов
• Создание интерактивных прототипов
СОЗДАНИЕ ПРОТОТИПОВ
Утвержденные ваерфреймы легли в основу создания весьма детализированных прототипов. Были проработаны все возможные сценарии взаимодействия с приложением, учтены все потребности реального контентного содержания. Итоговые прототипы разрабатывались итерационно: посредством тестирования и постепенного улучшения. Как результат, был создан кликабельный чистовой прототип. Видео можно посмотреть ниже.
РАЗРАБОТКА UI
КОНЦЕПТА
• Создание мудборда
• Разработка визуального концепта
• Разработка стиля иллюстраций
• Утверждение концепта
СОЗДАНИЕ МУДБОРДА
Для поиска лучших визуальных решений в финансовой области приложений был создан мудборд. Многие интересные решения были найдены во время проведения конкурентного анализа. Однако мудборд позволил вдохновиться и собрать понравившиеся визуальные варианты, которые в дальнейшем легли в основу UI концепта главных экранов приложения.
РАЗРАБОТКА ВИЗУАЛЬНОГО КОНЦЕПТА
Для разработки визуального концепта было выделено три главных экрана, которые содержат наиболее разнообразные элементы. На этапе концепта была продумана и разработана иерархия типографики; подобраны второстепенные и акцентные цвета; сделан хедер; подобран стиль иконок на базе глобальной навигации; разработано несколько существенно разных видов карточек; сделано несколько вариантов входного экрана на базе которого основывается весь внутренний стиль приложения.
РАЗРАБОТКА СТИЛЯ ИЛЛЮСТРАЦИЙ
Еще во время поиска интересных решений в финансовой области интерфейсов и создания мудборда, осуществлялся поиск стилистики будущих иллюстраций.

Задача: сделать привлекательные и не чопорные иллюстрации, при этом они должны содержать в себе нотку строгости и деловитости, передать легкость и непринужденность.

Решение: использовать простые иллюстрации со сдержанными цветами интересно расставляя цветовые акценты. Также было принято решение добавить морские растительные элементы, так как бренд Айгенис основан на морской тематике.
ЧИСТОВОЙ UI И ИЛЛЮСТРАЦИИ
• Визуальная разработка всех экранов
• Создание цифровых иллюстраций
• Утверждение, внесение правок
  • Визуальная разработка всех экранов
    После утверждения и внесения правок в дизайн концепт трех главных экранов, был проработал UI всех сценариев и всех необходимых состояний на базе разработанного прототипа.
  • Создание цифровых иллюстраций
    Сперва были предоставлены бумажные эскизы всех будущих иллюстраций. После их утверждения, была проработана одна цифровая иллюстрация. Затем нарисованы все оставшиеся в чистовом виде.
UI KIT И ПЕРЕДАЧА В РАЗРАБОТКУ
• Создание итогового кликабельного прототипа
• Разработка UI KIT
• Подготовка и передача артефактов разработчикам
• Сопровождение этапа разработки
РАЗРАБОТКА UI KIT, ПОДГОТОВКА АРТЕФАКТОВ
Для упрощения работы команде разработчиков был создан UI KIT, который вобрал все элементы мобильного приложения, а также их состояния; все используемые цвета; иерархию типографики; все виды хедеров; карточки; графики и их состояния и т.д.

Макеты для двух команд iOS и Android разработчиков предоставлялись в Zeplin и Invision Inspect. Для упрощения понимая взаимодействия был создан чистовой кликабельный прототип в Invision со всеми сценариями и состояниями.

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

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

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

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

Отдельно хотелось бы отметить то, насколько легко и продуктивно происходило общение и обсуждение любого возникающего вопроса или предложения. По завершению разработки прототипа приложения Аполлинария продолжает оказывать консультации и поддержку в рамках соблюдения и реализации продукта. Инвестиционная компания "Айгенис" рекомендует Аполлинария Манько как специалиста высокой квалификации с гибким клиентоориентированным подходом, способную качественно и в срок выполнять поставленные задачи.
— Директор О. Н. Сафроненко, aigenis.by