Редизайн сервиса обмена всего на все онлайн

вступление:

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

Самое интересное — калькулятор, в котором за пару минут пользователи онлайн оценивают состояние своего устройства и получают персональную скидку на новую технику. Причем можно обменять сколько угодно устройств на одно другое.

о клиенте

Компания Great Steve работает в нескольких направлениях: привлекает партнёров для франшизы, ремонтирует телефоны в сервисных центрах и обменивает устройства по трейд-ин.

Мы начали сотрудничество с разработки продукта для обмена техники — trade-in.

предпроектная аналитика

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

В исходной версии калькулятора клиенты не могли:

• обменивать друг на друга разные устройства — например, телефон на MacBook, IPad;
• банально разобраться, где что находится.

Мы учли эти проблемы и проанализировали устаревшую версию.

мобильная версия

По данным Яндекс.Метрики мобильный трафик на 10-15% был больше десктопного. Естественно, это заявка на мобайл фёрст — подход, при котором сначала проектируются мобильные экраны.

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

визуальный стиль

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

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

главная

Всё пространство экрана мы освободили для ключевой функции — обмена техники.

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

Для тех, кому требуется консультация по телефону, вынесли функцию «Позвонить» отдельно. Звонки тогда были очень частыми, ведь люди совсем не понимали, как пользоваться калькулятором.

В мобилке особенно велика вероятность случайно нажать не туда, но использовать подтверждение было бы странно. Если пользователь допустил ошибку, её можно исправить кнопкой «Изменить». Так человек всегда может уйти на предыдущий шаг и исправить информацию. Если она не ключевая (например, как модель телефона), то сайт сохранит пользовательские данные

Есть два вида пользователей. Любители «протыкать» все кнопки пытаются испробовать систему. Поклонники «инструкций» хотят видеть всю информацию сразу, поэтому мы добавили подсказки к кнопкам и пояснения в тултипах.

особый кейс

Самым сложным из популярных товаров оказались айпады. В отличие от айфонов Apple не выдерживали здесь такой же ясности и четкости в названиях и отличительных визуальных чертах модели

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

десктопная версия

Trade-in — отдельная услуга Great Steve и у неё свой сайт. Чтобы не терялась связь с основным брендом, мы выдержали единый стиль в дизайн-концепции.

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

Карусель на основном сайте

Разработанный нами trade-in

Блок «Как это работает?» не даёт перепутать сайт с магазином электроники. Для наглядности снабдили каждый шаг иконкой.

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

Чтобы сформировать доверие к бренду, вынесли отзывы на главную. 95% пользователей доверяют отзывам больше, чем информации на сайте. 

Добавили видео из YouTube-канала. Возможность увидеть реальных сотрудников компании повышает лояльность аудитории. Ну а ещё это способ рекламы на собственной площадке. Да ладно, у ребят, на самом деле, очень полезный блог. Мы подписаны, а вы?

калькулятор

Ключевая функция трейд-ина — онлайн-калькулятор.

Раньше клиенты компании могли обменять только телефон на телефон. Затем Great Steve расширили линейку товаров для обмена. Для администраторов сайта мы предусмотрели возможность добавлять и убирать устройства в зависимости от наличия.

Слева список устройств, которые можно отдать, справа — которые можно получить

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

Мы упростили хэдер и футер в калькуляторе, чтобы пользователь не отвлекался на другие функции во время задачи.

Футер на главной странице. Фейсбук тогда был не запрещен, но теперь он признан экстремистским, о чем мы и пишем в описании

Футер в калькуляторе. Цвета мы также приглушили, чтобы не отвлекать внимание от обмена

наш фейл

Юзабилити-тестов на проекте не было, поэтому мы допустили ошибку на последнем этапе пользовательского пути в калькуляторе. Несмотря на яркую кнопку, клиенты не переходили к выбору устройства в обмен на своё.

Оказалось, что они просто не понимали, что делать после расчёта скидки. Поэтому конверсия в завершение сделки составляла 1%. А вот конверсия в звонок била антирекорды.

Так выглядела неудачная версия калькулятора

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

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

После этих изменений 80% клиентов завершали оформление заявки на сайте. Оставшиеся 20% — индивидуальные случаи, которые требовали консультации по телефону.

выбор нового устройства

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

Спроектировали горизонтальную фильтрацию и сортировку для удобного изучения товара. Выбранные фильтры зафиксировали перед выдачей. Так принцип отбора техники для клиента более очевиден.

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

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

Чтобы клиента не покидала уверенность в каждом действии, добавили пояснение к кнопке о заявке.

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

разработка

Разработку вели на 1С-Битрикс.

итоги

По данным Google Data Studio, после редизайна конверсия увеличилась в 2 раза. Мы с Great Steve нашли друг друга и до сих пор работаем вместе над другими проектами. Визуальный стиль, который мы разработали по ходу этого проекта, мы использовали и в них.

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

Сейчас мы разработали новую, подробную и более эстетически привлекательную концепцию для Great Steve. Но о ней как-нибудь в следующий раз