Design Systems are Coming to the Enterprise. Are Your UX Teams Ready?
On May 25, 2010, Ethan Marcotte wrote a defining article titled “Responsive Web Design” that has quite literally helped to form the present and future of what we do and how we do it as Creative and Interactive Designers and Front-End Engineers. Not only individually, but even more importantly, in how we interact and work together as teams.
Design systems break the mental model of approaching the design and development of a website as the next step in print design. The visual appearance of a website begins to be considered in weight and reusability, rather than just look and feel.
This can be jarring to many visual designers, I imagine. Suddenly, there seem to be constraints where there once were no constraints. And while that may be true in some circumstances, it’s exactly the opposite in others.
Design Systems Can Set You Free
Imagine what you actually have is a single canvas to do with what you will. Imagine if you will, silly putty (hey, this isn’t old school hard line div’s people).
That is what a design system gives you. The space to create something that can grow and flex. To design something that has life. Something that responds to scenario and situation. Design systems give you building blocks to build an infinite array of designs. Building blocks can be pretty cool. Need a different block? Design one. ☺
Design systems do make Creative & Interactive Designers a bit more difficult in ways.
Rather than thinking of things as pages, creative & interactive designers now have to consider things as collections of components that can be placed together. This affects the creative designers more, I’d imagine, but I could definitely be extremely wrong there. (Please let me know if I am)
While this can be easy to grasp mentally, execution ends up being a bit messy and more difficult than expected. And the questions that end up coming up often get centered around deliverables because they are suddenly and radically changing.
No longer are we building static, 960px wide web pages. Today, we are in an age of building web applications. That shift is coming to the enterprise already, and will continue to grow as enterprises continue to be educated on the fact that moving to design systems actually make things more efficient, reliable and provides their customers with a better overall experience.
Sure, we can still create a wireframe. But why?
Sure, we can still create a visual comp. But why?
Now, we can work together in ways never before to have a continual, living, work in progress.
Kill the Wireframe & Comp
With tools like Zeplin, Macaw and Adobe’s Edge Reflow the lines between creative and interactive design, and front-end development begin to get extremely blurry.
All of a sudden, folks who lived in Photoshop are in a tool that is producing HTML, CSS & JavaScript. That can be a scary proposition for a Front-End Engineer, let me tell you.
For those Front-End Engineers who may be afraid, don’t be. Pardon my soapbox for a moment. We should wake up each day and look for the problems that are placed in front of us that we can solve. Solve those. There will be problems in most of our lifetimes that will require our puny human brains to creatively think and solve. Building web applications may be programmatic but there is much art and creativity required to construct things appropriately. Be the best you can be today, each day, and you’ll be fine. Okay… sorry, if you knew me, you’d know I just talk like that sometimes.
These modern tools create an opportunity to do away with old technology. Now, we can collaborate together to create reusuable components that can be shared on the website, but also between teams. These components speed up new designs, new page creation, and allow creative and interactive designers to step into the life of the web and out of the paint canvas of Photoshop.
These modern tools give us the Work in Progress.
Educate on the Work in Progress (WIP)
The Work in Progress is the future (and today, really) of wireframes and visual comps. The Work in Progress can give an accurate representation of just how an application or site is going to behave and respond base on a wide number of devices and situations.
Not only that, but these works in progress can be built up and torn down in rapid fashion for experimentation because they are built on existing components. You only need to consider the piece you need to design. Stop thinking about what’s already been solved.
Where does Design stop and Development begin?
This Work in Progress naturally creates the follow along question. Now that there is so much HTML and CSS in the world of Creative and Interaction Design, where does that code stop and Front-End Engineering’s code begin?
Who controls those standards?
This is where the blending of Front-End Engineering and Front-End Design becomes a critical piece in collaboration in the enterprise.
Due to the nature of the enterprise, it can be very hard to integrate true, collaborative pipelines where reusable standards can be applied. Usually, teams are running so fast on project work, that these new design tools and systems just don’t have the same priority right now.
Unfortunately, that notion cripples organizations from seeing the true potential of the teams that they have within their various locations.
By blending Front-End Design into Creative and Interaction Design, you immediately create a bridge between the Creative and Interactive teams and the Front-End Engineering teams.
It’s not easy and requires risk takers
In a corporate world, this is no easy feat. There are stakeholders to talk to. Executives to convince. Managers to motivate. Budgets to approve. Business cases to write, etc, etc, etc.
However, for those who are willing to blend their teams appropriately and embrace standards and reusability there is an opportunity to lead what I believe is the future of UX enterprise team collaboration and workflow.
