If you have ever visited my website, you may have read that I design systems to help people interact with the web. I talk a lot about how I work. This week begins a series describing design systems and why this all matters.
You interact with a design system every day. Whether you’re reading this on a mobile or desktop device, you are accessing the internet through an operating system. That system is running another system in your chosen browser. My website is a designed system. These coupled systems contain considerations of how you may interact with them how they may interact with one another.
Often, web designers are associated with designing websites. When most people think of a website, they think of services they use. Their utility companies, local brick and mortar stores, and even large businesses that own brands they buy at the grocery store. Many of these are destinations to get information. These days many types of small businesses are forgoing them all together for Facebook pages due to the presence of their followers. Yet eCommerce is at an all-time high. Both types of websites need people to design for their users. This includes a holistic system for them to interact with that serves their needs while ensuring business growth.
Then there are web apps. You don’t have to know what a web app is to be using one. Facebook, Mint, Gmail and Online Payment Systems are just some common examples. Systems that allow web users to author and design their own sites have a unique set of constraints. Nonetheless, they are systems. Compared to mobile apps, web applications are larger scale with more of what the web can offer. Software installed on your computer are also designed systems. Many have a web component to them and have considerations built into the user experience how they will interact.
All of these systems were planned out from the technology to the visual and interaction. While systems are always growing, changes must make sense with the overall design. Without some set patterns, there is no baseline for consistency. This is a problem for building onto a system, and it is also a problem for users. For example, if you add a new interaction to a system that doesn't fit into the design it can cost more to build. It will also increase risk to user satisfaction, adoption and your bottom line. Investing in a well thought out and scalable system is worth doing right.
Ultimately, a design system contains a blueprint of how it all works together, and details how the pieces work, look and interact. A design system contains many components such as colors, interface elements, animation definitions, technology considerations and scenarios. The deliverables for a design system are often in the form of component libraries. They may or may not require additional documentation.
What does it mean to design a system? When designing a system, there are many things to consider. Here are some things designers think about in this process:
Focus, but Zoom Out
Focus on the big picture, but also the details; the project goals all form a focus. The way the product interacts, functions, looks and feels all play into the results.
Planning ahead for scalability and efficient use of technology will save future headaches and cost.
In my case, I need a firm understanding of markup and css to structure content since that's what the web reads to render elements. Designers need to know how to make their system work for business, users, and machines.
Today we have more ability to add animation to our interfaces than ever before. But we need to focus on making them as usable as possible. Interactions are best used in giving the user feedback in their journey. Confirmations in actions and data patterns are common and helpful. Collecting the information that a system needs to react to users is an equally important task.
Designers need to consider the overall feel of their system. It may resemble the analog world, or feel immersively digital. But it should be intentional. The perspective someone receives when using your product is sometimes just as important as how it works.
Similar to feelings, emotion is tough to measure. The Google HEART method attempts to help set up metrics for these to pair with usage numbers. Emotion plays strongly into how your brand and product is perceived. A designer must understand what defines satisfaction to their users.
The visual look of a product is the functional decoration of the system. It provides a cohesive connectedness in an otherwise complex world. It provides consistency, visual cues and puts a bow tie on your brand. From a user's perspective, it's the bridge from machine to human interaction. Visuals paired with smart organization is how a user will remember where things are next time.
What will define success? How will the design of the system help the business grow? Do the interactions with the user integrate with existing business processes? Accessibility, usability and defining measurements should also top this list.
Think of an interface like providing a map for a choose your own adventure; leaving choices while guiding along just enough to save time. Using research techniques, a design team can make the system feel integrated into a user's life. When a user can get what they need and feel good about it with little effort, the project has a multiplied chance of success.
As you can see, designing a system takes a lot of thought and time. Combining project goals, technology, and context creates clarity. Experienced designers can help put all of the pieces into a usable system. Whether a team is working on an operating system, software, a web application or a mobile app, these all must be considered for success.
Next week I’ll be addressing why design systems matter, components of a well-designed system, and things professional designers care about. I’ll top off this series with a third post about how these principles can can be applied in our work.