NGENIX multidesk
UX/UI

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

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

О ПРОЕКТЕ: РЕДИЗАЙН КЛИЕНТСКОГО ПОРТАЛА NGENIX

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

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

О NGENIX — КРУПНЕЙШЕМ ПРОВАЙДЕРЕ ОБЛАЧНЫХ СЕРВИСОВ

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

ЗАДАЧИ РЕДИЗАЙНА ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

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

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

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

UX/UI-ДИЗАЙН И FRONTEND-РАЗРАБОТКА КЛИЕНТСКОГО ПОРТАЛА

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

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

Интерактивные графики для мониторинга облачных сервисов

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

Интерактивные графики для мониторинга облачных сервисов

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

Дизайн таблиц, форм и элементов интерфейса

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

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

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

Система уведомлений
и подтверждение критических действий

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

Адаптивный дизайн пользовательского интерфейса

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

РЕЗУЛЬТАТЫ РЕДИЗАЙНА КЛИЕНТСКОГО ПОРТАЛА

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

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

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

ОТЗЫВ NGENIX О РАБОТЕ НАД КЛИЕНТСКИМ ПОРТАЛОМ

КОМАНДА ПРОЕКТА NGENIX Multidesk

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

ТЕХНОЛОГИИ FRONTEND-РАЗРАБОТКИ ИНТЕРФЕЙСА

react redux logo
highcharts logo
Хотите похожий результат?

Разработка и редизайн клиентских порталов

Просто нажмите кнопку ниже и...

Частые вопросы