Сделали редизайн для производителя ПО для электротранспорта. И заодно добыли инсайты по рынку. Кейс ThunderSoft

11

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

Рассказываем, как мы сделали редизайн мобильного приложения и веб-панели для ThunderSoft — разработчика программного обеспечения для зарядной инфраструктуры. В этом кейсе покажем, как подружить сложный технологический продукт и лаконичный современный дизайн. 

А еще расскажем, как проектный менеджер Purrweb притворялась сотрудницей транспортной компании и ходила на разведку к конкурентам ThunderSoft, чтобы найти лучшее решение для клиента. 

Приложение доступно в сторах — чтобы установить, отсканируйте QR-код.

Обогнали конкурентов по техническим фичам, но отстали в дизайне

ThunderSoft производит ПО для управления зарядными станциями и развивает экосистему, которая объединяет водителей электромобилей и владельцев станций. Их решения использует, например, компания «Яблочков» — один из ведущих в России разработчиков и производителей станций зарядки. 

Команда ThunderSoft обратилась к нам с задачей провести редизайн двух продуктов: мобильного приложения для клиентов и веб-панели для специалистов, управляющих зарядными станциями.

У инхаус-команды клиента была серьезная техническая экспертиза, а вот опыта в дизайне не хватало — в плане UI/UX продукт для клиентов отставал. Разработчики просто добавляли новые фичи в приложение, никак не адаптируя при этом интерфейс.

Веб-сервис тоже развивали без дизайнера — как итог, сложная навигация и интерфейс, в котором тяжело разобраться новичку.

Хотя компания обогнала других игроков рынка по технологиям, было очевидно, что в плане UI/UX их продукт отстает от конкурентов. И это отталкивало пользователей.

ThunderSoft хотели это исправить. Решили привлечь внешнюю команду дизайнеров, которая могла разобраться в задаче и самостоятельно предлагать решения. Выбирали из трех подрядчиков. Наше портфолио выделялось разнообразием кейсов из разных сфер и интересным дизайном.

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

Что нам предстояло сделать 

Клиент поставил такие задачи:

• • Изучить конкурентов, выделить лучшие практики и понять, как адаптировать их под продукт ThunderSoft.
  • Полностью переработать пользовательский флоу и навигацию, обновить интерфейс в мобильном приложении и веб-панели.
  • Отрисовать дизайн под новые фичи. Например, продуктовый анализ и сбор статистики.
  • Разработать дизайн и пользовательский интерфейс, который будет легко кастомизировать: ThunderSoft продает свой продукт как white label решение для других компаний. 

Если с приложением все было понятно — нужно сделать его удобным для пользователей, то задача с веб-панелью выглядела сложнее. Это инструмент для специалистов, и чтобы упростить интерфейс веба, нам самим сперва нужно было выяснить, как там все устроено 🙂

Клиент передал нам внутреннюю документацию, доступ к рабочей версии платформы и показал, как пользоваться Swagger для просмотра API. Это помогло нам быстрее погрузиться в проект и разобраться во всех деталях.

Особенности редизайна и UX-аудита

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

Чтобы исправить ошибки старого дизайна, мы анализируем текущий пользовательский опыт и выявляем проблемные места. Этот процесс называется UX-аудитом.

Проект по редизайну продуктов ThunderSoft мы начали с UX-аудита. Для этого мы:

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

Далее расскажем подробнее о каждом из этих шагов. 

Кстати, если вы заметили, что юзеры заходят на ваш сайт или в приложение, а через секунду-другую убегают, возможно, вам тоже нужен UX-аудит. Заглядывайте сюда: разберем вашу ситуацию, подскажем, с чего начать😉

Этап 1: разведка у конкурентов

У заказчика не было визуальных референсов — он хотел, чтобы мы сами изучили дизайн конкурентов. 

Как можно провести такой ресерч? Самый простой вариант — погуглить «приложение для зарядки электромобилей» (в нашем случае) и посмотреть сайты компаний… возможно, так бы и сделали ребята из другого UI/UX агентства, но мы в Purrweb подошли к делу с изобретательностью 🐱

🕵️ Мастер-класс по «промышленному шпионажу» от Purrweb   Менеджер проекта создала три фейковых аккаунта, подготовила презентации с разными названиями и локациями, придумала легенду: она — представитель крупной транспортной компании, планирующей перейти на электротранспорт. В итоге получилось договориться о демо-презентациях с несколькими компаниями. Мы в Purrweb не ищем легких путей Мы решили, что просто погуглить недостаточно. Почему? Компании не выкладывают в открытый доступ актуальную информацию по продукту, к тому же потенциальным клиентам охотнее показывают все преимущества и фичи. Гораздо эффективнее было пойти к конкурентам напрямую, чтобы они сами все рассказали и показали. Кстати, это не первый раз, когда мы проводим анализ конкурентов таким способом. Например, когда делали приложение Grecha.pro для рестораторов, тоже придумали убедительную легенду, чтобы получить тестовый доступ к продукту конкурента и подсмотреть крутые идеи для нашего заказчика.

Так мы добыли инсайты еще и по ситуации в индустрии: помогли клиенту оценить свое положение на рынке.

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

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

Полученные нами инсайты ThunderSoft использует для разработки стратегии совершенствования продукта.

В работе над проектом конкурентная разведка тоже помогла: мы уже знали, в чем сильные и слабые стороны конкурентов, и какие решения было бы здорово реализовать в продуктах ThunderSoft.

Параллельно дизайнер проекта смотрела приложения конкурентов, проходила пользовательские пути, искала плюсы и минусы — чтобы понять, как 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. Они это оценили: с их стороны в проект было вовлечено много специалистов, и нам удалось с ними синхронизироваться и наладить коммуникацию. 

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

На протяжении всего проекта клиент подробно объяснял нам логику работы системы. Ведь это сложная высокотехнологичная ниша, специфику которой действительно было важно понять для успеха. Клиент не боялся тратить время (а значит, и бюджет) на объяснения, чтобы мы хорошо поняли все требования и сделали работу качественно. Такой подход полностью себя оправдал. 

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

Есть задача? Свяжитесь с нами, и мы предложим варианты реализации, обсудим сроки и бюджет.

Почему Purrweb?

Экспертиза в дизайне. Более 10 лет создаем IT-продукты с крутым дизайном. В нашем портфолио — 550+ проектов в самых разных сферах: IoT, EdTech, маркетплейсы, дейтинг-приложения и многое другое.  

Сторонники «умного» редизайна. Понимаем, что редизайн — это серьезная работа, а не просто поменять местами кнопки. Поэтому стартуем с UX-аудита, смотрим на ваших конкурентов и изучаем ситуацию на рынке. Если нужно — проводим кастдевы с пользователями и юзабилити-тесты. Предлагаем только те решения, которые подкреплены цифрами и реальными отзывами.

Умеем работать без детального технического задания. Вам не нужно приходить с детально проработанным ТЗ. Нам достаточно общего запроса и контекста, чтобы самим разобраться в задаче и предложить решение, которое идеально подходит именно для вашего проекта. 

 

[wpim]