I led the evolution of the single-use tile component into a flexible, multipurpose pattern.
- 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
Before adopting a Design System, Rogers treated each product like a snowflake, resulting in dozens of different solutions solving the same problem.
- 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.
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.
This allowed designers to create unique tiles that worked together as a system.
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.
Thanks for reading!