Category Whitepapers and Guides
During the most recent client engagement I was part of, one of the most difficult tasks on the agenda was to create a product/service that would be easily manipulated depending on the customers using it. The client ECS was working with had multiple clients of its own, and therefore we were tasked with creating a product that could be used by many different clients, potentially with many different use cases. This was quite a daunting task.
In the time since then, I have spent time reading about Design Systems, so the next time I am in a situation like that, I am better prepared for designing something that can be moulded easily to many different scenarios.
I thought it would be useful to document my learnings so that a) I can refer back to them and b) anyone else can learn from them too!
One of the first jobs on any design project is the layout planning for all of the different pages of the product or service. Consistency is key in any design work. It ensures the experience is aligned and positive for the end user. It’s really important that when sketching out the layouts, similar paradigms in different instances look the same – otherwise the experience will be damaged and totally different. I found the following phrase which I think sums it up perfectly: a design system is a “just add water” solution that can be used to build products.
In short, a Design System is a set of standard reusable components and elements that can be brought together and used to scale the design of a service/product.
Firstly, Design Systems help to scale up a design process quickly. As a collection of reusable design components that have all been prebuilt, all that really needs to be done is to put the components together in different patterns. This inevitably results in faster turnarounds and helps to eliminate repetitive work.
Secondly, Design Systems help to build a shared language across product teams. And lastly, Design Systems allow the designers to focus on the complex issues at hand and not waste time on smaller problems. At ECS, what I have seen since becoming a UX designer is exactly this – the more we create reusable products, the more we can focus on journey mapping, user flows, and all of the really important individual issues that clients face.
As the number of devices, browsers, and environments continues to increase at a staggering rate, the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever. Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface Design Systems more deliberately and with explicit order and hierarchy. This is used by many organisations to embed a deliberately, minutely organised approach to the way the product/service they are offering is designed.
Unlike cobbling together design components like pattern libraries and style guides, a Design System functions as “the official story of how an organization designs and builds products.” It includes ingredients, as Brad Frost says, like design principles, UI components, UX guidelines, code standards, processes, design toolkits, code repositories, resources, and more.
I’ve learnt it is crucial to approach a design system as you would a marathon, not a sprint. You’re laying the groundwork for an extensive effort. By using a Design System to understand your client/engagement and the designs you are creating for them, it will help to achieve a stronger and more cohesive experience. This can be seen in examples of hugely successful companies, credited with incredible design experiences, such as Airbnb, and Uber, who have changed the ways they design digital products by incorporating their own unique Design Systems. They’ve also been able to change the pace of creation and innovation within their teams.
Ultimately, building a Design System requires initial effort (and needs to be maintained regularly), but the system pays off when multiple projects across many platforms emerge through the lifecycle of a product company. A major part of the heavy-lifting work is already taken care of; all that’s left to focus on is to use these as enablers to provide meaningful experiences to the users.
Lucia Gore has worked in the Digital Engineering Practice at ECS for 2.5 years on a number of client site projects, including The Times, HSBC and Vodafone. After 2 years working as a developer, she trained as a UX/UI Designer and has since been working to improve her skills in this field and deliver outstanding user experience for ECS’s clients.