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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

‍

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

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

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

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

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

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

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

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

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

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

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

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

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

‍