Once all the building blocks of the system are built, tested, implemented, and accepted by product designers and developers, you can start building up the patterns.
This is the task that will never end. Patterns should always either reflect the truth about the product, or reflect the aspirational state of the product in the near future. Products constantly evolve and so should patterns in the design system. Don’t aim at finalizing all the patterns in a single sprint or even a series of sprints. Take them one by one and make sure they are implemented by product teams so you can gradually correct all the inconsistencies and increase the speed of product development.
-
Decide the best architecture for the patterns in your design system
You can use different models of architecture, or create your own. A popular way of organizing patterns in a system is http://bradfrost.com/blog/post/atomic-web-design/. At UXPin, we’ve divided our patterns into elements, components and modules, which reflects the modular architecture of our front-end code. No matter your naming convention, make sure the architecture is modular and vocabulary is understood by the design systems team and the product team.
-
Choose one pattern you’ll work on during this sprint (example - button)
-
Make sure that the pattern is using the correct color, typography, iconography etc. Make changes if necessary.
-
Review the code. If necessary, make changes to make sure that the component rendering the pattern is fully encapsulated and can be implemented in any part of the product.
-
Review the code again. Make sure that all the coding standards are given justice. Make changes if necessary
-
Ask members of the design system and developers working on the product for a code review
-
List all the patterns that are going to be replaced by the pattern in the system
-
Consult product developers and designers and see if there are any suggested changes
-
Implement the pattern on a test server and thoroughly test with designers and developers from the product team
-
Finalize the pattern
-
Add pattern to your design systems documentation
-
Document the usage and implementation guidelines
-
Test the documentation with members of the product team to make sure that everything is easy to %understand
-
Make sure that the pattern is available in design tools used by product designers (Sketch, UXPin)
Make sure that the pattern is easily accessible from design tools used by your team (UXPin, Sketch….). For this project, I used UXPin's Design System Libraries to save these patterns as symbols.
