How design systems can enhance creativity in cross-functional teams

Design systems and designers always have had a love-hate relationship. You can argue that design systems will add more restrictions to a project or a feature and don’t leave much room for creative exploration and expression. Not to mention restrictions from user experience patterns or operating systems giving the impression that all apps and websites look the same.

At Undo, we disagree. On the contrary, we use design systems as a framework to create more room for creative exploration and actually stand out from the crowd. Let me dig into how we do this.

Let’s go down memory lane for a bit:

Startups are known for rapid change, pivots, and in general a lot of chaos. Undo is no exception. Together with an ever-growing team, designing things on the fly became less and less sustainable.

It became more challenging to keep all the stakeholders in the loop but more importantly, get the right design feedback at the right times. Not to mention all the context switches that came with it in between. So, as someone that needs a lot of structure to be able to think clearly, I identified the need for a clear design process.

Based on the 5 planes of UX, I started to structure all the steps it takes to go from a wild idea to a functional and user-friendly UI with structured design critiques and user testing in between. This process helps us now to translate abstract ideas into very concrete UI components. Jesse James Garett introduced this framework for web design but it has been applied in the industry to all platforms in digital product design.

In hindsight this was both a good investment in terms of process and practicalities, but more importantly it created a common language across all stakeholders involved in a project.

Design critiques are held with all stakeholders and the design process went from being a backbone to steer our design projects to a cross-functional tool to ideate and execute all our features. The high cross functional involvement might seem a little controversial in some design teams, but has proven to be very valuable in terms of the further development of our features. The extensive involvement of stakeholders allows us to stay ahead of technical, legal and operational challenges we inevitably face in the insurance industry.

But as the product team grew in engineers and the pace went up again, our design process still served as a good foundation. However, things needed to be cut short and more compromises were made for the sake of speed. Lack of time for co-creation, user testing etc forced us to only use the bare bones of our process and the design team (still only consisting of 2) had to cut corners to be able to keep up. Design quality dropped, the feeling of ownership dropped and the overall team spirit dropped. Not good.

We needed to work smarter, not harder.

First off, it was time to revisit our design system. We already had one set in place, but as the product grew it made sense to add our new components so we could ensure a consistent user experience without too much effort within the short timeframes we had to produce.

Alongside new components, it was also a great time to update our existent components with Figma’s new auto layout and responsive features. For more about this you can have a look at one of my previous articles about design systems.

Furthermore, it allowed us to spend less time on repetitive designs and more time on the touch points that matter. This is exactly where the psych curve comes in.

The psych curve

The psych curve, or psych framework is a user psychology framework used to increase conversion. Darius Contractor introduced this framework at Dropbox, and we picked this up after seeing how it can also be applied on other products and flows such as Air BnB’s onboarding flow. In a nutshell it is an assessment on how “psyched/motivated” users are in each step of a flow. It could be an onboarding flow, a purchase flow, or any flow in a product. Apart from it being an assessment tool, it can also be used as a benchmark to improve on the touch points where the psych drops.

When we first started applying this framework, we quickly realised that the moments in the flows with the highest psych differences are often touchpoints that require extra resources — in other words, touchpoints that are expensive to design and/or build.

Just like the Pareto Principle we experienced that with the design system in place, we started using 20% of our time on 80% of the functional user flows of the feature and 80% of our time on specific high-demanding touchpoints. It became clear that the design system was actually working and was giving us more time and space to explore and experiment.

So together with the Psych curve, we saw the potential of this combination and started using it as a way to steer our process and estimate our time.

Introducing the creative assessment

The creative assessment is a moment in our design process where we map the 80–20 rule to the psych curve and decide where to spend most of our resources.

The earliest we can do this creative assessment is after the wireframes are set in place. By this point, we have a grasp of the user flows and flow charts in detail and are able to identify touch points or specific screens that need that extra attention.

After the assessment, we can then define what will take 20% of our time and create 80% of the outcome but also what would take up 80% of our time and only contributes to 20% of the outcome.

Apart from resources and psych, the actual impact or value of a certain touchpoint is a third variable to keep in mind while doing this assessment.

• How often are users exposed to this touchpoint?
• How much does this touchpoint contribute to the overall user experience?
• How important is the content of this touchpoint for the user’s product IQ?
• What happens before and after this touchpoint?
• Is there any user data that we can use to know more about the touchpoint and to assess the value of it?

The above questions can help with making this evaluation. In case you are talking about an edge case that less than 1% of your users will be confronted with, it might be worth reconsidering spending 80% of your resources on this particular case.

This assessment is usually done together with our engineers and is often followed up by a sketch session, where we explore different ideas and directions together. The goal is to have clear aligned expectations on what is functional and done by the design system and what will require some more creative and/or technical exploration.

Conclusion

This might all sound like a little much, but after investing in a design process, a design system and this framework, we are experiencing some unexpected outcomes. First and foremost, we are working smarter and more efficiently. For the first time we feel we have some breathing space in our small design team. We are able to deliver, work collaboratively and be creative at the same time without compromising on quality, like we did before.

Secondly, we are more aligned than ever with our engineers, resulting in working more in parallel and fewer context shifts. But what I enjoy the most is the common language we created, which comes in handy for design critiques and ideation sessions.

Lastly and most importantly, we feel we have the time for creativity and experimentation. The design system works incredibly well, saving us and the engineers plenty of time, giving us the room to explore, play and experiment which eventually leads to better results and a higher team spirit.

So, if you or your team are still convinced that a design system will take away the fun out of designing, I hope this article can give you another perspective on how it can also help you to bring the fun back.

If this topic interests you or caught your eye, I’m very excited to announce that I will illustrate this theoretical framework with some real-life examples from Undo during my talk at Design Matters.