H1 · Retention
Accounts keep customers coming back
If customers get an account that keeps a full history of orders and appointments, they'll return and reorder instead of starting from scratch.
E-commerce & Retail
End-to-end UX/UI
2023 · Case study
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.
About the project
01
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.
1
designer — research to final UI
2
platforms — desktop & mobile
+15%
sales after the new site & features
+35%
repeat customers after Repeat order
Case
02
Context & Challenge
Problem
The company wanted customers to do more than read about services.
Solution
The task became a system.
My role
I owned Freshride end to end as the sole designer — and set the direction every screen followed.
- Solo, full cycle. Research, information architecture, wireframes, a design system and the full UI for desktop and mobile.
- Turned research into hypotheses and a clear set of requirements the site had to meet.
- Designed the account layer that didn't exist before — order and appointment history, and Repeat order.
- Built a compact design system — colour, type and grid — so the store stays consistent as it scales.
- Partnered with product, engineering and stakeholders, scoping the UI to what the backend could realistically return.
Process
- Research
- Hypotheses
- Prototype
- UI
- Handoff
- QA
A structured flow — I formed hypotheses before prototyping, and testing sent me back into the UI.
Research · who we design for
03
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.
Adomas Puchenos
Developer · 36
Age36
OccupationDeveloper
LocationVilnius
Marital statusMarried
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.
Motivation
Be able to sign up online for auto service and buy auto products — without a phone call or a trip to the counter.
Core needs
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.
Pain points
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
Says
…
Thinks
…
Does
…
Feels
…
My conclusions for the future site
…
01
…
…
02
…
…
03
…
…
04
…
…
05
…
…
06
…
…
07
…
…
Direction · what I bet on
04
Hypotheses
From those conclusions I set testable bets — each grounded in a core e-commerce principle — and carried them into design to check with real users.
H2 · One flow
One cart for goods and services lifts orders
If a single cart and checkout handle both products and booked services, customers complete more combined orders in one pass.
H3 · Transparency
Visible prices and stock build trust
If prices, promotions and availability are clear up front, customers trust the store and decide faster.
H4 · Loyalty
Rewarding regulars drives repeat purchases
If loyal customers get a bonus discount system, they buy again more often.
Structure
05
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.
Home page
Auto services
- Filter
- Categories
- Service page
→ Cart
Products
- Filter
- Categories
- Product page
→ Cart
News
- News page
Contacts
- Map
- Feedback form
Information
- Prices
- Delivery
- Purchase
- Refund rules
- Privacy
FAQ
- General
- Delivery
- Payment
- Order
User profile
- Sign up
- Log in
- Personal details
- Purchase history
- Appointment's history
- Repeat order
- Log out
Checkout flow
Cart→Payment→Success page
The order screen holds
……………………
Real architecture — the same map, exported straight from Figma.
Foundations
06
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.
Colour
Primary
#0EA8FE
Secondary
#005B9C
Dark
#383838
Sandstorm
#D9DBE9
Grey dark
#6E7191
Grey default
#A0A3BD
Grey light
#E3E5EB
White
#FFFFFF
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.
Typography
AaPoppinsHeadings · Medium / SemiBold / Bold
AaInterBody · Regular / Medium
Display 1Freshride64px · SemiBold
Display 2Freshride48px · SemiBold
Heading 1Book a service online36px · Bold
Heading 3Your orders & services24px · Bold
Lead paragraphEverything in one account.24px · Medium
Body normalChoose services and goods, see prices, track your history.16px · Regular
Body smallDelivery details · terms · comments to the order14px · Regular
Layout grid
Desktop1440
Mobile360
Low fidelity
07
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.
Validation
08
Hypothesis testing
I put the hypotheses in front of real users — in person and remotely — because watching people move through the flows shows what a spec can't. The sessions backed the retention bets and exposed one clear friction: repeating a past order was painful. That's what led me to add the Repeat order option.
Before — what testing exposed
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.
After — the fix
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.
Result
Testing confirmed the retention hypotheses: with Repeat order and a bonus discount system for regulars, repeat customers grew +35%.
From wireframes to UI
After testing the hypotheses and refining the flows, the pages were designed.
High fidelity
09
UI design
…
01
…
…
02
…
…
03
…
…
04
…
…
05
…
…
06
…
…
Takeaways
10
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.