vLink reworked

This Case Study covers the B2B Shop for the UK based company vGroup International or to be more precise, the vLease Brand inside it. vLease is the Top UK provider of new vehicle packages for major lease firms, covering passenger and commercial vehicles. These include items like First Aid Kits, Ice Scrapers, Safety Vests, but also printed License Plates and branded covers for the documents stored in the car.

vGroup contacted us to solve one of their main issues in their B2B platform. The User Experience in it is nerve-wrecking and most importantly takes a lot of time. In our first contact with vGroup they claimed it would take around 5 minutes for one order. More on these numbers in a bit.

First steps

After we were provided with access to the platform, we tested it thoroughly. The user journey looks as follows (sadly there is no better way to present this on medium):

Take a look at this original user flow:

Looks quite long, doesn’t it? Well, for now, we take it as it is and analyze this flow with some data. We got access to the company’s Google Analytics, which was not set up except the added pixel. In there, we rebuilt the user flow to see where the actual users went.

We got to some very interesting numbers:

First, the basics, which seem natural:

• the user base is mainly between 35 and 60 years old
• they use desktop computers for 99.5% (since they are in the office)
• they use 49% Microsoft Edge and 48% Google Chrome

Cleaning up

Now for the Flow. Remember these sections from the original user flow?

This is how the user base is distributed in these decision diamonds:

The users spread among these choices like this (excluding other possible paths like the cart, the account section or manually opened links):

What does this mean? We have two pages in the original flow before you even get to the product selection, which are completely unnecessary. These steps can easily be removed and the selection of categories and item types can be moved to a filter module in the item selection.

One more part of this flow can be removed, since this information can be stored in the user profile:

With these changes, we reached the point where every good webshop starts: the landing page is the product overview page. (Of course, since this is a B2B store, it has a mandatory login beforehand).

We removed a lot of steps from the process already. We will cover the main section of this project after just one more info which also explains why it is the main section.

Data Analysis II

Back to Google Analytics. Since it is not set up properly and does not contain any triggers, flows or snippets on the page, we have to rely on general information. In the following graph, it is visible how much time the average customer spends on certain parts of the flow:

The top two pages are part of the main flow which every user has to go through. These already count for over 16 Minutes. For ordering a standard package, which every user of the website has probably done a dozen times already, because it is basically the same for every car he is selling. The overall average time we calculated accounted for 19 Minutes per order.

So, naturally, these two sections of the shop have to be optimized to reduce the time spent on the site drastically. What are these sections about?

The “minor evil” is this step of the checkout, the delivery details:

It actually looks pretty solid, except the input fields always being beneath the “collect in person” radio button and therefore confusing as if this is the actual, used address or not (it is). But it is actually really not intuitive to use this section. When an alternative address is selected, this is entered in the same input fields and can also be “saved”, which only happens after continuing to the next step.

The real issue is this section though, and it needs a little explanation since a lot is happening here, and parts of it are actually crazy complicated.

What you are doing here is

1. Enter the license plate of one of the vehicles you order the package for
2. Select what branding the pack has to have (depends on the end customer). Here you have around 40 brands to select in a dropdown.
3. Next you can add another package but only through a dropdown with the code of the package itself, without preview image or description.
4. You can repeat this step for each license plate you add.

How to solve this?

So the first question is: why don’t they just use a working shop system like Shopify or Shopware, which do have B2B solutions?

The answer to this is that this platform in fact was once a groundbreaking innovation since it is connected to the UK-wide leaselink network and is also interconnected with the whole manufacturing process.

So it has to be solved using the platform at hand. Since we only had two weeks for this project, after understanding the original platform, we very quickly decided on a feature prioritization through the MoSCoW Method and focus on the product overview and product detail pages. So we started by removing steps that are obsolete and now have to solve the painstaking license plate & branding assignment.

The result of the changes we already decided was the product overview as a start page, which already makes a big difference since users can directly select or filter their desired product. One pain point here was that the original platform did not have a detail view of the packs. You had to identify by the preview image if the items included are what you need.

