Topps Tiles

Client

Topps Tiles

Role

UI/UX Designer

Sector

E-commerce

Year

2025

Responsibilties

  • Led research and stakeholder workshops
  • Created and managed shared design systems
  • Solved complex user flows (e.g. split baskets, stock messaging)
  • Produced high-fidelity prototypes

The Challenge.

The Topps Tiles project involved designing two separate ecommerce experiences: Trade and Retail, powered by a single shared design system. Each site had distinct audiences and user needs. Trade users prioritised speed, efficiency and account functionality, while retail customers expected inspiration-led browsing and a more guided path to purchase. This contrast made the system design especially challenging, requiring components that could flex across both use cases without losing clarity or brand alignment. On top of this, we had to solve for complex stock messaging logic and implement split baskets, allowing users to mix delivery and collection options in a single transaction with clear communication throughout.

Topps Tiles - Trade.

Built for speed and clarity, the Trade site focused on streamlined ordering, account management and tailored pricing - all delivered through a flexible design system that supports complex features like split baskets and live stock messaging.

Topps Tiles - Retail.

Designed to inspire, the Retail site focused on helping customers explore ranges, visualise products in context and navigate with ease - all while maintaining consistency with the shared system behind the Trade experience.

The Outcome.

The final design system balanced flexibility with brand specificity, enabling both Trade and Retail sites to share a common foundation while maintaining distinct visual identities and user experiences. For Trade users, complex functionality like split baskets and nuanced stock messaging was made intuitive and efficient. On the Retail side, we elevated the brand feel, making tile discovery more inspirational and shoppable. The modular system has already proved its value — streamlining future rollouts, reducing dev time, and ensuring consistency across a growing digital ecosystem.

Case Study

Sanderson- Redefining a Heritage Brand

View project
site designed and developed by me
site designed and developed by me