The Process

Start with a Mock

• Break the UI into a hierarchy

• Single Responsibility Principle

• Think in terms of Information Architecture

• Atoms first, Molecules second

Component Hierarchy

1. FilterableProductTable: contains the entirety of the example

2. SearchBar: receives all user input

3. ProductTable: displays and filters the data collection based on user input

4. ProductCategoryRow: displays a heading for each category

5. ProductRow: displays a row for each product