Design System Case Study - The Tile Problem

Project Summary

Client: Roblox

Project Completion Date: Q1 2023

Role: Senior Product Designer - Design Systems

Problem(s): Designers are missing console/VR sizing, and product feature teams are needing product flexibility

Goal: HMW scale our tiles across to new platforms while giving feature teams flexibility to experiment?

Intended Users: Product designers, product managers, feature engineers

The Roblox app is a tile-heavy navigational experience. In late 2022 to early 2023, the company had shifted its resources to support the app on new platforms, specifically PlayStation 5 and Meta Quest VR. This presented a challenge for its design system, which, up until 2022, only supported one screen density. The first component I chose to tackle was the Base Experience Tile.

Problem #1

Roblox’s Growth and Marketplace Teams wanted a way to rapidly test different types of modular Tiles on the home page (seen here on the right), but our design system did not support all of those use cases.

 

Problem #2

Our current Tile component in Figma was only designed for one screen density. The same component was used for both mobile and web. Since we were adding Console and VR as new platforms with a new scale, product designers needed a way to prototype with both versions in Figma.

 

What Didn’t Work, and What Did

There was a rising disagreement between the design system team and feature teams over what part of the Tile component each team owned. Our original proposal on design systems was to have full control over the visual presentation and layout of the Tile. Feature teams disagreed and explained that it would cause friction for their desire to prototype rapidly.

Collaborating cross-functionally with the product managers on feature teams, iterated a new way of approaching this design problem. After innovating on this, I introduced the concept of “Unopinionated” and “Opinionated” components. Taking the long view, if this idea went well with feature designers, we knew we could bring over this pattern to other existing components in the future.

 

Solution and Execution

Unopinionated Tile

  • States

  • Background color(s)

  • Inner padding

  • Border radius, drop shadow, and stroke


Opinionated Tile (namely Experience Tile)

A common pattern built for easy discovery and placement.

  • All content, such as

    • Metadata

    • Action buttons

    • Other nested controls

  • Some styles like font size

The 2023 Tile introduced the concept of slots. The Base Tile contains unopinionated decisions, such as color and states styles. A product designer (or team design systems author) can create local opinionated components by replacing the slots with content their team needs. The Core Design Systems Team would provide the Base Tile component to product designers. Product designers can create their own local Figma components to replace inside the Base Tile component.

We executed this by creating a short Figma tutorial for feature designers, beta testing this with the one on Growth first. Feedback was positive, and feature designers looked forward to the usage of Slots in the future.

Typography Tokens

The biggest blocker for introducing a new screen density was how feature designers would consume this new “Slot” component. Our team ruminated on either building both versions of the Tile into one Figma component, or creating two separate libraries for small and large screens. We opted for the latter, since we had enough user research with product designers to prove that was a more effective framework. This also allows us to educate designers on our new typography tokens, solving the scaling problem we were trying to tackle.

Demonstrating how our type scale would work across devices.

Impact and Learnings

This project set a precedent for how components were created on the Roblox design system team. Roblox successfully launched onto PlayStation and Meta Quest VR in Fall 2023, with 10 million PS5 downloads in the first week. Slots went on to be used in Modals and other Roblox components. Using Slots as a collaboration tool between a widely different stakeholders was a valuable experience that I take into my career as a designer.

See More