Aigenis. Desktop приложение по покупке акций и облигаций

З А К А З Ч И К
Компания "Айгенис" оказывает полный комплекс услуг на биржевом и внебиржевом рынках ценных бумаг в части брокерской и дилерской деятельности, включая инвестиционное консультирование, сопровождение сделок купли-продажи акций, организацию выпуска акций и облигаций, а также иные услуги.
1
ДИЗАЙНЕР
Я была одним дизайнером на проекте
4
МЕСЯЦА
Продолжительность проекта
5+
ЧЕЛОВЕК
Приблизительная численность команды
  • ЗАДАЧА ПРОЕКТА
    Разработать архитектуру десктоп приложения на базе уже заданного функционала и архитектуры мобильного приложения, а также добавить новый расширенный функционал.

    Создать актуальный визуальный стиль для приложения, также базируясь на уже разработанном стиле ранее.
  • БЫЛО СДЕЛАНО
    Переработана и адаптированна архитектура мобильного приложения под десктоп, улучшена.

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

    Разработана темная тема приложения.
  • МОЯ РОЛЬ
    User Experience & User Interface Designer.

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

    — разработка UX сценариев основываясь на бизнес требованиях;

    — детальное интерактивное прототипирование;

    — разработка иконок;

    — разработка иллюстраций.
Дизайн-процесс
1
Информационная
Архитектура
•Установочная встреча
•Разработка информационной архитектуры
•Создание wireframes
•Цифровой интерактивный прототип
2
Визуальный
Дизайн
•Мудборд
•Создание визуального концепта
•Утверждение и внесение правок
•Разработка визуального дизайна для desktop
3
Сопровождение
Разработки
•Подготовка файлов к передаче в разработку
•Разработка состояний элементов
•Создание небольшого UI Kit
•Сопровождение и контроль разработки
Читать подробнее кейс первой интерациии разработки мобильного приложения для iOS и Android
ИНФОРМАЦИОННАЯ
АРХИТЕКТУРА
•Установочная встреча
•Оценивание проекта
•Разработка информационной архитектуры
•Создание wireframes
•Цифровой интерактивный прототип
  • РАЗРАБОТКА АРХИТЕКТУРЫ
    Архитектура десктоп приложения была разработана на базе уже существующей архитектуры для мобильного приложения под платформы iOS и Android. Однако была переработана и оптимизирована с учетом добавления нового функционала.
  • ?
    Был определен вид и стиль глобальной навигации, а также, какая информация будет постоянно отображаться в хедере и прорастать на каждой странице приложения; вынесли важные настройки и функции.
разработка прототипов
При первой итерации были разработаны бумажные wireframes основных 3 экранов. Так как большая часть сценариев уже отработаны на мобильном приложении, далее сразу началась работа над созданием высокой степени детализации цифрового интерактивного прототипа.
Э Т А П — 0 1
Видео с прототипами
ВИЗУАЛЬНЫЙ
ДИЗАЙН
•Мудборд
•Создание визуального концепта
•Утверждение и внесение правок
•Разработка визуального дизайна для desktop
СОЗДАНИЕ МУДБОРДА
Для поиска лучших визуальных решений в финансовой области приложений был создан мудборд. Многие интересные решения были найдены во время проведения конкурентного анализа. Однако мудборд позволил вдохновиться и собрать понравившиеся визуальные варианты, которые в дальнейшем легли в основу UI концепта главных экранов приложения.
Э Т А П — 0 2
От прототипа к визуальному концепту
  • Создание визуального концепта начиналось с детальной проработки трёх основных экранов приложения. Основа стиля приложения была выработана уже на этапе дизайна мобильного приложения.
  • Данный стиль был немного изменен и актуализирован для десктопа: изменен основной акцентный цвет, немного изменилась цветовая палитра иллюстраций — появились градиенты.
Проектирование таблиц и фильтрации
В рамках проекта было спроектировано ряд таблиц с различным набором фильтров и поиском. Таблицы проектировались с учетом респонсивности.
Проектирование графиков
Разработка темной темы
Видео с визуальным дизайном прототипами
СОПРОВОЖДЕНИЕ
РАЗРАБОТКИ
•Подготовка файлов к передаче в разработку
•Разработка состояний элементов
•Создание небольшого UI Kit
•Сопровождение и контроль разработки
Еще больше экранов с визуальным дизайном
Tools
Sketch, Adobe Illustrator, Invision.