Редизайн low-code платформы
Контекст
и проблема
Low-code подход подразумевает под собой создание продуктов с помощью визуальных редакторов, простую работу с БД, минимальное задействование кода при необходимости. Продукт дает возможность использовать готовые функции и элементы для быстрого и удобного создания приложений. Low-code решения становятся все более популярными, поскольку помогают автоматизировать процессы быстрее и дешевле.
Однако, несмотря на популярность платформы, в продукте накопился ряд проблем:
01
Сложная навигация
пользователи и прикладные разработчики терлись в большом количестве настроек
02
Устаревший UI/UX
дизайн не соответствовал современным стандартам и снижал вовлеченность
03
Отсутствие адаптива
отсутствовала адаптация интерфейса под разные размеры экранов
04
Ограниченные настройки UI
пользователи не могли адаптировать интерфейс под свои задачи
05
Низкая производительност
Сложные страницы и панели зависали при работе с большим количеством данных
06
Высокий порог входа
Новым пользователям было сложно разобраться в платформе без обучения
Цели
Перед нами стояли амбициозные задачи
Улучшение пользовательского опыта (UX)
Создание интуитивной среды, ориентированной на решение задач пользователя без лишних усилий
Повышение скорости и удобства работы
Снижение когнитивной нагрузки и повышение операционной эффективности
Обеспечение адаптивности (Fluid & Responsive)
Бесшовное взаимодействие с продуктом на любых устройствах и разрешениях
Современный и привлекательный UI
Обновление визуального языка и формирование доверия к бренду через эстетику
Техническое ускорение работы платформы
Минимизация времени ожидания и мгновенный визуальный отклик
Масштабируемость и системность
Создание единого визуального стандарта для ускорения разработки и внедрения новых фич
Исследование и аудит
Перед началом редизайна мы провели комплексное исследование, чтобы выявить ключевые проблемы, понять потребности пользователей и сформулировать гипотезы для улучшения платформы.
Интерфейс до переработки
Интервью и опросы пользователей
Мы провели качественные исследования, чтобы глубже понять боли пользователей.
Что узнали:
- «Очень сложно разобраться» – 60% новых пользователей жаловались на высокий порог входа.
- «На мобильном невозможно работать» – 72% пользователей сказали, что отсутствие адаптивности мешает.
- «Интерфейс перегружен» – 40% отметили, что часто теряются в меню.
- «Медленно работает» – 35% пользователей жаловались на задержки в UI.
Анализ конкурентов
Мы изучили 5 ведущих low-code платформ на рынке, включая Bubble, webflow и zapier.
Какие тренды заметили:
- Минималистичный UI – меньше элементов, больше интуитивности.
- Мобильная адаптивность – работа на любом устройстве без ограничений.
- AI-ассистенты – помогают автоматизировать рутинные задачи.
- Real-time коллаборация – возможность командной работы, как в Google Docs.
Вывод: конкуренты предлагали более удобные, быстрые и гибкие интерфейсы, что делало их привлекательнее для пользователей, но в части возможностей организации бизнес-процессов наш продукт был на голову выше.
Гипотезы для редизайна
На основе исследования мы сформулировали несколько ключевых гипотез, которые тестировали в процессе редизайна:
- если упростить навигацию и интерфейс, пользователи будут быстрее находить нужные функции и меньше путаться;
- если переработать конструктор страниц, то сократится время на создание приложения и снизится количество жалоб к продукту у конечных пользователей;
- если переработать компонентную базу и перевести ее на React, UI будет работать быстрее, а в интерфейсах станет больше интуитивности.
Основные этапы работы
01
Проектирование опыта (UX Strategy)
- User Flow: Оптимизация путей пользователя для сокращения количества шагов к цели.
- Информационная архитектура: Пересборка структуры меню и навигации для снижения когнитивной нагрузки.
- Wireframing: Создание низкодетализированных прототипов для проверки логики переходов без отвлечения на визуал.
02
Разработка дизайн-системы
- Атомарный дизайн: Разработка системы шрифтов, цветов и базовых компонентов (кнопок, инпутов).
- Fluid Logic: Проектирование правил, по которым компоненты будут растягиваться и адаптироваться под разные экраны.
- Библиотека компонентов: Сборка UI-kit в Figma для обеспечения консистентности.
03
Визуальный дизайн (UI Design)
- Hi-Fi макеты: Отрисовка финальных экранов с учетом иерархии данных и эстетики.
- Микровзаимодействия: Проработка анимаций и откликов интерфейса, которые создают ощущение «быстрой» платформы.
- Dark/Light Modes: Настройка режимов для комфортной работы администраторов в разное время суток.
- Кликабельный прототип: Создание сценариев в Figma для тестирования удобства навигации.
04
Передача в разработку (Handover)
- Спецификации: Описание логики работы сложных «резиновых» компонентов.
- Экспорт ресурсов: Подготовка иконок, иллюстраций и шрифтов.
- Design QA: Контроль соответствия верстки дизайн-макетам на этапе разработки.
Результаты
Редизайн не только сделал платформу визуально привлекательнее, но и значительно улучшил удобство, скорость работы и вовлеченность пользователей.
-35% времени на выполнение задач
Редизайн интерфейса, новый визуальный конструктор и оптимизация навигации привели к ускорению работы с платформой и повышению удобства. Новый интерфейс стал более понятным, задачи выполняются быстрее, пользователи реже испытывают трудности.
Время поиска нужного раздела уменьшилось в 2 раза
Мы упростили интерфейс, убрали дублирующиеся элементы и внедрили новую систему меню и быстрого доступа. Пользователи быстрее находят нужные инструменты, а процесс работы стал менее запутанным.
95% пользователей отметили улучшение UI
Новый UI рендерится быстрее за счет оптимизации кода. Темная и светлая темы повысили комфорт работы пользователей. Минимализм, понятная типографика, адаптив и грамотное использование цвета сделали интерфейс визуально удобнее и современнее.
Количество UI-багов в продакшене снизилось до -50%
Платформа стала быстрее, стабильнее и менее ресурсоемкой. Скорость загрузки страниц увеличилась на 60%. После редизайна меньше пользователей испытывают сложности при работе с платформой, что снизило нагрузку на техподдержку.