We decided to create a product detail page for each product, where the assignment of brands and license plates also takes place. We considered a quick view option for the product details but ditched this after research showed this to be a bad solution for products with more detailed product information (which the license plate and branding selection is). Read more about this at the Baymard Institute:

Avoid "Quick Views" for Spec-Driven Product Types (21% Don't)

Product Selection

So the first part of selecting your product (or pack in this case) is to browser for it in the product overview. In the ideation stage, this part was simple because there are tons of webshops all with this same concept.

This element basically stayed like this until the high fidelity prototype.

On the Product Overview, we introduced this new element called the “Top Bar”, where the user is able to preselect the brands he is ordering for. This way, the user can get the problem out of the way before even looking for the packs he needs. This element was changed and improved through several iterations, but the overall idea was set from the start.

The positioning of this element was decided after looking at different shop solutions and especially an article on a horizontal filter, where this heatmap indicated a good spot. It was separated from the product grid because it has no effect on this and should lead to confusion.

Since the list of possible brandings is quite long, we did some research on how to make this more accessible. We found this awesome extensive article on usability of multi-selecting from a long list by Zina Szőgyényi:

Improving the usability of multi-selecting from a long list

The key finding in her research was this:

When it comes to unfamiliar items it’s better to visually expose the items instead of hiding them. It’s even better to do it in a logically organized way: create groups with meaningful titles, and let the users zoom in to the groups they are interested in.

This element itself underwent some iterations (adding the search bar and scrollbar for better handling), looked like this in the high fidelity prototype.

Product Configuration

When a pack is selected, the product detail page includes what you expect: an image gallery of the elements of pack, as well as a short description and the pack prize.

What follows this is the most important part of the refined webshop: the module to assign plates to brands.

What’s happening here?

• On the left, the brands the customer previously selected are listed
• If the customer forgot one or made an error, he can open the brand selector again on the bottom of the page
• In the middle section, license plates can be added manually or in a comma-separated list.
• The plates can be corrected when clicked on them or removed again.
• On the right, the price per brand and overall price is calculated (not active in this preview image)

Checkout

The checkout section was not touched that much, except for one additional step. Our client claimed that many orders actually had errors in the license plate numbers, which led to the customers having to reorder because it had to be printed again. To avoid this a license plate validation is now mandatory where users once more can edit, remove or reassign license plates to brands.

Now I want to show you the improved flow which includes all of these elements

If you look closely, you might discover one optional shortcut from the product overview to the cart. It is the CSV upload section, which is part of the brand selector element. There you can upload a preformatted CSV file with PackID, Branding and License Plates already set, which will get processed and get you straight to the basket.

Design

While there are existing guidelines from the client regarding the general Corporate Design, there was a lack of thought out web design elements. We went ahead and created a set of tints of the vLink blue color which was set and some additional colors which already were there.

For the buttons, we adapted the main shape used in the vGroup logo, the Crest. Its rounded edges are perfect as a button shape:

Wireframing and Prototyping

The prototypes went through two sessions of usability tests with 5 testers each, all experienced users of the original platform, one concept test round and one for the high fidelity prototype. The learnings from these were very helpful for a lot of details to be changed, mainly focussed on UX writing and System Messages/System Feedback, and on the other hand proving our solutions very useful.

Click here for the working prototype and try it for yourself.

Here I covered some Techniques used for this prototype with Figma Variables.

https://medium.com/@kevin.drescher/prototyping-with-variables-in-figma-97ece6337e26

KPIs

Some plain numbers to sum this up:

In the original flow, as mentioned before, the average time to complete a purchase was 19 Minutes. In several user tests, we concluded the average time with the improved flow and functionality would sum 4 Minutes to complete a purchase.

In the original flow, customers would need to click through 6 Pages until an item is in the cart. In our improved flow, this is done within 2 Pages.

The process of adding plates is simplified a lot as well. On average, 30 clicks are needed to add 11 license pates in the original flow. In the improved flow, this takes merely 13 clicks.

Next Steps

All of the above just covers a rebuilt product overview and product detail section. These have to be finalized through further usability tests and iterations. Other sections of the platform have to be rebuilt as well, as the only briefly mentioned new account section and others.