Retail · Web design
Meridian Express
Groceries sell on appetite. The homepage should too.
- Role
- UI/UX Designer
- Tools
- Figma
- Year
- 2023
- Ecommerce storefront: search, cart, delivery
- Loyalty program built into the navigation
- Full token system handed to developers
The brief
Meridian Express sells groceries online, to your home door: the hero literally says it, n’derë t’shtëpisë. Groceries are bought on appetite and habit, so the page has one job: make someone hungry, then make ordering and returning effortless.
Underneath that appetite led surface, this was the most systematic build of the set. The first project where the design was assembled from named tokens rather than decisions made one by one.
Decisions
A token system, not a set of screens
Colour lives as Primary 1, Primary 2, Secondary, Complementary, Gray Scale, Background Elevation and Warning. Type is Title and Body. Elevation and border are effect styles. Every screen after that is assembly, and a developer inherits names instead of hex codes.
Appetite before information
The hero leads with food photographed close and warm. A hand reaching for fruit, a full grocery bag. Produce sells produce; a promotional banner never would.
Offers that survive a redesign
New arrivals, weekly offers and testimonials are built as repeating patterns fed by the same components, so the merchandising team can change the contents every week without touching the layout.
Two text styles and seven colours. The constraint is the system.
Architecture
Structure first. Screens second.
- Search
- Cart
- Logo
- New arrivals carousel
- Brand promo frames
- The food corner, category menus
- About the store
- Loyalty program
- Registration, the return path
The path
- 01
Tempt
Diagonal green hero, produce spilling from the bag, and one line: to your home door.
- 02
Discover
New arrivals row surfaces what just landed in store.
- 03
Browse
Category menus split the range into how people actually shop.
- 04
Trust
“What customers say about us” carries real social proof.
- 05
Return
Loyalty and registration entries make the next visit the default.
Red route · step 02The weekly offer is the engine. The layout exists to surface it.
The system
Only two text styles exist in the whole file. A display Title for section headers and hero lines, and a Body for everything else. Two styles is a constraint, and it is why the layouts stay calm while the photography gets loud.
Hero slider
Rotating full bleed food frames carrying the week's headline offer.
Product tile
One tile, fed by the token set, used across new arrivals and category rows.
Elevation & border
Two effect styles doing all the layering. Cards never invent their own shadow.
Testimonial row
Customer quotes as a repeating pattern under the merchandising blocks.
The screens
