If you’ve been in product management for a while, you’ve probably worked with designers who will use the terms: design framework, UI framework, UI kit, or pattern library. Basically, they are all the same thing: a systemized approach to creating, managing and maintaining the design standards, templates, UI patterns, and components that are used in the product UI.
At the highest level, most product managers have probably scraped the surface, and created a minimalistic framework by creating a number of “symbols” in Sketch to reuse without recreating while working through wireframes. This efficiency as well as solving additional issues is why entire departments adopt design frameworks.
The main issues solved by design frameworks, how to go about building a design framework and the required components in a design framework is laid out in this article.
So… What is a Design Framework?
User interface design starts with a blank sheet of paper. Designers layout the basics and eventually translate that into a design in an artboard. The process of creating the design involves creating every component (color, shadow, font, size, etc). As the interface is built out each of the components come together to be a part of the cohesive whole.
This work is tedious and repetitive. It is made easier, driving efficiencies, by creating and organizing all the components and interrelated patterns into an overarching definition of use and intent – a framework.
A framework solves common issues all product managers have witnessed while driving a project:
1. Product Design inconsistencies
2. Communication and delivery problems
3. Late PDLC changes to the Product Design
Solving Product Design Inconsistencies…
You know when you see a well designed product – a product that is both functionally intuitive and beautiful to the eye. One of the major reasons you find it beautiful and intuitive is because it is consistent.
As a user, I don’t want to get lost while navigating the product workflows because the button on this page doesn’t look like the button on the previous page, doesn’t, doesn’t… fail.
POCD
Most importantly, when users run into inconsistencies, they will often simply discredit the product – whether it’s an app, a website, a SaaS product, a car’s dashboard… have you driven a 2014 Honda Product?
Inconsistencies are often driven into the product by product managers or other stakeholders. I have witnessed it – a design review meeting where a designer is making ad hoc changes to the design to quickly show what those changes would look like. After the meeting is over, the designer is left with a signed off design that has a mixture of components – which were signed off and which weren’t?
Design frameworks solve this by standardizing all the components.
Solving Communication and Delivery Problems…
During the PDLC, when there are multiple stakeholders involved in the design, it is possible for one designer or pm to make a change to the design that isn’t a final design component. When this is done absent a set of standards, the team can become confused as to what is what.
Also, a design framework will boost collaboration and streamline communication and handoff. Developers will no longer have to drop what they’re doing to figure out which button is the correct button.
Solving Late-Stage Design Changes
Have you ever looked over your friendly designer’s shoulder while he has PS or Sketch or “name your poison” open? There are 100’s of artboards open, minimized or windowed across their monitor. A stakeholder walks up behind them in T minus… and says “can we make a change to the flux capacitor”. The designer opens one of the many artboards and shows you what it would look like. You reply, “Excellent… let’s go with that.”
Here’s a secret… your friendly designer just envisioned murdering you, unless they have a design framework, but maybe even then.
The design process is a cycle which means change is inevitable – it’s how the product improves – but it often happens later than designers would like. A design framework creates a library of object-oriented components that once changed ripple throughout the entire design.
Product OCD 