Defining patterns

Define a pattern based on the problem it solves, not on the way it looks.

Start with the purpose

Understand the purpose of a pattern first. Is it designed to trigger an action? Reveal additional information? Highlight content? Consider how it's different from other patterns it can be confused with. For example, what is the purpose of a tabs pattern and how is it different from navigation, segmented control or a button group?

Do an audit

Audit similar existing instances based on the purpose. Be mindful of things that look similar but have different purposes.

Define pattern

Define the pattern based on its purpose, not on the way it looks. A pattern's name should also reflect its purpose.

Test it in existing products

Try your proposed design across different products and contexts. For example, consider how it might be used on the Marketing site, in Bulb account, in the Join flow and the native apps. What would need to change as a result of introducing this pattern to the system? What would it affect?