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