Создание онлайн каталога и мобильного приложения: UX/UI кейс для специфической ниши по переработке драгметаллов
Как сложный продукт, посвященный автокатализаторам, сделать понятным каждому? Читайте новый кейс о создании дизайна онлайн каталога и мобильного приложения для специфической ниши автомобильной тематики по переработке драгметаллов.
Как сложную тематику сделать простой в интерфейсе
AutoCatalystMarket.com — компания с большим опытом в индустрии переработки отработанных автомобильных катализаторов.
Автокатализатор — это автомобильная деталь, которая предназначена для фильтрации выхлопных отходов транспортного средства, и принцип ее работы заключается в использовании благородных металлов-нейтрализаторов (палладия, платины и родия).
Поэтому отработанный конвертер можно сдать за деньги, а переработка катализаторов — выгодный бизнес. Но есть определенные нюансы в том, как и зачем перерабатывают катализаторы, а также в процессе покупки и продажи отработанных запчастей.
За годы работы компания собрала значительную базу с характеристиками всевозможных катализаторов. Эта информация могла значительно облегчить пользователям процесс идентификации, оценки, покупки и продажи этих автозапчастей. Поэтому компания решила создать онлайн-сервис, который будет выступать не только в качестве каталога с исчерпывающей информацией о катализаторах, но и в роли посредника между продавцами и покупателями.
Для этого представители компании обратились к нам с задачей продумать концепт, прототипы и стилистику как веб-сайта, так и мобильного приложения для решения таких задач:
- систематизировать всю имеющуюся информацию в виде онлайн-каталога;
- упростить для пользователя идентификацию отслуживших катализаторов;
- точно определить их стоимость;
- найти в своем регионе партнеров для выгодной продажи или утилизации вышедших из строя катализаторов.
Основной сложностью проекта было рассказать через интерфейс о сложном процессе простым языком. И вот, как нам это удалось...
Выбор стилистики: курс на экологичность
Начали работу с разработки логотипа и продумывания стилистики. В лого сделали отсылку к внешнему виду самого катализатора и зацепились за его сетчатую структуру.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3d4038f766ea30e086b57_65c14990caf04e9330a79232_image8.webp)
При выборе цветовой гаммы мы хотели отстроиться от основного конкурента, сайт которого был выполнен в зеленых тонах, и подчеркнуть преимущество компании — экологичность. Так как, по сути, AutoCatalyst помогает перерабатывать тяжелые отходы. Поэтому в качестве основного цвета взяли синий, как небо, вода, ассоциации с чистотой природы и дополнили интерфейс некоторыми элементами зеленого цвета.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3d42db1d576826b4aba22_65c1498de99faaf17bc125c7_image15.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3d48c266f7d82ef9364a3_65c1499681b47027981ed9ec_image16.webp)
Дизайн главной страницы: голосовой поиск и пошаговые инструкции
Главный элемент стартовой страницы — строка поиска, так как проще всего идентифицировать катализатор по его серийному номеру. На нем сделали основной акцент, вывели подсказку, в каком формате вводить искомые данные.
В приложении реализовали функционал голосового поиска. Пользователю достаточно нажать на значок микрофона и назвать номер модели интересующего катализатора.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3db0954d950194542cacb_65c1498fe5c248883354d8d0_image2.webp)
Для тех, кто впервые сталкивается с подобным онлайн-сервисом, с помощью кастомных картинок наглядно демонстрировали как работать с ресурсом.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3db46e2fcbadcad82d314_65c1498c9dae730c08d9db85_image18.webp)
В шапку сайта вынесли выбор страны пользователя , языка и валюты, так как компания работает по всему миру. А также актуальную стоимость 3-х основных драгметаллов, которые содержатся в катализаторах. Предоставили быстрый доступ к самым частым функциям, которые используют пользователи — личный кабинет, списки товаров и пакетный блок — разместили в правой части хедера, как элементы привычного паттерна.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3d42db1d576826b4aba22_65c1498de99faaf17bc125c7_image15.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dc6646d764e66a65c811_65c1499029a3e7a8587c6743_image7.webp)
Навигацию по сайту реализовали в горизонтальном меню в верхней части страницы. Здесь выделили еще две категории для идентификации катализатора: по марке авто и по производителю. Вынесли раздел, который помогает найти проверенных скупщиков катализаторов. Раздел, в котором можно просчитать стоимость переработки запчасти, а также тарифы, блог, ответы на частые вопросы, подробности о компании и контакты.
В приложении навигацию реализовали при помощи панели в нижней части экрана, где клик на крайнюю правую кнопку вызывает окно меню. Так как целевая аудитория больше использует IOS устройства — для них это привычный паттерн. Для устройств Android нижняя навигация удобнее чем верхняя, т.к. пользователю не нужно тянуться в верхнюю часть экрана.
Далее вынесли блок с конкурентными преимуществами компании, чтобы потенциальные клиенты понимали ценность от работы с компанией.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dc9375f6741a02db1488_65c14977393925d165e1de47_image3.webp)
Ниже вывели дополнительные точки входа для пользователей, которые мониторят цены по конкретному производителю или маркам авто:
- поиск по марке машин и по производителю сделали наглядным с иконками логотипов;
- поиск по типу монолита, с фотографиями, демонстрирующими характерные черты.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dcb94be249c4dc3c1227_65c1497a41be77d2e66f348f_image1.webp)
Страница выдачи: подводим пользователя к основной идее онлайн-каталога
Результаты поиска или выдача всегда включают в себя поисковую строку, чтобы пользователи могли быстро к нему обратиться для поиска следующего катализатора по списку. Тут важно было сделать процесс поиска бесшовным и быстрым.
Далее пользователь видит популярные модели, выбранной марки авто, и соответствующий им список катализаторов с фотографией и основными характеристиками. Уже на этом этапе на каждой плитке товара есть СТА — «Показать цену».
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dcf11c37a17ceca5e6bc_65c1498a40bf00f42afb6edf_image5.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dd39751f8b52a3a6bb47_65c149942209e5a11b2eb5c3_image12.webp)
Основная идея онлайн-каталога: узнать актуальную стоимость катализатора — это платная услуга. Поэтому после клика на СТА, пользователю выводим информацию об актуальных тарифных планах.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dd9846d764e66a66b64e_65c149945fb8a0c92bd2030a_image13.webp)
Мы помогаем пользователю определить среди нескольких пакетов наиболее подходящий, выделяя наиболее оптимальный. С помощью такого акцента на пакете можно повлиять на выбор пользователя, т.к. ему нужно будет меньше думать.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dbeeb8f9d054862bec6c_65c149922e9f845e623459a7_image10.webp)
Авторизация и личный кабинет
Авторизацию реализовали в 3-х вариантах: через google аккаунт, через одноразовый код на мобильном телефоне или через соцсети.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3ddf0515d06cdc2d42c71_65c1498e2366153c3d4fcec9_image19.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dc2175f6741a02dab6d6_65c1499321b0ba7e3ac40495_image11.webp)
Функционал управления списками
Также мы внедрили инструмент, который позволяет создавать списки катализаторов или другими словами отправлять в избранное. Этот функционал удобен, например, для работников СТО, которые хотят реализовать сразу несколько катализаторов. Можно создавать несколько списков, давать им названия, делиться этими списками с другими пользователями. Причем, если посетитель уже оплатил и выяснил цены на свой список катализаторов, есть возможность выбрать: поделиться с указанием цен или без цен. Добавить тот или иной катализатор в список можно как с плитки товара, так и с карточки товара.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3de4912973cd8ff634634_65c1498f29a3e7a8587c6698_image20.webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dfef9938c9c3e098a8db_1.webp)
Карточка товара с возможностью загрузки фото
Фишкой на карточке товара стала возможность добавления своей фотографии запчасти. Тут важно было донести ценность этого действия для ЦА, что пользователи привлекаются к генерированию контента и таким образом могут актуализировать базу и помогать другим пользователям.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3df57ee9d9907745a8925_65c14992d73720d2f7d138ed_image9.webp)
В каждой карточке товара пользователь видит доступных скупщиков, согласно выбранному региону. Таким образом, идентифицировав свою запчасть, он может сразу связаться с покупателем.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3df81aa9f4388117a69cb_65c1497829a3e7a8587c5a7d_image4.webp)
Еще одним преимуществом сервиса является то, что ты можешь быть одновременно как продавцов, так и покупателем запчастей. Для этого достаточно переключиться между вкладками в личном кабинете.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65c3dfb0ee9d9907745ad140_65c149995dff400717977fc2_image21.webp)
Комплексное UX/UI решение как конкурентное преимущество
Благодаря исчерпывающему количеству входящей информации от партнера, четко поставленной задаче, нам удалось быстро структурировать всю информацию, продумать работу инструментов и создать один из самых полных онлайн каталогов автомобильных катализаторов. Релиз приложения состоялся 7 октября 2020 года и его уже скачали более 5000 раз.
Этот кейс пример того, как хорошо спроектированное и прокастомное решение может стать ключевым конкурентным преимуществом для узконишевого бизнеса. Комплексное решение позволили покрыть сразу два канала — мобильные и десктопные пользователи, тем самым предоставить более высокий уровень сервиса.
Поделиться постом в:
Больше кейсов от турум-бурум?
Ознакомьтесь с нашим портфолио из различных сфер бизнеса.
Смотреть портфолио