Digitalization and complete UX redesign for Auto Accessory Company

In the following article, we will uncover successful cooperation between Artkai and Auto Access - a fast-growing automotive Belgian company that is active both nationally and internationally. Now, Auto Access is taking the next big step and expanding its services by adding parts for new car types and entering the B2C market. 

Table of contents:

Background

For over 20 years, Auto Access has been an online supplier and converter of all kinds of accessories for LCVs and Pick Ups in the B2B segment. But to boost revenues and keep the competitive edge in e-commerce, the company had to expand the range of car parts they offer. Plus, they started targeting the car owners, which was a new ground for them. 

The Challenge 

For the company to achieve its purpose, there were three main obstacles we had to combat: 

Hence, we had two high-level purposes:

Users & Audience

Before hiring Artkai, Auto Access worked with B2B clients only. But they planned to broaden their horizon to target B2C as well. 

The target users of their product are: 

Roles & Responsibilities

The task required us to do the following: gather information, create a design, develop a product, and coordinate the project. To do this, we hand-picked a team of specialists that included five roles with the following responsibilities: 

Scope & Constraints

2020 has changed many plans, and this project wasn’t the exception. One of the most influential factors for the project was the moment when Belgium went on total lockdown. 

​Download our free digital transformation whitepaper

Process & What We Did

Step 1: Conducted an in-depth workshop with stakeholders. 

We got the ball rolling by conducting an in-depth workshop with the company stakeholders - more specifically, with the CEO and Internet Marketing specialist. This step is fundamental because it helps us better understand the problem, target audience, and task context. 

Step 2: Gathered, analyzed, and shared all the technical information with stakeholders and our team. 

Collecting, analyzing, and sharing critical business and technical requirements for the admin panel and website was our business analytic task. These requirements are vital for determining the scope of work, planning further actions, and synchronizing all the team members. 

Step 3: Decided what technology stack we will use. 

Deciding what platforms and frameworks to use to replace the old jQuerry and PHP the old site was built on was critical. Replacing the old tech stack was necessary to make the system open for adding new features and increasing the size of the project in the future. 

After a thorough analysis, we unanimously selected the Angular framework for the front-end jobs and Node for the back-end. Right after choosing the platforms, our back-end developers started creating a single database, connecting entities, and synchronizing with the client's ERP system. 

Step 4: Conducted in-depth competitive research among automotive e-commerce sites in Belgium and Netherlands.

This research was imperative to make a superior product on the market. It gave us strategic insights into the features, flows, functions, and feelings evoked by the design solutions of the competitors. 

When we had the results, we conducted a UX audit of the current website and examined data from Google Analytics to see what areas were underperforming and had to be improved. This data-driven approach helped us to substantially enhance the user experience of the new website.

Old design

New design

The research and audit helped us understand what design meets both audiences’ needs: dealers and end-users. 

Step 5: Created a design prototype for desktop and mobile website versions. 

First, our UX/UI designer started by creating prototypes of the Admin panel. To speed up the design and front-end development processes, our designer used the Ant design library of components. 

Some elements of the previous Admin panel were decided to be left as they are as we didn’t want the changes to affect the behavior patterns of the admin. Those elements are: 

As for new features, here is what we added: 

Thanks to our previous updates in the technology stack, we saved the company a lot of money and time on these improvements.

As a result of the upgraded design, dealers now can: 

As for the end-users, we added functionality that enabled them to easily find, buy, and install products for different car models in one website session. We reduced the initial problem with entangled search, which helped car owners smoothly navigate the website and make it to the purchase.

Previously, the company had to involve third parties to develop microsites - brand sites for official dealers. Now, marketing specialists, without wasting time and money, could add microsites from the admin panel by simply adding a brand color and font, logo, and choosing the font’s color. We customized it so that the car brand color matches the color of the main interaction elements on the website and the universal color for secondary elements. 

Key takeaways from this project

Conclusion 

The end result of the project was just how we planned it to be. We modernized all the processes in the admin panel for Auto Access employees and created an attractive and easy-to-use website for B2B and B2C audiences. But even though we reached the goals and the result was satisfying for our client and us, there are a few things we could have done differently. Along the way, we gathered valuable lessons that will help us to optimize our efforts in the future. Contact our team if you are interested in similar projects!