The discussion and flow around Design Systems is well known in the industries of User Experience, User Interface, and Production Design. The product design process is seen as the magical solution to collaboration and challenges that a designer faces day to day. However, Design Systems can be as complex and varied as the individuals that build them. In theory, the promise of “components that can be reused in different situations’’ seems like a no-brainer. But in actuality, the practice of implementing Design Systems into your everyday work life is what can truly make a difference.
Being able to have a significant impact on a user's digital experience is truly rewarding. Creating a Design System with multiple variants connecting to a single component is part of the process that makes design systems so exciting to work in. Design Systems has a significant impact on Software Engineers and Developers success. It makes it so developers can easily access any design or mockups and can make one single change to be compatible across all platforms. Listed below are the following questions that we center at the heart of our Design System.
Leading Questions to Consider
1. How will a design system truly help my product design?
2. What does it take to actually plan, build, and execute a design system within an organization?
3. How do we inject the practice into existing workflows?
4. What is the pay off of such an investment?
These are some of the questions that as a team, we try to answer through the imagery of FOX Design System, the team in charge of experience and product design for FOX’s consumer and internal products. To exemplify this process, we will share the joyful aspects of our journey by recounting the stories of our two most robust Design Systems: Delta and Arches.
To summarize, Delta is our Design System for our consumer facing products and Arches is the Design System for all our internal tools. And while the audiences may be different, the end goal – components that can be reused in different situations – is the same.
Phase 1: Collect & Organize
During Phase 1, we started by creating a high level plan of the three proposed phases. We did our best to plan ahead and forecast an initial timeline. We took a lot of screenshots…and I mean LOTS of them. We sifted through all of our live apps and sites from across all platforms to get a better understanding on the state of UI components across the entire digital experience. This gave us an idea of how large in scale the project was going to be by the number of screens and assets across multiple platforms we had to maintain. However, when it was all done, the vision became clear, and we could begin to plan out a journey path to create our new design system.
Creating a design system like Delta is all about being detail-oriented and getting satisfaction out of organizing chaos. After conducting our audit exercise, we gathered all the files for each product and organized them by brand and by platform. Many hours went into organizing thousands and thousands of UI elements and merging them with small existing libraries.
Phase 2: expanding design workflows
As Phase 2 got into full swing, our design systems forced us to revisit all our design workflows; not just the way we worked with other designers, but with our product and engineering teams. From the beginning, the moment a project was defined, we made a conscious decision for the design system to be part of the discovery and ideation phase versus slapped on as an afterthought during the production phase. To put it simply, we approached it as an “ecosystem” we were living in.
This workflow change meant that if there were new elements needed from scratch, designers were even more conscious to prioritize consistency first. So how do you get everyone working the same way? To align designers on this new process, we implemented a weekly meeting to provide full visibility on everything design systems related. Regular design system maintenance updates, process for reviews and approvals to ensure design standards and UI consistency were a top priority in the meeting for all active projects. Additionally, we wanted to keep our skills sharp. So we constituted bug-logging workshops and polish exercises for all teams to collaborate and share opportunities to improve our products.
Phase 3: Translating Our Design System into a Digital Hub
While a ton of work has been completed to date, Phase 3, the ideals of translating our design systems into a digital hub to document best practices for development is still in the works. There are many tools that could help us achieve this objective which we’re currently exploring. Figma is the application that we are currently operating in. In the meantime, to supplement the absence of a truly code base system, we continue to focus our attention on improving our hand-off documentation and Design QA with proper design stewardship.
Our ultimate goal, the heart and soul of a design system, is a code-based library of reusable UI components that power our applications in real time. Our vision for the future is for users to open a FOX app on their phones or TV and see the design system in action. By setting the foundation today, we aim to achieve this goal sooner than later.
