top of page

Tiles

An incremental migration of our dashboard tile design to correct accessibility concerns, ensure we have a scalable framework for designs, and gap fill missing variations.

Role

Design lead

Strategy & Coordination
UX &  Visual design
Content production
Figma Component Creation

Team

2 Interaction designers

2 Co-op students

1 UX Researcher 

Scope: Spanning 2 quarters. The research, stakeholder feedback and review cycle on this task was hefty. 

Risk: Migrating an existing component, especially one with a lot of parts can negatively impact on users if not done thoughtfully.
 

Concerns: While the changes will be picked up by our primary products and Common Code Libraries, we still have a number of products who develop based on our Design System patterns and guidelines but don't use common code. When we have products with dashboard integrations we have no control over which design language version they are using, so it is possible to have a single dashboard view that shows tiles from across the versions. To mitigate the total impact to users we opted for an incremental migration approach.

Process: Gather feedback from relevant stakeholders, this meant meeting with each product designer who supports a product that has Tiles within their UI. Having a good understanding of the multiple uses cases across the companies offerings is essential to ensure the Design System team doesn't limit the capabilities of a component. We then ran an audit on the component and identified any cascading issues from other elements that have been updated recently or issues that we could potentially cascade out. 

Outcome: Tiles are now more robust with better detailing for responsiveness, page layout, wrapping and truncation and we addressed accessibility concerns within the Filtering feature. We also expanded our tile variations, now offering both Light and Dark options in 2 primary themes: Bright and Light, each theme has 6 different tile types (Hero, Shortcut, Action, List, Count, and Analytics), and each type can have a variety of internal layouts and features, including error states, empty states and drag and drop functionality. 

Retrospective: Overall we achieved our goal of overhauling our previous offering of Tiles. From a Figma standpoint I'd love to go back in and adjust the components to use Props, as it will make using the components easier for designers. We still need to do a full QA to ensure we have a clean RTL experience. 

So many count tiles_edited.png

Figma components

 

Figma components, including all states and interactions, are built as interactive variants. 

Note: These components were created before the addition of Component Props in Figma. 😔

header_components.png
tile-search.png

Search

​Search is an essential part our products. An ongoing issue within our search is the duplication of the "X" icon with different outcomes. When a query is entered into a search field an "x" appears to clear the search term and an "x" is always visible to the right of the field to collapse our slide-in search fields. This is both a usability and accessibility concern. 

 

As part of our updates to the Tile component we also scheduled updates for our Search component. Despite being a filter on Tiles we treat this stylistically the same as a search input, as it is the same to the user.  

 

We ran both moderated and unmoderated usability studies, to determine how users execute search and determine if an icon is needed to collapse the search box.
 

bottom of page