Обогнали конкурентов по техническим фичам, но отстали в дизайне
ThunderSoft производит ПО для обслуживания зарядных станций, а также развивает экосистему, которая объединяет водителей электротранспорта и владельцев станций. Их решения использует, например, компания «Яблочков» — ведущий в России разработчик и производитель станций зарядки.
У ThunderSoft два продукта: мобильное приложение — оно помогает водителям найти ближайшую станцию и забронировать её, и веб-панель, которую используют владельцы станций для сбора статистики и работники сервисных центров для удаленного управления. Кстати, удаленный мониторинг — настоящая киллер-фича. Можно настраивать и перезапускать любые компоненты станции без выезда специалистов на место, а значит, гораздо быстрее решать проблемы.
У инхаус-команды клиента была серьезная техническая экспертиза, а вот опыта в дизайне не хватало, и в плане UI/UX продукт отставал. Разработчики просто добавляли новые фичи в приложение, никак не адаптируя при этом интерфейс. В результате у него был перегруженный пользовательский флоу и устаревший визуал: много текста и мало визуализации, ошибки в UX-паттернах.
Мобильное приложение ThunderSoft до редизайна
Веб-сервис тоже развивали без дизайнера — как итог, сложная навигация и непонятный для новичка интерфейс: некоторые важные функции было не так просто найти, не хватало цветовых акцентов и визуализации.
Одна из страниц веб-панели ThunderSoft до редизайна
Хотя компания обогнала других игроков рынка по технологиям, было очевидно, что в плане UI/UX их продукт сильно отстает от конкурентов. И это отталкивало пользователей.
ThunderSoft хотели это исправить. Решили привлечь внешнюю команду дизайнеров, которая могла разобраться в задаче и самостоятельно предлагать решения. Выбирали из трех подрядчиков. Наше портфолио выделялось разнообразием кейсов из разных сфер и интересным дизайном.
К тому же мы хорошо поняли бизнес-потребность клиента: он хотел повысить конкурентоспособность своего продукта за счет привлекательного дизайна и интерфейса, который упрощает жизнь пользователю, а не усложняет её.
Что нам предстояло сделать
Клиент поставил такие задачи:
-
- Изучить конкурентов, выделить лучшие практики и понять, как адаптировать их под продукт ThunderSoft.
- Полностью переработать пользовательский флоу и навигацию, обновить интерфейс в мобильном приложении и веб-панели.
- Добавить некоторые новые фичи. Например, продуктовый анализ и сбор статистики.
- Разработать дизайн и пользовательский интерфейс, который будет легко кастомизировать: ThunderSoft продает свой продукт как white label решение для других компаний.
Если с приложением все было понятно — нужно сделать его удобным для пользователей, то задача с веб-панелью выглядела сложнее. Это инструмент для специалистов, и чтобы упростить интерфейс веба, нам самим сперва нужно было выяснить, как там все устроено 🙂
Одна из страниц веб-панели до редизайна
Клиент предоставил нам доступ к рабочей версии платформы и показал, как использовать инструмент Swagger для просмотра программных интерфейсов. Так мы быстрее погрузились в проект и во всем разобрались.
Особенности редизайна и UX-аудита
Редизайн — это не перестановка отдельных элементов интерфейса или изменение цветовой схемы, а новое видение функций продукта. Мы уже рассказывали, почему редизайн — это не просто запилить новые шрифты и цвета.
Чтобы избежать ошибок, которые были в старом дизайне, мы смотрим, что не так с точки зрения пользовательского опыта сейчас. Это называется UX-аудитом.
UX-аудит необходим, если пользователи не задерживаются в приложении или на сайте, сервис имеет низкую конверсию и перегруженный интерфейс.
Команда ThunderSoft обратилась к нам именно с такими проблемами. Поэтому проект по редизайну мы начали с UX-аудита старых интерфейсов. Чтобы провести его, мы:
-
- Проанализировали решения конкурентов.
- Изучили актуальный интерфейс и обозначили его проблемы.
- Составили гипотезы после анализа конкурентов и интерфейса.
- Провели опрос пользователей, чтобы проверить наши гипотезы.
- И только после, собрав кучу данных, приступили к редизайну.
Хотим рассказать вам подробнее о каждом из шагов UX-аудита.
Кстати, если вы заметили, что юзеры заходят на ваш сайт или в приложение, а через секунду-другую убегают, возможно, вам тоже нужен UX-аудит. Заглядывайте сюда: разберем вашу ситуацию, подскажем, с чего начать 😉
Этап 1: сходили на разведку к конкурентам
У заказчика не было визуальных референсов — он хотел, чтобы мы сами изучили дизайн в продуктах российских и зарубежных конкурентов ThunderSoft.
Как можно провести ресерч конкурентов? Самый простой вариант — погуглить «приложение для зарядки электромобилей» (в нашем случае), посмотреть сайты компаний…возможно, так бы и поступили ребята из другого UI/UX агентства, но мы в Purrweb подошли к делу с изобретательностью 🐱
Менеджер проекта завела себе три фейковых аккаунта, сделала три презентации (с разными названиями и локациями) и придумала легенду: она — представитель крупной транспортной и логистической компании, и сейчас они планируют переходить на электротранспорт, а значит, им нужен доступ к зарядным станциям. В итоге получилось договориться о демо-презентациях с несколькими компаниями.
Мы в Purrweb не ищем легких путей
Мы решили, что просто погуглить — недостаточно. Почему? Компании не выкладывают в открытый доступ актуальную информацию по продукту, к тому же потенциальным клиентам охотнее показывают все преимущества и фичи. Гораздо эффективнее было пойти к конкурентам напрямую, чтобы они сами все рассказали и показали.
Так мы добыли инсайты не только по дизайну, но и по ситуации в индустрии: помогли клиенту оценить свое положение на рынке.
Выяснили, что в техническом плане заказчик обгоняет конкурентов на российском рынке, а со многими зарубежными компаниями находится наравне, или почти догнал их.
Клиент оценил наш подход и был приятно удивлен, что у нашего менеджера получилось достучаться до многих компаний: ведь этот рынок довольно закрытый и сложный.
Полученные нами инсайты ThunderSoft использует для разработки стратегии развития и совершенствования продукта.
Параллельно дизайнер проекта смотрела приложения конкурентов, проходила пользовательские пути и оценивала, насколько удобно все устроено, искала плюсы и минусы — чтобы понять, как ThunderSoft могут выделиться на фоне других.
Доска в Miro, где команда собирала информацию по конкурентам. Проверили 24 компании из РФ и зарубежья!
В работе над проектом конкурентная разведка тоже помогла: мы уже знали, в чем сильные и слабые стороны конкурентов, и какие решения было бы здорово реализовать в продуктах ThunderSoft.
Этап 2: провели аудит интерфейса мобильного приложения и веб-панели
UI/UX-дизайнер прошлась по всему пользовательскому флоу, чтобы понять, какие паттерны отталкивают или запутывают пользователей, и как исправить ситуацию.
Мы не будем повторять её путь целиком и прогонять вас по всему приложению и веб-панели ThunderSoft. Покажем несколько экранов с комментариями нашего дизайнера, как пример того, на что стоит обращать внимание в рамках UX-аудита.
Мобильное приложение
Интерфейс с регистрацией и входом
Слева — экран, справа — заметки нашего UI/UX-дизайнера
Поиск, фильтрация и просмотр станций
Почему пользователю не стоит показывать пустой экран
Зарядка
Совет от дизайнера: лучше не грузить пользователя текстом, а визуализировать информацию
Веб-панель
Дизайнер рекомендует объединять информацию, чтобы упростить навигацию
Тот случай, когда легенда вместо того, чтобы облегчить навигацию, её усложняет
Этап 3: выдвинули гипотезы и опросили пользователей
Гипотезы составили в формате «если мы изменим или добавим эту фичу, то улучшим пользовательский опыт и поможем решить бизнес-задачу клиента». Вот как это выглядело:
Мы заранее составили портрет аудитории — это водители электрокаров, которые регулярно пользуются приложениями для брони станций зарядки и оплаты. Их мы и опрашивали с помощью анкеты.
Задавали пользователям вопросы об их ежедневных задачах, опыте и проблемах, с которыми они сталкиваются, работая с приложениями. И вот что получилось.
Результаты опроса водителей
Выяснилось, что боли целевой аудитории попадают в наши гипотезы. Значит, нужно менять интерфейс и флоу с учетом этой информации, чтобы приложение помогало эффективно закрывать потребности пользователей.
Параллельно с этим мы составляли гипотезы по веб-панели.
У неё совсем другая целевая аудитория — сотрудники сервисных центров, владельцы станций и админы сервисов. Чтобы проверить гипотезы, команда проекта провела несколько глубинных интервью с ними и узнала о текущих решениях и проблемах.
Итак, UX-аудит проведен, на руках у нас вся необходимая информация и ясное понимание потребностей пользователей. Пора приступать к редизайну! Сам процесс мы пропустим и сразу покажем вам результаты.
Мобильное приложение ThunderSoft: до и после
Помните, наш дизайнер разбирала существующие интерфейсы и указывала на слабые места? Посмотрите, как мы их переработали! Там, где это нужно, мы упрощали, в некоторых случаях добавляли то, чего не хватало юзерам. Мы сделали так, чтобы приложение стало максимально удобным и простым в использовании.
Регистрация и вход: убрали лишние шаги
Главный экран: вынесли самое важное на первый план
После входа в аккаунт пользователь попадал на страницу с избранными станциями, но для новых юзеров этот список всегда пуст. Основная навигация была в боковом меню.
Согласно опросам, станцию чаще всего ищут по карте, а не через избранное, поэтому экран с картой открывается сразу. Там пользователь видит все ближайшие станции. Навигацию убрали в таббар, добавили больше фильтров, а также изображение разных типов коннекторов, чтобы можно было выбрать станцию с подходящим.
Страница станции: оптимизировали отображение информации
Раньше на странице станции было неудобно ориентироваться: не отражался маршрут, информация частично перекрывала экран, схематичное изображение коннекторов не давало полных данных.
Мы оптимизировали отображение информации — теперь пользователь сразу видит маршрут, может узнать о станции подробнее, а коннекторы мы отрисовали с нуля, добавив 3D эффект. Так проще понять, что на станции есть подходящий тип разъема.
Бронирование: добавили новые возможности
Раньше в приложении нельзя было забронировать станцию на удобное время — только на ближайшие 20 минут. Мы оставили возможность забронировать «сейчас», но проработали флоу с выбором конкретной даты и времени. Также добавили возможность просматривать историю с отмененными бронями и причинами отмены — раньше такой опции не было, и если бронь отменялась, страница просто закрывалась и пользователь не понимал, что произошло.
Зарядка: визуализировали процесс
Мы также изменили страницу с профилем пользователя, оплатой и добавили режим онбординга для первого взаимодействия с приложением.
Пользователь может изучить функции до начала работы с приложением
Цвета и шрифты
Поскольку мобильное приложение и веб-панель — это white label, мы не привязывались к конкретной цветовой палитре. Основным выбрали нейтральный синий цвет, который к тому же очень популярен среди корпоративного софта.
Мы настроили цветовую схему так, что часть цветов можно кастомизировать под айдентику другого бренда (переменные цвета), а часть нельзя изменить — они будут постоянными.
Цветовая схема для ThunderSoft
Выбрали современный шрифт для кириллицы Wix Madefor Display. Он вытянутый и нестандартный, при этом легко читается. У шрифта много начертаний и открытая лицензия — так мы экономим бюджет заказчику.
Шрифт приложения
Шрифт веб-панели
Для веб-панели выбрали простой современный шрифт Onest. Он хорош тем, что буквы там не очень широкие (в отличие от того же Wix Madefor Display, который мы взяли для приложения) — больше данных помещается в таблицах. У него открытая лицензия и он поддерживает несколько языков. Это важно, потому что заказчик планирует выходить на международный рынок.
Веб-панель ThunderSoft: до и после
Команда проделала огромную работу, полностью изменив пользовательский интерфейс веб-панели. Главная задача — чтобы перегруженный данными сложный сервис был прост в навигации, а интерфейс сам бы подсказывал пользователю, какой шаг нужно сделать.
Посмотрите, как мы с этим справились. Не будем показывать все сто с лишним экранов, которые мы редизайнили, а только несколько примеров: просто почувствуйте разницу! 🙌
Фильтры: оптимизировали отображение информации
Страница станции: добавили визуализацию
Зарядки и бронирование: упростили навигацию
Дашборд для владельцев станций
Изначально его не было, но чтобы владельцам станций было удобно смотреть всю информацию в одном месте, мы его добавили. На дашборде отражается статистика по потребленной энергии, доходе и активных зарядках. Так гораздо проще и быстрее анализировать данные.
Дашборд
Темная и светлая темы для дизайн-системы и white label
Дизайн-систему проектировали так, чтобы при разработке интерфейса для другого бренда нужно будет поменять только 9 цветов в коде, и всё автоматически настроится. А на темную тему можно переключиться прямо в Figma. Вот такая дизайнерская магия! 🔮
Дизайн-система в Figma
Светлая тема
Тёмная тема
Протестировали интерактивный прототип с сервисниками
Мы сделали интерактивный прототип веб-панели, чтобы протестировать его с сотрудниками сервисов на созвоне. Дали им задание: определить проблемную станцию в списке, понять, в чем причина неполадки, и описать, как они будут решать задачу. В прототипе мы использовали реальные данные с платформы, чтобы процесс был максимально близок к тому, с чем сервисники ежедневно сталкиваются.
Те же задания мы давали в старом дизайне. По отзывам сервисников и времени выполнения задач на новой версии, поиск ошибок стал занимать гораздо меньше времени.
Итог
Сейчас клиент внедряет новый дизайн в мобильное приложение и веб-панель.
Команда ThunderSoft осталась довольна результатами: теперь у мобильного приложения современный дизайн с хорошим юзабилити, а отображение данных в веб-панели стало намного удобнее и компактнее.
Заказчики уверены, что новый дизайн продуктов поможет успешно решать бизнес-задачи компании: привлекать лояльных пользователей и мотивировать сервисные центры переходить на веб-панель ThunderSoft для управления станциями.
Мы успешно подстраивались под требования и дедлайны технической части команды ThunderSoft. Они это оценили: с их стороны в проект было вовлечено много специалистов, и нам удалось с ними синхронизироваться и наладить коммуникацию.
На протяжении всего проекта клиент подробно объяснял нам логику работы системы. Ведь это сложная высокотехнологичная ниша, специфику которой действительно было важно понять для успеха. Клиент не боялся тратить время (а значит, и бюджет) на объяснения, чтобы мы хорошо поняли все требования и сделали работу качественно. Такой подход полностью себя оправдал.
Если нужно освежить дизайн для вашего проекта, заполните форму, чтобы связаться с нами. Мы внимательно выслушаем, поделимся опытом и прикинем цены и сроки.
