Creative exercise - Designing a flow for e-commerce
Parts Wanted
or
Trying my hand at e-commerce
-
Design a shopping experience for an auto mechanic
-
Responsiveness, secure checkout, clear identity.
-
Needs to be suited towards a large data set, have multiple entry points for different types of search.
-
I like designing at the macro level. I don’t mind doing the visual or interaction design of a site, but what I enjoy the most is planning the overall experience and strategy. I think I’ve always been a ‘big picture’ guy.
Understanding an unusual design challenge
My second challenge in the Google UX Certificate was all about learning Adobe XD and creating responsive web applications. I took what seemed like an interesting design prompt at the time: Design a shopping experience for an auto mechanic.
From a process perspective it’s simple enough. It’s an online store. No biggie. And there are plenty of creative things one could do to disrupt the auto parts supply paradigm:
We could use 3d models of cars and all their parts to show where and how everything fits together, so that a user can navigate through a visual concept of the car they’re repairing.
We could have machine-learning powered image recognition to locate parts based on a photograph.
We could design a wizard that guides users through the search process, whereby they could be assured that they always find the right part
Etc.
There’s also so many visual design choices you could go with, such as making the experience more like buying clothes with multiple pictures and sleek white and black layout…
However, design isn’t just about being creative, and finding ways to make an impressive display. Fundamentally, I think it’s about problem solving. And looking at how mechanics find parts was what revealed what problems needed to be solved.
Competitors
Buying car parts online is not a new service. There are multiple retailers that provide this service and provide it well. Just serving Ireland I settled on four who approached the service in differing ways. There were many more, but mostly variations on a theme.
Ultimately this design challenge wasn’t about creating a new service, or disrupting an industry, it was about seeing what was getting in the way of the user experience. This really came down to 2 things.
Responsiveness: Only two out of the four services had responsive sites. And only one, did it well.
Search: Each of the four sites offered a different way to search for parts, usually only providing two of the three methods I outline below.
In addition to this, of course every site had its own visual style to it as well, and it was interesting to note that the site with the best visual design, also provided the best navigation experience. For honour’s sake I’m going to mention winparts.ie here. I think they’re doing a great job, and were a model in this analysis.
How do mechanics shop?
Mechanics don’t shop by image.
They’re not looking for a great shock absorber that’d match driving on an autumn day.
They’re looking for a shock absorber that will bear the weight, provide the necessary extension, and have the correct mounting fixtures for the car they’re fixing. A picture is a nice-to-have for confirmation, but really they are looking at the specifications, and they need to be able to find a part that perfectly matches the car they’re working on.
So what does this mean for the design?
Three types of search
Because so many cars exist, and there are many generic fixtures which can be used to repair them, and there may be modifications done to a particular car, mechanics need to search for parts in one of three ways:
Keyword search
Car registration search
Compatibility search by make, model, engine type, and year of manufacture.
What this means for the design is that you have three methods, which lead to two different user flows:
1
A keyword search needs to function as one might expect, and rely on product titles and the entirety of the metadata (of which there is a lot) involved. How well this works is really going to depend on who makes your search engine.
In this flow, you will be presented with the entirety of the sales catalogue. Whatever fits your query will be there, and the experience will be akin to shopping on Amazon where you will have to continuously adjust your query to narrow results.
2
Searching by registration or compatibility are two entry points into the same flow. In Ireland, each car is registered with not only its manufacturing details, but with its owner and service history. Therefore searching by registration is usually the most reliable way in which to find compatible parts.
If there is an error in the registry, then you can search by the characteristics of the car, which would give you better results than a keyword search, but could be inaccurate if you don’t have the right information.
In the second flow, you are using the metadata supplied with every product you sell to provide a limited catalogue to the user. Rather than having to search through every shock absorber available, you are only seeing the results that are applicable to your specific 2017 Kia Picanto. Searching this way will not deliver you instantly to a results page, but rather present you with a category page of varying levels into which you can explore this limited catalogue. This limited experience needs to be consistent across the site until the search requirements are changed. Meaning that if you need a shock absorber, two headlight bulbs, a windscreen wiper, and an indicator knob, the site will only show you parts suitable for your very special 2017 Kia Picanto, until you change the parameters in the filter options.
Backend is everything
Designing a service like this cannot happen in a vacuum. While we often think of the user experience in the moment they are interacting with our product or service you cannot ignore the importance of the context in which they are operating. For a project like this, designing it from scratch needs to begin with a rigorous study into the types of metadata supplied with car parts. This isn’t just about regulation, your service is reliant on verifiable and compatible parts. Hence you need to start by talking to your development team. The experience of a service like this is one that needs to be tailored towards efficient interpretations of search queries, and providing an accurately filtered experience.
Before you start on the shopping experience, you need to understand the database that is feeding it. Because those levels of categorization and compatibility are what is going to determine how you guide the user through this experience.
This design has been based on existing e-commerce site standards, and the experience provided by other auto part suppliers. I’m not sure if there is a better way to do it than by providing a filtered end-to-end (search-to-cart) experience, to suit the needs for the user.
Creating a visual identity
So how do we make a shopping experience unique? I think it’s a needs question. A boutique fashion house needs to centre the experience around the glamour of the clothing. But a site like this is completely utilitarian. It needs to make it easy to find parts, check their specifications, and buy them.
The product information needs to be of paramount importance, and the shopping experience needs to feel slick, and efficient.
I also think you need a design that embraces engineering and the expectations of the auto market. Now I’m not saying I couldn’t have done the whole site in baby yellow and powder blue, with star buttons. But when you’re looking for parts, for a mechanical device, you’re on a fact finding mission, and what is needed is something that is not only aesthetically pleasing, but factual and draws your attention to the key steps needed to advance the shopping experience.
Choosing colours
From the beginning I wanted to use a three-colour scheme that would invoke the auto industry, as seen in the bold colours of racing and in brands such as Castrol, Valvoline, or Mobil. The chosen scheme can be seen below, with a dark blue forming the primary colour and backgrounds (paired with images using black filters) and highlights are in red, and orange.
Shapes
In keeping with the mechanical theme, buttons are rectangular as well as all content containers, creating an assembly of components.
Logo and text
Using the rectangular forms I sought to combine the perspective effect of road markings, with the letter A, in a mechanical form to work alongside the textual logo set in Aharoni.
What did I learn?
This was such a perfect introduction to the inevitable but unfortunate drudgery that can come from working on UI designs every day. This project took me many hours to complete largely because of the scope of products and metadata I had to account for. Creating multiple branches for searching, and different flows for guest versus registered checkout, and third party payment options. Not to mention choosing colours and a style that not only fits the theme but is able to stand out among the many competitors that exist.
When designing for e-commerce, I think you have to try and prepare for the unexpected. You can’t always guarantee how your user will enter the site, or how they will navigate it. Having a suitable search engine that can work on similarity, and having the necessary integrations for the many types of payments that will be required are just examples of the many things that need to be considered. When designing for professional shops more functionality is needed for account payments, authorised users in company profiles, and perhaps integrations with the shop’s own inventory and inspection system.
As always, I’d need to go back to the users.