Case study · 2026
ode
A tile gallery, rebuilt as a website.
Client
OdeCeramic Pte Ltd
Year
2026
Deliverables
UX/UI Design, WordPress & WooCommerce Development
Location
Singapore
200+ tiles. One system to find them.
01 — The brief
An online store is built for things you put in a cart. Tiles aren't one of them. People choose them by size, finish and explore by spaces. With WooCommerce underneath, we built everything a visitor touches around browsing and enquiring.
02 — Designing with tiles
01 / 04
Scattered pieces
A catalogue starts as hundreds of products with no order. Our design job was to give them one, the way a tiler sets out a floor.
02 / 04
The grid is a tile
Every layout sits on a square module. Product cards, images and spacing all snap to it, so the site itself reads like a laid surface.
03 / 04
Details at a glance
Every product card shows the tile’s size, body, colour and finish right under its photo. Visitors can compare tiles across the grid without opening a single product page.
04 / 04
A palette from the kiln
The UI colours come from fired clay and raw porcelain: a warm terracotta brown and a soft cream. Any tile colour sits comfortably beside them.
01 / 04
Scattered pieces
A catalogue starts as hundreds of products with no order. Our design job was to give them one, the way a tiler sets out a floor.
03 — Custom feature
The Lookbook
We built a lookbook system from scratch. ODE's team uploads a styled photo, drops pins on the tiles in it, and links each pin to a catalogue product. Visitors tap a pin to see exactly what they're looking at, then go straight to it.
04 — Built for discovery
Customizable Filter System
We built the filter system to be shaped around the business, not the other way round. Any product detail can become a filter, whether it's something broad like a room or as precise as a technical rating, and ODE's team can add new filters themselves as the range grows. Filters work together, show how many results each option will return, and load results in place without reloading the page.
Built to grow
New filters, from colour swatches to specialist specs, can be added as new ranges arrive.
Spec-rich cards
Size, material, colour and finish on every card, so nobody has to open a product to compare.
Wishlist on every tile
One tap saves a tile for later, right from the grid. Fully integrated with YITH WooCommerce Wishlist.
What we built
01
Lookbook with pinning
Room photos with pins the client places themselves, each linked to a live catalogue product.
02
Catalogue with enquiry
Visitors build an enquiry list instead of a cart and send it to ODE in one step.
03
Extended product grid
A custom grid that goes beyond the default WooCommerce one, with richer cards, enlarged photos and in-place loading.
04
Customizable filtering
A filter system that can be built around any product detail and expanded as the business grows.
05
Wishlist
Save tiles while browsing and come back to them later, integrated with YITH WooCommerce Wishlist.
06
Appointment booking
A direct path from browsing online to a visit at the Bain Street gallery.
07
Accessibility & language toolbar
Display and motion settings plus translation, so more visitors can use the site comfortably.
08
AVIF imagery
Glaze detail at a fraction of the file size, so the catalogue loads quickly.
