Designing Systems - Not Websites

Why designing with a holistic vision helps companies get the most out of design thinking.

Posted by on 3rd Sep 2018

When it comes to design, many designers approach work on a per project basis, and this is especially true when it comes to web design. What I mean when I say “per project basis” is that designers receive work as individual projects and very rarely look beyond the scope of those projects. For instance, a designer is contracted to create a microsite for a client. The designer will create the necessary elements and layouts for that site and think little beyond how that site will interact within the greater ecosystem of the business, or more importantly, how the microsite will evolve and change as the needs of the business change.

Thinking in Systems Instead of Deliverables

In order to provide lasting value to our clients, user interface designers need to rethink their standard approach to digital product projects. Instead of thinking from the perspective of designing individual pages and layouts, a designer should develop a design language and pattern library (a design system) that will provide much longer lasting value than just the simple project deliverable. From our example above, by developing a design system, instead of just producing individual deliverables, the UI designer can provide their client both what they have requested (a micro-site) and the means to continue to expand and develop their digital presence.

An excellent resource to help design teams begin to shift their thinking is the handbook of digital design systems, Atomic Design by Brad Frost. Not to spoil the plot, but from a high level this book provides a framework to help teams develop a systems approach to design versus the more common deliverables approach.

What is the Value of Designing in Systems?

Although the upfront cost of designing a design language and system may seem daunting, it can pay huge dividends in the long run. That’s why all of the biggest names in tech use design systems, and many of them publish them online. Shopify’s Polaris , Firefox’s Photon ,and Microsoft’s Fluent are some of my personal favorite design systems.

The reason for the adoption of design systems is obvious from a business’s perspective. Design systems provide a ruleset that allows for a company to provide a consistent message and experience throughout its brand’s ecosystem. It means new employees are on-boarded quicker, and new engineers can be creating faster. From our initial example, it means that the microsite can be adapted to better suit the needs of the business and perhaps multiple landing pages can be developed and tested to better convert users to customers. This iterative design process (using A/B testing to improve landing page conversions, for instance) is greatly improved by the development of design systems, increasing the efficiency of iterations and decreasing production time. That leads to more iterations, which leads to more data, which leads to better pages and more conversions.

Start Small, but Most Importantly, Start Somewhere

Although developing a design system may seem like a daunting task and getting started may seem impossibly abstract, it is important to recognize that any journey begins with a single step. Start by cataloging your brand assets to form the foundations of your pattern library. A Pattern Library is a collection of branded elements that can be used across customer touchpoints to ensure that as an organization grows it is communication consistently. Record all the similar ways users and customers interact with your business and begin to hone a more consistent message. When developing digital components (landing pages, websites, etc.) for your brand be sure to catalogue the various interactions into that pattern library so that as your brand grows these elements can be reused.

Once established, your pattern library serves as your design team’s guidebook for how to design interactions with your customers. As your organization’s brand evolves, your pattern library should evolve as well, improving pattern library elements using data collected from testing and research. A pattern library needs to be able to change as the brand’s customers do, it is important to remember that, in the business, the only universal constant is change.

Understanding that each project that your team is designing is a piece of a larger system will help add value to each organization you work with. While the up-front cost may seem slightly overwhelming, designing a system instead of designing a single project mostly just requires a simple change in thinking. It begins with understanding what role that specific project plays in the greater scheme of the organization, and building your project to take that organization’s current and future needs into account.