NGENIX multidesk
UX/UI

Редизайн клиентского портала
крупнейшего провайдера облачных сервисов

Front-end
ngenix logo
отрасль
ОТРАСЛЬ
Облачные сервисы
технологии
ТЕХНОЛОГИИ
ReactJS
Redux
Highcharts
команда
КОМАНДА
4 человека

О ПРОЕКТЕ

NGENIX Multidesk — это клиентский портал для администрирования сервисов, таких, например, как сайт Госуслуг.

Он представляет собой высокопроизводительный интерфейс, который защищает веб-ресурсы клиентов от атак, падения серверов и прочих опасностей.

О КЛИЕНТЕ

Наш клиент — российский провайдер облачных сервисов для веб-ресурсов NGENIX (входит в группу «Ростелеком — ЦОД»)

ЗАДАЧИ

Необходимо было разделить один мультиплатформенный сервис на 3 портала: для клиентов, администраторов и менеджеров.

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

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

РЕАЛИЗАЦИЯ

Мы проанализировали уже существующий интерфейс сервиса. Переработали UX и UI, а также подготовили адаптивный дизайн для различных экранов.

Обновили инструменты управления облаком, добавили интеграции с другими сервисами. Внедрили новую систему мониторинга и сбора статистики, которая помогает оценивать эффективность в режиме реального времени.

Интуитивно понятный интерфейс

Сделали навигацию по всем трём системам (статистика, профиль пользователя, сервисы и конфигурации). Так пользователи могут легко определить, где они сейчас находятся.
Интуитивно понятный интерфейс
Добавили визуализацию для раздела «Мониторинг». Это позволит пользователям отслеживать данные на удобном интерактивном графике.

Визуализация графиков

Визуализация данных
Визуализация графиков

Визуализация данных

Большая часть Ngenix Multidesk — это формы и таблицы. Поэтому мы сделали их более удобными для пользователей.

Интерфейс стал воздушным и обрёл визуальную иерархию. Формы сгруппировали, чтобы пользователи могли легко находить информацию.

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

Система уведомлений

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

Адаптивно на 100%

адаптив под планшет
адаптив под мобильный телефон
адаптив под смартфон

РЕЗУЛЬТАТ

Мы переработали сервис, разделив его на три разных портала. При этом визуально упростили дизайн интерфейса, сделав его более понятным и простым, а ещё адаптированным под разные экраны от смартфона до компьютера с Retina дисплеем.

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

В дополнение к этому мы также добавили языковую поддержку.

ОТЗЫВ

КОМАНДА

  • Максим Волков
    Тим-лид
  • Сергей Красков
    Инженер по качеству
  • Дмитрий Латышев
    Frontend Разработчик
  • Анна Кузнецова
    UX/UI Дизайнер

СТЕК ТЕХНОЛОГИЙ

react redux logo
highcharts logo
потрясающая идея
Если хотите разработать что-то похожее или у вас есть
Назначьте встречу
Просто нажмите кнопку ниже и...