Niche e-commerce automotive product from scratch in 4 months by Artkai team

This case story will show you how the automotive business can answer customers’ needs and gain a competitive edge in a digital-first era. We will explore the case of Artkai client QVANS and its pathway towards growing presence on the automotive market via creating a human-centric UX website. 

Table of contents:

Background

Andex, one of the largest car dealers in Belgium that have been the market leader for ten years,  approached Artkai with their new project called QVANS. QVANS is an automotive B2B and B2C one-stop shop selling special custom vans to niche experts in construction, maintenance, farming, and other fields from Belgium, the Netherlands, and France.

The client’s vision was to create a completely self-sufficient and customizable one-stop-shop where users would be able to:

The first point was QVANS’ competitive advantage. Instead of selling a limited number of standardized fabric models, it would present customers with multiple vans options that better respond to their unique needs. In one shop, customers would be able to pick a perfectly fitting their needs car, reserve it, see it in the showroom, and then buy it offline.

Our job was to make this value for the potential customers very clear.

Target Audience

The QVANS’ target audience is niche specialists who clearly know what they need to get their work done. More specifically, they need a van with precise features that fit their industry and job duties. Therefore, they will search for a particular product that will match their requirements list. 

Pains:

Desires:

Challenges & Tasks

Creating a new e-commerce website with strong UX from scratch was only one part of the equation.  The client also had a large CRM he needed to integrate with the new website to streamline the registration and request processing. Plus, they wanted to add cloud storage for storing all the images and a third-party email delivery service. 

The technical design the client envisioned consisted of three main parts:

1.  A new website and design for it;

2. External services: CRM with the existing client base and information about vans, Hubspot as an email delivery service, and cloud storage to keep all the images;

3. Middleware - a web application that serves as a database and connects the new website with the above-mentioned CRM, Hubspot, and cloud storage services. 

Therefore, we had the following tasks:

1. Create a robust UX design from scratch. The design had to communicate the company’s brand positioning and its benefits/ unique proposition from working with our client. It had to be memorable as something new and special while remaining intuitive to do its primary job - to sell. 

A part of this was creating an advanced filtering system called Digital Advisor. Instead of scrolling through the van list, Digital Adviser allows customers to select the parameters they need in a van and get the most suitable suggestions. 

2. Create a middleware to connect the new platform with the client’s CRM, email delivery service, and cloud storage.

Constraints 

When the client approached us, they already had pre-orders for vans. It made the website development a highly time-sensitive matter, giving us less than four months to finish the project. On top of that, the cooperation and all the work, including the integrations, had to be conducted online. 

Process & What We Did

Together with the client, we set up the management of all the project stages. We clarified what we need to stay within the budget and strict time limitations without losing quality. The back and front end were decided to start in the middle of the design process - it enabled designers and developers to work simultaneously, hand in hand. 

Discovery stage

In Artkai, we place great emphasis on the research-based approach. It gives us a clear picture of what will work and why, which dictates our next decisions. 

To be truly user-centric, we had to get a broad grasp of the industry, potential customers, and the project itself. That’s why the first step was conducting a workshop with the QVANS product owner and stakeholders. After that, we carried out the qualitative desk research using data already collected by the client. 

Carrying out an in-depth competitor analysis helped us explore the market and the ways competitors are dealing with it. It gave us information to base the building of our site architecture and visual presentation ideas. 

Based on the client’s collected data and meetings, we agreed upon the visual concept, prioritized the tasks and desirables, and created a backlog. 

Design & development stage

UX/UI nuances

The QVANS site has to reflect the brands it works with, and the professional occupations it may be useful for. Therefore, it must communicate trustworthiness and expertise.  From the visual perspective, we selected the Swiss International Style-oriented design, as this style has a strong association with the functionality and high quality of the product. 

We’ve created the design with the UI elements right away, going step by step by our backlog. We checked the design compliance on each step of the sprint while having internal team meetings every day. Halfway through the backlog, the development team joined our side. We’ve started with the UI for the desktop and further worked on the site’s mobile version.

We’ve built all the layouts and typography on a strict module grid, picking modular square shapes only. We referred to a brand book created by the Artkai graphic designer to distinguish the industries and brands with different colors. For example, we used orange for Building & Construction and green for Gardening sectors, light grey for all the brands, and brand dark blue for the vehicle types. For the CTAs, we’ve decided upon the QVANS brand pink color.

Also, we had a separate task - to create a set of unique branding icons. They helped to highlight and distinguish the company’s ultimate professional service gear. We kept all the deliverables in the Figma file that was shared with the development team. The additional elements like pictures or icons were delivered to the developer as separate files or archives. 

Development nuances

We’ve used the updated tech stack that enabled more flexibility for adopting new features. The technical implementation ensured easy support through the MVP content management system. That substantially decreased cost and accelerated solution development for the MVP release. 

At the same time, we’ve set a solid foundation for the future project scale within the Node.js middleware for the complex integrations with third-party solutions kile ERP, CRM, and so on. 

Technologies we used:

Artkai specialists:

Solutions we came up with

Outcomes & lessons learned

In the end, we are proud of the work we’ve done. Despite the pressing time restrictions and the fact that the whole project took place entirely online, we made it happen in four months without losing quality. We created a new venture from scratch for one of the biggest automotive sellers in Belgium. We also streamlined and automated the clients’ acquisition process and data management by integrating CRM and Hubspot into the product.

Conclusion

You can create a high-quality project from scratch in a limited time entirely online. But to make it happen, you have to work 24/7 and implement well-coordinated work and communication processes. Zooming out now, a few months after finishing the project we clearly see: the result was totally worth the effort!