Last week, I explained what design systems are. This week, I discuss their importance before I dive into detail on how to design them next week.
When building a product, the benefits of thinking of it as a whole system are great.
Each piece that makes a product function lives alongside one another. Planning helps to prevent ambiguity, maintain consistency, branding, and accounts for human expectations. Consistency throughout the system contributes to these, and so does consistency between devices. Laying out all elements and architecture from the beginning can also help with scaling. This is why design and development partnerships are so important and why designers should have some technical knowledge of platforms they design for.
Say they wanted to add a new feature that required a few new links in their navigation systems and some controls in an existing area. Since they have a system to work from, they already know generally what the visual aesthetics look like. They also know how it the system may interact and what type of feedback it is able to give users. That allows them to jump right into the problem they are trying to solve. The team can now optimize the experience into the life of a user.
Common questions to ask in this phase could include:
Where is a user located when they are accessing this feature?
What phase of finances are they experiencing in their life?
How will content affect their emotion and ease their fears?
How can we ensure users know this new feature is available?
If Mint didn't have a system to work from, they may feel like they are starting from scratch for each project. Even if they try to match what exists, there could be a mess of technical debt required to unwind make it happen. Or, it will take a long time to build in the existing system. It would also be confusing because it’s forced in and not integrated well (yes, this happens in the real world). This debt sprouts in the most well-planned systems because of the nature of agile methods and reacting to learnings. Mitigation is essential to keep it under control. Not only is it expensive to redesign a system that wasn’t planned with flexibility, but changes to your interface can be scary to users.
System thinking is human thinking. Designers of interfaces are like translators.
Interfaces help humans interact with technology. A well-designed system makes this seamless, and technology more powerful and accessible. Without an interface for a non-technical human to interact with, only technical folks would have the ability – drastically minimizing enhancements to society and business. The thought designers put into a project means users don’t have to think as hard. When hired for a design, considerations to reduce confusion and humanize technology are paramount. For example, parallels are often drawn between analog experiences when the audience needs it. This puts less cognitive load on a user that’s trying to navigate a system to complete a task.
Design Systems Enhance User Experience
When planning comes together, a system can be rewarding to use. This is the ultimate goal of any project. Though an experience is more than just an interface, I think that interfaces can be a catalyst of interactions and enhance lives. Systems can be welcoming and reflect not only the tone of the product but the user’s needs. A human should not feel like they are working for the technology. We need more systems that feel like they are working for us. Use of smart technology results in less work to complete tasks, less cognitive load and more time back.
Time is invaluable. Designing smart systems and interfaces shows respect for other people.
A cohesive system should be beautiful, but still fall into the background. I think users should have surprise moments of delight ("ooh I didn’t expect that fun animation or personal touch!") but they should also not have to notice or think about how great a system feels. Smart systems assist users at the right places and get out of the way to empower people.
Components of a well-designed system
Last week, I outlined considerations for designing systems. The list included: Big-picture thinking, details, scaling, system-specifications, interaction, feelings and emotion, visuals and animations, business goals and user goals. The outcome before the system exists is some sort of deliverable. The design may be handed off or integrated into an agile process where designers and developers partner to build it. However it's done, there are a few components to making a design come to life.
I tend to appreciate a system of delivery that honors a cascading application. This approach utilizes styles and scenarios (if/then interactions) based on web foundations. Some teams use a visual sheet with specifications and then use prototypes to animate examples that are re-created with real code. There isn’t one thing that works for every team, but partnering with developers and gaining a working knowledge of systems is essential to knowing what you’re putting together as you design.
From sketching, prototyping, mockups to fine-tuning animations, collaboration is the number one component of a well-designed system.
Design systems take time to get right, but they enhance people’s ability to interact with technology. Empowering users, respecting business and changing technology are outcomes everyone can benefit from.