Skip to content
Gallery
CV
Олег Макаров
No-Code редактор для создания чатботов
Главный дашборд и его адаптивная версия
Раздел уведомлений и верстка таблиц
Продуктовые и разводящие страницы, документация
Share
Explore

Главный дашборд и его адаптивная версия


Контекст

Главный дашборд — это первое, что видят пользователи, зайдя в Voximplant Platform.
Данные статистики использования продукта верхнеуровнево помогают им понять, что происходит, контролировать успешность кампаний и динамику трат или необходимость пополнения баланса и т.д.
Согласно статистике использования девайсов за год, все больше просмотров происходит через мобильные устройства, в то время на мобилке дашборд отображается некорректно и неудобно. Да и в целом дашборд неудобен для пользователей.
⁠
Untitled.png
⁠
⁠
Исходный дашборд и его нечитабельная адаптивная версия

angry-face-meme
Основные проблемы
1. Не продумана вариантивность блоков дашборда для лучшей масштабируемости.

2. Некоторые дизайн-решения главного дашборда не позволяют сделать адаптацию под мобилку.

3. Неконсистентность — много плашек с разными визуальными решениями без каких-либо правил, что не дает масштбировать дашборд в будущем.
2.1. Усложняющие читабельность полудуги с лимитами тарифов.
2.2. Цветные плашки статистики звонков, где цвет ничего не означает.
2.3. Немасштабируемая таблица сессий с используемыми правилами.


Решение

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

⁠
Untitled 1.png
⁠
⁠
Финальная версия дашборда и его адаптивная версия

⁠
Untitled 2.png
⁠
⁠
Баланас для дочерних аккаунтов без доступа к смене тарифов

⁠
Untitled 3.png
⁠
⁠
Дропдауны и датапикер


⁠

Следующий кейс

⁠
Untitled 4.png
⁠
⁠

Voximplant Platform | Раздел уведомлений и верстка таблиц

⁠
Подробнее →
⁠
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.