Freshride: Auto service
A full e-commerce experience for an auto-service and auto-parts company — accounts, orders and online booking in one place.
I took the project end to end — research, information architecture, wireframes, a design system and the full UI — so customers can book a service, buy parts and follow everything from a personal account.
Freshride
Freshride is an auto-service company that also sells auto products — from routine maintenance to parts and accessories.
Their site was little more than a brochure. The company wanted to grow it into a real store, where customers can register, keep a history of their orders and services, buy goods and book a service online. My job was to design that experience end to end — from research through the final UI — as one coherent system rather than a set of loose pages.
Context & Challenge
The company wanted customers to do more than read about services.
The task became a system.
I ran the project solo, end to end: user research and a persona, information architecture, wireframes, a compact design system and the full UI for desktop and mobile — then validated the flows with prototype testing and reworked what tripped people up.
A classic UX flow — but every stage fed the next, and testing sent me back into the UI.
The person behind the orders
Before touching layouts I built a persona from the target audience — a busy professional who lives online and runs his life around his car. Every later decision was checked against him.
A successful programmer planning to open his own company and go international. Always online, often works from home, lives on apps and online services. Spends free time with family and friends — often travelling by car.
Be able to sign up online for auto service and buy auto products — without a phone call or a trip to the counter.
Choose services and goods on the site, see price ranges, learn about promotions, and keep a personal account with a history of purchases and appointments. Sign up online for a service and have goods delivered.
Today there's no way to keep a history of orders and services — and no way to book a service online or buy goods at all.
Empathy map
…
…
…
…
My conclusions for the future site
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
Information architecture
The persona's needs turned into a map: what stays available everywhere, and what lives inside the store and the account. This is the skeleton every screen hangs on.
- Filter
- Categories
- Service page
- Filter
- Categories
- Product page
- News page
- Map
- Feedback form
- Prices
- Delivery
- Purchase
- Refund rules
- Privacy
- General
- Delivery
- Payment
- Order
- Sign up
- Log in
- Personal details
- Purchase history
- Appointment's history
- Repeat order
- Log out
Design system
A small, deliberate system so the new store stays consistent as it grows — colour drawn from the logo, a two-family type scale, and a responsive grid.
Blue reads as calm and trustworthy — professionalism and stability, a natural fit for a business site.
Grey is neutral and versatile: depth without distraction, used for signature text and secondary elements.
White is clean and minimal — the background that lets everything else stand out.
Dark blue & near-black add a more formal weight and create contrast for the elements that matter most.
Wireframes
I laid out every key page in low fidelity first — structure and flow before colour — so the architecture could be pressure-tested cheaply, then carried into prototypes for testing.
Prototype testing
I chose user testing because time was limited and it shows firsthand how people actually use the product — where they stall, what they miss. It was run both in person and remotely, and it sent me back into the UI.
In the account's purchase history, orders and appointments were shown together. To repeat one, users had to go back to the catalogue, find the same goods or service, and add them to the cart all over again.
I split orders and services into separate categories — matching what the backend could actually return, so each showed fuller, cleaner information. And I added a Repeat order button that sends the whole list straight to the cart.
After testing the prototypes and improving them, the website pages were designed.
UI design
…
…
…
…
…
…
…
…
…
…
…
…
…
Reflection
Not flashy, but easy to follow. A proven, methodical structure that presents information clearly — easy to understand, hard to ignore. For a store people use to run their car, that reliability was the point.
Taking Freshride from a brochure site to a full store, solo, taught me to hold the whole system in view — architecture, states and edge cases — while keeping each screen simple for the person actually using it. Testing, not taste, decided the last round of changes.