Harmony Design System





While working on the design updates for Partner Center, it became clear that we would have to develop a unique design system to support the designers and engineers who were contributing to the product. I partnered with a team of engineers who specialized in web components to develop the design system and documentation site that we called Harmony. 





UI component design guidance and code documentation.






Page flow design guidance, including clickable prototype.






Page layout design guidance.







To help teams implement design updates incrementally, I developed a grading system that included smalls groups of updates, progressing from grade D to A. As teams progressed through the updated I would organize review sessions to insure all updates were in alignment across the product. 


Results



Partner Center in it’s previous state before the Harmony design system and design updates were implemented.





Partner Center in it’s updated state after the Harmony design system and design updates were implemented.