Introducing a design system to • January 2017 - Present

When I first joined as a designer, it was a company of only twelve people. Since the product was young at this time, the top priority was to ship features quickly over establishing processes and systems.

Problems when scaling

With developers heavily focused on shipping features quickly, this led to the creation of many “one-off” UI components solving for siloed problems, while the overall structure and interactions of pages were left as an afterthought. As the number of features grew, there was an increasing amount of overhead for the design team when adding new elements to the UI. It was difficult to naturally expand the library of UI components and incorporate new elements in a holistic way due to the lack of structure. Components were built as unique elements, as opposed to being part of a larger system of reusable elements and patterns, which lead to inconsistencies between components, eventually leading to usability issues.

The problem was pronounced by the constant support emails asking about how to use the product and where to find features. The lack of structure and consistency hindered the user’s ability to understand, learn and predict patterns of usability.

Implementing a design system to solve the problem

A design system is a collection of reusable components that are assembled to build a cohesive interface, guided by clear standards. The implementation of a design system would be the solution to Smile’s consistency problems. It allows designers to create and iterate on designs more efficiently by reducing the need to think about minor details and focus on the user’s experience and gives developers the ability build with reusable components, thus extending the design system in a repeatable and scalable way.

I strongly advocated for the use of a design system, and ultimately played a key role in implementing a design system on top of Shopify Polaris. This allowed the team to utilize Shopify’s research and resources as a starting point to create a system we could evolve over time as we extend and modify the system to meet the needs of the product.

How Flipp got to #1 on the App Store