Эволюция и забота о пользователях: как Whoosh провел комплексный редизайн

Whoosh — лидер среди сервисов микромобильности в России — обновил стиль впервые за пять лет. Компания, как и сама индустрия, развивалась стремительно, и визуальный язык не успевал меняться так же быстро. Наконец, стало ясно, что бренду нужно «обновиться». Но он нуждался не в революции, а эволюции: смене формы без потери содержания, без изменения привычных сценариев и функций. При этом изменения коснулись всего: айдентики, UX/UI, и, самое главное, внутренних рабочих процессов. Рассказываем, что изменилось и как проходил редизайн.

Долгое время в Whoosh не было ресурсов на улучшение внешнего вида приложения. Дизайнеры на аутсорсе делали упор на UX-сценарии, но вскоре стало понятно, что работа должна быть комплексной: улучшать UX в отрыве от UI нерационально. К тому же фирменный стиль, созданный на старте, несколько устарел — становилось все сложнее адаптировать его под нужды продукта.

В июле 2022 года Whoosh провел стратегическую сессию, на которой оценили собственный продукт, сильные и слабые стороны дизайна. В итоге решили обновить визуальный язык и структурировать дизайн бренда.

Мы поняли, что проблемы не только в дизайне приложения, но и в брендинге в целом. Чтобы освежить дизайн, нужно было переосмыслить брендинг комплексно и привести его к единому виду. Ранее визуальный язык приложения, рекламных материалов и внутренней бизнес-коммуникации сильно отличались. Обновленный брендинг должен был коснуться всех направлений работы компании: маркетинга, бизнеса, управления, коммуникации и внутренних процессов.

Цель: эволюция, улучшение, пересборка бренда без кардинальных изменений для пользователя. Не создаем новый бренд, а улучшаем существующий.

Основные «боли» Whoosh можно разделить на три направления: UX и UI, брендинг и дизайн-процесс. Ребрендингом занималось агентство «Щука», а задачи по UX/UI и организации процессов компания выполняла in-house. Работа над визуальным и техническим обновлением бренда и приложения шла параллельно, чтобы успеть к летнему пику активности сервиса.

Компания разделила задачи на три направления:

1. Брендинг

2. UX/UI

3. Дизайн-процесс

В основу нового фирменного стиля легли принципы технологичности, заботы, строгости и «человекоцентричности» продукта. Новый слоган бренда — «Whoosh для большего» — обратил внимание на его масштаб, на процессы, которые стоят за привычным пользователю комфортом, и на новые направления деятельности.

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

Логотип Whoosh также был обновлен, при этом некардинально. Полоса и логотип стали взаимозаменяемыми элементами единой айдентики.

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

Привычное всем приложение Whoosh ощущалось устаревшим, а интерфейс не отвечал запросам современных пользователей. Например, некоторые экраны были доступны только в светлом варианте, не было проработанной «темной темы», тренда последних лет.

К дизайну приложения подошли критически и систематически. Важно было не просто устранить мелкие недочеты, а убрать перегруженность и адаптировать дизайн под новые функции. Они должны внедряться быстро и аккуратно, поскольку релизы выкатывают сразу на большую аудиторию. Шрифт Montserrat плохо подходил под задачи: некоторые буквы похожи до степени смешения, текст мелким кеглем плохо читается. К тому же этот шрифт давно стал моветоном и признаком отсутствия индивидуальности.

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

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

Шрифт тоже обновили: устаревший Montserrat заменили на более привлекательные Nekst и TT Interphases.

Пространство приложения оптимизировали. Ранее карточка устройства была перегруженной — она не оставляла места для основного контента и затрудняла добавление новых тарифов или функций. Собрав обратную связь от команды поддержки, которая day-by-day помогает пользователям, Whoosh добавил в карточку базовые инструкции для новичков. Например, о депозите и старте поездки.

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

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

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

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

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

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

Пришлось пересобрать более 520 макетов и создать более 30 флоу. Все это уместили в 23 раздела дизайн-системы, которая позволяет быстро и гибко работать с актуальными элементами. Некоторые разделы — магазин, маршрут и школа вождения — еще только готовят к запуску.

Обновление — закономерное следствие роста компании, насчитывающей 17 млн клиентов и вышедшей на IPO в 2022 году. Приложение — ключевая площадка взаимодействия с пользователями, она должна отвечать высоким запросам: быть красивой, быстрой, понятной и удобной. Самокаты как транспорт должны быть простыми в использовании.

Новый визуальный стиль Whoosh адаптирован ко всем продуктам и сервисам компании — самокатам и велосипедам, мобильному приложению, наружной и digital-коммуникации, магазину Whoosh.

В этом сезоне компания собирает данные об эффективности новых функций и обратную связь от пользователей. Но уже сейчас виден прирост оплаты поездок на 5–8%.

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