Студия Турум-бурум

Создание онлайн каталога и мобильного приложения: UX/UI кейс для специфической ниши по переработке драгметаллов

Создание онлайн каталога и мобильного приложения: UX/UI кейс для специфической ниши по переработке драгметаллов
3010

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

Как сложную тематику сделать простой в интерфейсе

AutoCatalystMarket.com — компания с большим опытом в индустрии переработки отработанных автомобильных катализаторов.

Автокатализатор — это автомобильная деталь, которая предназначена для фильтрации выхлопных отходов транспортного средства, и принцип ее работы заключается в использовании благородных металлов-нейтрализаторов (палладия, платины и родия).

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

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

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

  • систематизировать всю имеющуюся информацию в виде онлайн-каталога;
  • упростить для пользователя идентификацию отслуживших катализаторов;
  • точно определить их стоимость;
  • найти в своем регионе партнеров для выгодной продажи или утилизации вышедших из строя катализаторов.

Основной сложностью проекта было рассказать через интерфейс о сложном процессе простым языком. И вот, как нам это удалось...

Выбор стилистики: курс на экологичность

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

Логотип
Логотип для AutoCatalystMarket.com

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

Стартовая страница сайта AutoCatalystMarket.com для десктопа
Стартовая страница сайта AutoCatalystMarket.com для десктопа

Так выглядит стартовая страница в приложении
Так выглядит стартовая страница в приложении

Дизайн главной страницы: голосовой поиск и пошаговые инструкции

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

В приложении реализовали функционал голосового поиска. Пользователю достаточно нажать на значок микрофона и назвать номер модели интересующего катализатора.


Инструмент голосового поиска в приложении AutoCatalystMarket
Инструмент голосового поиска в приложении AutoCatalystMarket

Для тех, кто впервые сталкивается с подобным онлайн-сервисом, с помощью кастомных картинок наглядно демонстрировали как работать с ресурсом.

Поп-ап — инструкция по работе с сайтом
Поп-ап — инструкция по работе с сайтом

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

Стартовая страница сайта AutoCatalystMarket.com для десктопа
Шапка с горизонтальной навигацией по сайту

Меню в приложении реализовано в виде отдельного окна
Меню в приложении реализовано в виде отдельного окна

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

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

Далее вынесли блок с конкурентными преимуществами компании, чтобы потенциальные клиенты понимали ценность от работы с компанией.

Блок, который отображает преимущества компании и уровень ее репутации
Блок, который отображает преимущества компании и уровень ее репутации

Ниже вывели дополнительные точки входа для пользователей, которые мониторят цены по конкретному производителю или маркам авто: 

  • поиск по марке машин и по производителю сделали наглядным с иконками логотипов;
  • поиск по типу монолита, с фотографиями, демонстрирующими характерные черты.

Дополнительные точки входа на главной странице
Дополнительные точки входа на главной странице
 

Страница выдачи: подводим пользователя к основной идее онлайн-каталога

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

Далее пользователь видит популярные модели, выбранной марки авто, и соответствующий им список катализаторов с фотографией и основными характеристиками. Уже на этом этапе на каждой плитке товара есть СТА — «Показать цену».


Страница выдачи при поиске катализатора по марке машины
Страница выдачи при поиске катализатора по марке машины

Так выглядит выдача по марке авто в приложении
Так выглядит выдача по марке авто в приложении

Основная идея онлайн-каталога: узнать актуальную стоимость катализатора — это платная услуга. Поэтому после клика на СТА, пользователю выводим информацию об актуальных тарифных планах.


Тарифные планы появляются в виде поп-ап
Тарифные планы появляются в виде поп-ап

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


В приложении информация о тарифных планах доступна в нижней панели навигации
В приложении информация о тарифных планах доступна в нижней панели навигации

Авторизация и личный кабинет

Авторизацию реализовали в 3-х вариантах: через google аккаунт, через одноразовый код на мобильном телефоне или через соцсети. 


Окно авторизации/регистрации появляется в виде правой боковой панели
Окно авторизации/регистрации появляется в виде правой боковой панели

В приложении авторизация/регистрация реализованы отдельным окном
В приложении авторизация/регистрация реализованы отдельным окном

Функционал управления списками

Также мы внедрили инструмент, который позволяет создавать списки катализаторов или другими словами отправлять в избранное. Этот функционал удобен, например, для работников СТО, которые хотят реализовать сразу несколько катализаторов. Можно создавать несколько списков, давать им названия, делиться этими списками с другими пользователями. Причем, если посетитель уже оплатил и выяснил цены на свой список катализаторов, есть возможность выбрать: поделиться с указанием цен или без цен. Добавить тот или иной катализатор в список можно как с плитки товара, так и с карточки товара.


В личном кабинете пользователь может управлять своими сохраненными списками
В личном кабинете пользователь может управлять своими сохраненными списками 

Так выглядит функционал управления списками в приложении
Так выглядит функционал управления списками в приложении

Карточка товара с возможностью загрузки фото

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


Мотивируем пользователей пополнять коллекцию фотографий катализаторов
Мотивируем пользователей пополнять коллекцию фотографий катализаторов 

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


Скупщики также могут самостоятельно регистрироваться на сайте
Скупщики также могут самостоятельно регистрироваться на сайте

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


Быстрый доступ как к функциям продавца, так и покупателя в личном кабинете
Быстрый доступ как к функциям продавца, так и покупателя в личном кабинете

Комплексное  UX/UI решение как конкурентное преимущество

Благодаря исчерпывающему количеству входящей информации от партнера, четко поставленной задаче, нам удалось быстро структурировать всю информацию, продумать работу инструментов и создать один из самых полных онлайн каталогов автомобильных катализаторов. Релиз приложения состоялся 7 октября 2020 года и его уже скачали более 5000 раз. 

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

 
 
 
 




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.