Milta: Auto-repair e-commerce experience
Time: 1 month internship project
Problem: The client wanted a webflow to advertise a new product launch, + a revamp of their Home and About Us pages
Target users: This client was a specialized Volkswagon body shop, mostly selling to other mechanics + car enthusiasts
Scope and constraints: Limited by time and cost - client did not want too spend much on development
Outcome: Delivered designs to client, product launch postponed
Designing an Auto Repair E-Commerce Experience
This was my first client project as a designer (intern) at Futuresight. For this project I focused on creating a product landing page and e-commerce checkout experience for a new product set to launch by the end of the year.
This client was unique - they were mechanics who specialize in Volkswagon cars, and their target customers were other VW mechanics + enthusiasts. Certainly not anything I had prior experience with, but I was up for the challenge!
4-Phase Project:
Discovery - get up to speed on project, product, and client
Sketch, design wireframes, and wireflows
Incorporate feedback and design a mockup
Conduct usability tests and share findings
Phase 1: Discovery
To kick off, I needed to understand the client, the new product, and the project’s history. To do this I did a few things
Had a hand-off call from the previous designer, familiarizing myself with their deliverables, including user research, personas, and user flows.
Got up to speed on the product - this client was an auto-shop dedicated to Volkswagon cars, and their target customers were other auto shops + car enthusiasts
Worked with PM to determine MVP for my assignment: product landing page and purchase checkout flow
Through conversations with our PM + Design Lead, we came up with three "How Might We" questions to guide the project:
How can we effectively market and sell their new product?
How can we create a profitable e-commerce experience for customers?
How can we communicate the client's unique role as leaders in their niche?
Phase 2: Sketch, Wireframes, and Wireflows
With the MVP established, I sketched initial designs, focusing on an engaging sales funnel and product page functionality (add to cart, leave a review). The previous designer had started on some wireframes leveraging a UI kit, so I took over their work to complete the flow.
After finishing the wireframes, I gathered feedback from my team and iterated based on their input.
Phase 3: Prototype
After incorporating feedback, I moved to med-fidelity designs. My preparation included:
Reviewing the existing style guide and entering it into the Figma library.
Analyzing competitors in the auto repair e-commerce space.
Designing the first screen and confirming alignment with team expectations.
I designed with the client’s evolving product in mind, allowing flexibility for changes as features develop.
Phase 4: Usability Testing
I conducted unmoderated usability tests using Maze.co, asking participants to complete tasks such as:
Adding the VAGS Pro+ computer to their cart and checking out as a guest.
Creating an account to check out.
Signing in to check out.
Maze's reports provided valuable insights, including heat maps, misclick rates, and average time on screens. Analyzing the results, I identified themes such as user navigation challenges and common misclicks.
Conclusion and Next Steps
In this project, I learned about the client and their product, designed wireframes and a high-fidelity prototype, and conducted usability testing to identify issues. Moving forward, I recommend the following next steps:
Develop UX Writing: Collaborate with the client to create effective catchlines and storytelling for their product.
Design "My Account" Pages: Address subscription management, allowing users to view, cancel, or renew subscriptions.
Establish Customer Communication: Design end-to-end communication processes, including confirmation emails and shipping updates, to enhance user experience.