TwitterCopy linkArrowStretchUn StretchclutchlinkedindribbblebehancefacebookinstagramPlusMinus
Digitalization and complete UX redesign for Auto Accessory Company
Cases
Digital Transformation

May 26, 2023

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: 

  1. Working in the website admin panel was tedious. It made marketing and sales specialists spend 80% of their time on manual work instead of reaching new clients and creating promos. 
  2. The products and orders between the website admin panel and ERP system were desynchronized. That made the website maintenance difficult and resource-intensive. 
  3. Finding products on the old website was challenging for B2C users, making them leave before buying anything. 

Hence, we had two high-level purposes:

  1. To figure out which part of the operation hassle could be digitalized and make it that way. It would streamline adding new products to the website and increase the Marketing and Sales teams’ productivity. 
  2. To enter the B2C market by making the current website attractive and easy to use for B2C clients. It included providing end-users with essential features for online payment, delivery tracking, extended product search, and improved UX following the e-commerce best practices. 

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: 

  • Car dealers were interested in three things:
    • The ability to visit a one-stop-shop and swiftly choose a variety of products for many different cars;
    • For this shop to have easy-to-find certifications from car brands; - For the ordering process and installation services to be fast and seamless. 
  • Car owners that needed the following:
    • To quickly find the product that fits their car model; 
    • Be able to buy a product and install it on the car, all in one place. 

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: 

  • Business analyst â€“ conducting the situation analysis and gathering technical requirements for the website and admin panel to encapsulate the needed functionality.
  • UX/UI designer â€“ the creation of desktop and mobile prototypes of the renewed e-commerce website. It included the admin panel design to increase usability for the Auto Access team and UX improvements for users. 
  • Back-end developer â€“ working with databases and integrating ERP system with the website and admin panel to create a system that seamlessly moves info from the moment a website order is placed through to all ERP functions 
  • Front-end developer â€“ developing the front side of the admin panel and the website that users and the company team can interact with. 
  • Project manager â€“ coordinating the teamwork and communication with the client so the project could be done in time and within given resources. 

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

Process

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

old-design

New 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. 

auto-access

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: 

  • Menu navigation 
  • Table view of the database 
  • Filling information about the entity 
auto-access-auto

As for new features, here is what we added: 

  • Synchronization with ERP system, because this way products for e-commerce and workshop services were in a single database
  • Filtration 
  • Duplication 
  • Price management 

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: 

  • view B2B and B2C prices per product; 
  • have access to different microsites with exclusive products available for dealers only. 
auto-access-new-microsite

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. 

roofbag

Key takeaways from this project

  1. Integration with the ERP system should be at the beginning of the project because of the multiple technical issues it involves. 
  2. To better understand how to categorize products for e-commerce websites, we should use card-sorting with user surveys. 
  3. Before developing the website, it's better to conduct user testing - it will help us decrease controversial usability issues after release.

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!

Love the article? Share!

Read More

Explore articles from Artkai - we have lots of stories to tell

Join us to do the best work of your life

Together we advance the human experience through design.