Designing Components: Tiles

Anabel Leva
2 min readMar 17, 2023

My Role

I led the evolution of the single-use tile component into a flexible, multipurpose pattern.

Deliverables

  • Audit of the tile pattern across rogers.com
  • Create a tile pattern that allows designers to fill it with the content they need
  • A Sketch component for popular tile use cases

The Problem

Before adopting a Design System, Rogers treated each product like a snowflake, resulting in dozens of different solutions solving the same problem.

An audit of the tiles on Rogers.com
An audit of the tiles on Rogers.com
  • 60+ legacy tile designs
  • 32+ visual tile styles
  • 3 common use cases: products, plans, and learn

The First Version

Our original tile was actually a card designed within a bubble; by an agency. The entire card was clickable, making it difficult to support additional links, and was only designed for a single use case.

Original tiles designed by the agency
Original tiles designed by the agency

The Contribution Model

Thinking of the Tile as a pattern rather than a core component alleviated a considerable amount of bloat and cross-team alignment.

By following some simple guidelines, any designer would be able to take the Base Tile and create a variant to suit their use case.

Creation of the tile as a pattern
Anatomy of a tile

This allowed designers to create unique tiles that worked together as a system.

Tiles created from the new pattern
Tiles created from the new pattern

The UI Library

All components added to the Sketch library were built to be effortlessly flexible. Designers could drag a component into their document, quickly scale it across columns or breakpoints, add or remove elements, and change the content via overrides.

Creating a layout with the product tile component
Create a layout with tiles in seconds
Quickly modifying the product tile components
Editing components to create pages

Thanks for reading!

--

--

Anabel Leva

Multidisciplinary Product Designer from Toronto, Canada.