Tips for auditing UI

It's useful to do a UI audit when trying to get a lay of the land. For example, when creating a new form component, it's useful to see what's currently in use and find the answers to the following questions:

• What variants do we have currently?
• What are the current use cases?
• Are there any bespoke implementations?
• How will this be used in the future?

Some tips:

• Screenshots are really really really helpful, and they're probably the best tool for documenting.

  • Big screenshots are useful for providing context
  • Focused screenshots are useful to highlight differences
  • Screenshots eliminate the need to document some things (e.g. where this variant is located)

• Use a tool like Figma, rather than a doc

  • This helps prioritise the information, leave annotations, etc.
  • Helps to see things side by side, rather than a scrolling page

• Create a board that documents the different variants and how they differ

  • e.g. if the typeface/size is different, document it!
  • This is the bread and butter of the document, the rest is useful for providing context

• Disable extensions/non-default colours

[[design]] [[designsystem]] [[engineering]] [[figma]]