Designing an Auto Repair E-Commerce Experience
For my Industry Design Project (IDP), I interned at a UX agency, where I designed and tested a prototype for a client in the auto repair industry. The project took me 4 weeks (~40 hours) to complete and was my first experience as a designer at a real company.
As the only designer on the project, I designed an e-commerce checkout experience for the client, who is releasing a new product to the market by the end of the year that they plan to sell on their website.
4 Phase Project:
1.
Work with stakeholders to establish MVP
2.
Sketch, design wireframes + wireflows
3.
Incorporate feedback + build hi-fidelity prototype
4.
Conduct usability tests + synthesize findings
Phase 1: Establish MVP
Before beginning the project, I first had to understand the client, the new product they are developing, and the history of the project. There were a few nuances that I had to consider during this phase:
-
I was taking over the work from 2 previous designers and building on it to finish the project. This meant I had to familiarize myself with the deliverables they had produced and understand where the project needed to go from there. User research, personas, and user flows were already complete.
-
This is a niche and highly technical industry that I had to gain a working knowledge on, fast. The product is a diagnostic computer for mechanics who repair certain types of cars. To understand the product and client, I had multiple calls with stakeholders and the agency's head of design.
I then worked with one of the previous designers to establish the focus of the project. We decided that the checkout flows and product marketing page would be the main deliverable, because that is the core functionality needed to sell the product.
To guide the project, I developed these 3 How Might We questions:
How might we effectively market and sell the new auto repair product on the client's website?
How might we create a profitable e-commerce experience for the client and customers?
How might we communicate the client's unique role as leaders in their niche to website visitors?
Phase 2: Sketch, Wireframes + Wireflows
Examples of my early sketches - you can click the image to zoom.
With the scope and MVP established, it was time to start coming up with some lo-fidelity designs.
First, I sketched out some ideas on pen and paper. I knew I wanted an attractive sales funnel page that could bring potential customers in from search engines. I also sketched out ideas for the product page - how to incorporate things like add to cart, change the color, leave a review, etc.
For the checkout process, I created wireflow diagrams so I could easily share my ideas with the team and get feedback.
Example of a wireflow diagram that I shared with the team. You can click on the image to view a high-resolution image (will open in new tab!)
My goal was to break down the checkout process into logical steps and that users were not overwhelmed with too many input fields at once.
I also made sure these wireframes adhered to NN/g usability heuristics, like visibility of system status and matching mental models of the real world.
After finishing the wireframes, I asked for feedback on my designs from others at the company, and iterated the designs based off that feedback.
Phase 3: Hi-Fidelity Prototype
Screenshot of the clickable prototype - click the image to open in Figma (will open in a new tab).
After incorporating the team's feedback, it was time for hi-fidelity designs and building the prototype.
First, I prepared for this process in 3 key steps:
1.
Reviewed existing Adobe Xd style guide & entered to Figma library
2.
Studied other websites in the auto repair e-commerce industry
3.
Designed 1st screen + got feedback to confirm I was on the right track
I also had business considerations that had to be taken into account. The client's diagnostic computer is still under development - meaning they have an idea of what subscription levels and features will be included in the final product, but it is still a work in progress.
I had to design a solution that took into account their broader vision while allowing room to change as the product develops.
Once designs were complete, I got feedback from the team again, then iterated the designs accordingly.
Phase 4: Usability Testing
Screenshot from the unmoderated usability test - first task. This was conducted via Maze.
I set up unmoderated usability tests on Maze.co. Maze is a frequently-used resource at the agency, and I was recommended their services by my supervisor and design mentor.
This round of usability testing was simple - I asked participants to complete the following tasks:
-
Add the VAGS Pro+ computer to your cart, and checkout as a guest.
-
Add the VAGS Pro+ computer to your cart, and create an account to checkout.
-
Add the VAGS Pro+ computer to your cart, and sign in to check out.
Participants also had an opportunity to add feedback at the end of the testing session.
Example of a heat map screen provided by Maze.
Once 5 people responded to the survey, I started analyzing the results.
A great feature of Maze is that it auto-generates a report for each task in the usability test. These reports are quite detailed, and include information like heat maps (see above), misclick rates, bounce rates, and average time spent on a screen.
To synthesize my results, I systematically reviewed the report from each user and each usability task. I took detailed notes on relevant findings, such as bounces, frequent misclicks, as well as notes from user feedback at the end of the session.
Ultimately, I discovered the following themes from my research + findings:
Conclusion + Next Steps
For this project, I familiarized myself with the client and learned about their new product; I designed wireframes and wireflows of the checkout process; I built a hi-fidelity prototype in Figma; and I conducted unmoderated usability testing to identify any usability issues.
I would recommend the next steps to tackle to continue improving the client’s website:
-
Develop the UX Writing for the website. In order to effectively sell the product, the next step for the hi-fidelity designs will be to work with the client to develop the catchlines and storytelling for their new device.
-
Design “My Account” pages and subscription management. This is not something I was able to do given time constraints, but this will be a critical next step - how do users view subscriptions, cancel/renew, etc.
-
Establish communication with customers. Designing the end-to-end communication process: i.e. confirmation email, email updates when order is shipped, etc. will be important for a high-value product like this.
The majority of misclicks / bounces occurred on the product landing page
Users with an existing account need a way to save their information
More testing on UX copywriting is needed