Blog, 22 Mar 2019

Solving problems with design systems

We have introduced our new App Styler. It will enable clients to configure the style of their apps using a powerful web tool. At the centre of this tool is our intelligent design system which breaks down the styling of our client’s apps into elements and components and governs how they are used across the […]

Marketing

What exactly is a design system?

A design system is a collection of well-documented reusable components, copywriting guidance, and instructions on how to contribute to the design system with the intention of improvement. When properly developed, companies can easily and quickly manage and iterate their design systems at scale.

The problems being solved

Very often, designers within the same company, but with varying levels of platform knowledge, will work together on the same product. Unfortunately, this difference in knowledge can introduce inconsistencies and unpredictability into design output. With a design system in place, you can ensure everyone is on the same page through the documentation and review processes.

Without a design system, a central record of elements and components, the speed at which designers work can be inefficient and slow. Without a central record of elements and components, two designers on separate teams might end up creating duplicate work, or re-creating a component already created by a colleague on a different team.

With a design system in place, collaboration between teams within a company will drastically improve as it is used by junior designers and even non-design job roles. The beauty of the design system is its specification of guidelines and processes for the production of components. Junior designers or non-design colleagues will be able to utilise the rules and regulations to independently build publishable applications without the assistance of the designers. Additionally, they will also be able to collaborate on improving the overall design system, with the oversight of a design system maintainer.

Poq’s intelligent design system is an essential part of our mission to make app commerce bigger than ecommerce. With the system in place, building an app can seem a far less daunting task. Utilised through the App Styler, the design system will significantly reduce the workload of designers and developers on the Poq platform.

The solution

At Poq, we’ve created a central design system, with sub-systems for iPhone, and Android products. It is made up of external contribution guidelines, roadmap based releases, the various elements used to build components, and the rules that guide their usage. Some of the elements include colours and fonts which come together to build components such as buttons and products. Ultimately, the assembled components are applied to the app’s various screens such as onboarding, checkout, and more.

To enforce the design system, and bind everything together, we created the above-mentioned design system rules. The rules provide a blueprint of the outcomes when an element or component is changed. Additionally, they outline whether other items in the design system are impacted by the change, which items would be impacted, and how they would react. For example, if a primary colour base is changed from blue to red, based on the rules, all other lighter and darker shades of those colours will automatically adapt and change as well. Without this rule, shades would remain blue and/or the user will need to manually change each of the shades with the specific knowledge of how much lighter or darker each variant needed to be.

With the design system in place and by maintaining consistency, this example and many other incongruous and time-consuming changes can be avoided.

The positive outcome

Each of our 30+ clients will be able to develop and adopt their very own design system based off of the Android and iPhone design systems. Through the use of our App Styler, they will be able to customise the design system for their own needs without developer or designer intervention while achieving high-performing results.