Multiple ways into the catalogue.
Search, categories and promotional groupings support shoppers with different levels of intent.
E-commerce website · 2024
RNB online store
An end-to-end retail system connecting discovery, catalogue browsing, product evaluation and the path toward purchase.
- Role
- UI/UX and website design
- Ownership
- Journey, interface system and responsive direction
- Evidence
- Home, catalogue and product-detail designs
- Boundary
- No validated analytics or user-testing data
Problem
A complete store, not a single polished screen.
The work covers the connected states an online shop needs: category navigation, search, product grids, product details, cart, account and supporting service pages.
I used familiar commerce patterns so customers could concentrate on choosing products instead of learning a new interaction model.
Consistent product information.
Cards use repeatable image, category, price and action patterns to support faster scanning.
A visible transaction path.
Account, cart and checkout states stay connected to the same visual system.
Product thinking
Design the connected states, not only the storefront.
The key design responsibility was continuity across different levels of shopper intent.
A campaign-led home page can create interest, but the system must still support catalogue scanning, product evaluation and expected transaction actions.
Discover
Connect promotion, navigation, search and category entry points.
Evaluate
Keep imagery, naming, price and product information predictable across the catalogue.
Act
Maintain visible account, cart and purchase actions without crowding every screen.
Journey architecture
One system across four levels of intent.
The structure follows the decisions a shopper needs to make. Each level adds detail without changing the basic interaction language.
- DiscoverFind a relevant entry point.
Campaigns, search and categories support broad or specific intent.
- BrowseScan products consistently.
Repeated image, name, category and price patterns reduce relearning.
- EvaluateUnderstand one product.
Details, imagery and purchase actions move into a clearer hierarchy.
- CompleteKeep the transaction expected.
Account, cart and checkout follow familiar commerce behaviour.
Design tradeoffs
Familiar where trust matters. Distinctive where brand matters.
The store needed a recognisable brand without making routine shopping actions unfamiliar. I used brand expression in campaign imagery, colour and typography, then kept core commerce behaviour conventional.
Navigation
Use expected search and category patterns instead of inventing a branded interaction model.
Catalogue
Keep product cards quiet and repeatable so comparison stays efficient.
Actions
Reserve the orange accent for navigation, selection and purchase priority.
Responsive
Preserve information order as layouts collapse from desktop to mobile.
The available archive demonstrates the designed journey and interface system. It does not provide evidence of user testing, release parity, conversion uplift or sales impact.
From campaign-led home page to structured catalogue.
The orange brand colour signals key navigation and purchase actions while a quieter layout gives product imagery and pricing enough room to work.
Delivered evidence
One retail language across the journey.
A connected home, catalogue and product-detail system.
Reusable navigation, product-card, price and action patterns.
A responsive commerce direction with documented interaction logic.
Commerce works when the next action is expected.
The project reinforced the value of convention. Search, price, categories and cart actions need strong hierarchy, but they should never compete for attention at the same moment.