Designing Components: Tiles

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

• 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

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.

Anatomy of a tile

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

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.

Create a layout with tiles in seconds

Editing components to create pages

Thanks for reading!