Smart UX/UI Design for Automotive Recycling: AutoCatalystMarket Story

How to develop an interface for a complex web product devoted to catalytic converters that would be accessible to all users. Read our new case study and get to know how we designed an advanced online catalog and mobile application design for a niche of automotive precious metals recycling. 

Automotive UX/UI solutions: how to make complex things easy to grasp in the interface?

AutoCatalystMarket.com is a company with extensive experience in the recycling industry of used automotive catalytic converters.  

A catalytic converter is an automotive component designed to filter vehicle exhaust emissions by utilizing precious metals such as palladium, platinum, and rhodium. Considering the value of these metals, used converters can be sold for profit, which makes catalyst recycling a profitable business. However, recycling as well as buying and selling used parts has some peculiarities that need to be considered.

Over the years, the company has compiled a significant database with the characteristics of all kinds of catalytic converters. This information greatly facilitates the process of identification, evaluation, purchase, and sale of these auto parts for users. Therefore, the company decided to create an online service that would act not only as a catalog with detailed information about catalytic converters, but also as a platform that connects sellers and buyers. 

To this end, the company representatives applied to Turum-burum to develop a concept, prototypes, and UI design for a future website and mobile application that will:

• present all available information in the form of an online catalog;
• allow users to quickly identify used catalytic converters;
• accurately determine the price of the converters;
• find partners in your region for profitable sale or recycling of broken catalytic converters.

The primary challenge of this project was to convey a complex process through the interface in simple, user-friendly language. So, how did we manage to do it? Read it below…

Opting for a web product stylistics: going eco-friendly

We started our work with logo and UI development. We designed the logo to reference the appearance of the catalyst, focusing on its grid structure.

When selecting the color scheme, we wanted to differentiate our client from its main competitor, whose website predominantly used green tones, and highlight the company's main advantage — a commitment to environmental sustainability. Given that AutoCatalyst specializes in heavy waste recycling, we used blue as the primary color to evoke associations with the sky and water, symbolizing purity and nature. To further emphasize the company’s eco-friendly focus, we also incorporated some green elements.

Homepage design: voice search and step-by-step instructions

The main homepage element is the search bar, since the easiest way to identify the catalytic converter is by entering its serial number. So we emphasized it and displayed a hint telling people how to type their query. 

We also implemented the voice search feature in the application. The user just needs to click on the microphone icon and say the model number of the catalyst they are looking for.

We added the horizontal menu at the top of the page to enable easy navigation through the website. There, we also enabled two additional search categories for catalyst identification: by car brand and by manufacturer. The page features a section that helps to find reliable catalytic converter resellers. Below users can find a block where they can calculate the cost of recycling a chosen spare part, look through the tariffs, read the blog, find answers to frequently asked questions and company contacts.

We designed the app's navigation placing the panel at the bottom of the screen — click on the rightmost button and the menu window will appear. We have chosen this model since most of the company’s targeted audience uses iOS devices and this pattern is more familiar for them. For Android owners, the bottom navigation will be also more convenient than the top one, since users won’t need to scroll to the top of the screen.

On the homepage, we introduced additional entry points for users who monitor prices for specific manufacturers or car brands: 

• While searching by car brand or manufacturer, customers see logo icons for better visualization;
• Users can search by monolith type and see photos showing characteristic features of the item.

Search results page: helping users understand the main idea of online catalog

We designed the search results and listing pages with a visible search bar that allows users to quickly navigate to the next catalyst on their list. The implemented design ensures a seamless and efficient search experience, which was pivotal for the project's success.

Then the user sees popular models of the selected car brand and the corresponding list of catalytic converters with their photos and key characteristics. Each product preview contains a clear call-to-action (CTA) button “Show Price,” inviting users to explore pricing details.

The main idea of the online catalog: if you want to find out the actual cost of the catalytic converter, you need to pay. Therefore, after clicking on the CTA, users will see the information about the current tariff plans.

We help the user to choose among several packages the most suitable one by emphasizing the best option. By doing this, we can influence the user's choice, as they will have less time to think.

Creating and managing the lists: available features

We have also implemented a tool that allows users to create their own catalyst lists or, in other words, add items to their favorites. This feature is convenient for workshop workers who want to buy or resell several catalysts at once. You can create several lists, give them names, and share these lists with other users. If the customer has already paid and found out the prices for his list of catalysts, he can share the products with or without specifying their prices. You can add a catalyst to the list either from the product preview or from the product card.

Product card with photo uploading function

A new feature on the product card was the ability to add your own photo of a spare part. In this case, it was important to convey the value of this function to the target audience so that users were involved in content generation and could update the database to help others. users.

On each product card, the user can see the available dealers according to the selected region. Once the user has identified the needed part, he can contact the seller immediately.

Another advantage of the service is that you can be both a seller and a buyer of spare parts at the same time. All you have to do is switch between the tabs in your personal account.

Automotive niche: UX/UI design for gaining a competitive advantage

Thanks to deep insights from our partner and a clearly defined task, we efficiently organized the data, optimized our tools, and developed one of the most comprehensive and convenient online catalogs for automotive catalytic converters. The application was launched on October 7, 2020.

This case study shows how a well-designed, customized UX/UI design can become a key competitive advantage for a business in a specific niche. Our comprehensive approach effectively addressed the needs of mobile and desktop users, thereby enhancing the overall user experience and service quality.