The importance of Design Systems

on

Reference to: https://www.toptal.com/designers/ui/ui-styleguide-better-ux

One of the greatest challenges that designers underestimate, especially novices after graduating is the importance of having consistent interfaces, interactions and workflows throughout a piece or family of software.
In small exploratory projects, one might tend to get lost into the details and slightly forget about the way all the tiny pieces will work at some point, in a larger ecosystem. It was only when I started working for a corporation that had a large number of products, based on different technologies, with different purposes and markets, different users and stakeholders that I realized how crucial consistency on a large scale is. I was oriented towards the earlier stage of design: concept creation, ideation and prototyping creating a while this challenge forced me to deep dive into the UI pixel level design.

Consistency had to be ensured throughout all places in a product: from UI elements and behaviors, to the help pages that were created in collaboration with technical writers. There were three main aspects that I had to take into account, being in charge of creating and maintaining this system:

  • Ensuring that we cover all the elements from a styling and interaction perspective
  • Making sure that these are validated with internal and external users
  • Convincing development teams that the system does not constrain them in creating new products

Creating the System
First of all, the existing applications were broken down into atomic elements, based on the Atomic Design framework ( by Brad Frost). This allowed myself and the team to find the core common components that formed the basis of all interfaces. It all started to make sense: A user’s experience of pressing a button, an input field or selecting a dropdown option must be the same, regardless of the product used. This opened a great path for creating consistent larger components that contained all the basic ones.
All the components were documented by including clear and visual do’s and don’ts, usage examples, alignment importance, contrasts and combinations. We had to clearly define primary colors, borders, radiuses, behaviors and animations. I worked in Adobe XD and Illustrator for the page, component and icon designs and used Axure or After Effects to present animations, interactions and larger workflows. Together with a few developers I pushed the need of using Zeplin as well, to quickly generate CSS styles for new components.

UI for a better UX
In the beginning, stakeholders were skeptical about having an atomic design system for all our products. I ensured them all this UI work will lead us towards a better, more coherent user experience for our customers and it was indeed the case. A small example that I can share is the fact that people knew how to navigate through any software in the family. We implemented clear, consistent navigation panels and workflows, adapted to all products’ specific needs, while keeping them similar, as part of the same family.

Flexibility
It all came down to showing developers, product owners and architects that this system is not constraining. The main argument that I’ve always used was simple: why spend time in figuring out all the possible table interactions (the most difficult component I had to design and document) when you can use the existing research, design and code to at least start from a consistent experience. The framework is still in use and is surely evolving.

This is the extremely short version of the entire process that does not include the amount of reworks of paper sketches, diagrams, XD, Illustrator, After Effect and Confluence pages. I also excluded the way we worked with the research findings and patterns idetified in the field, or the processes that were created along the way.

As difficult as it was I learned crucial lessons and I feel confident enough to start working on large or small scale projects. I now feel empowered to bring my out of the box ideas, to a feasible, consistent and realistic level that can be presented to users, developers and internal experts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s