Our Design System Journey at FOX

By Henry Escoto. Written in partnership with Rene Alexander and Kevin Cashman
Source: https://medium.com/fox-tech/our-design-system-journeys-a533c206f5ca

The talk and myth around design systems is well known in the industries of experience and product design. Popular belief, whether by trend or by sentiment, is that the product design process is seen as the magical solution to collaboration and challenges. However, design systems can be as varied as the people 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 is what can truly make a difference.

• How will a design system truly help my product design?

• What does it take to actually plan, build, and execute a design system within an organization?

• How do we inject the practice into existing workflows?

• What is the pay off of such an investment?

These are some of the questions that we will try to answer through the lens of FOX Tech Design, 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 (and sometimes painful) aspects of our journey by recounting the stories of our two most robust design systems: Delta and Arches.

The difference between the two? Think of a stage play where the front stage is the shiny end product the audience (the consumer) experiences–aka Delta. Meanwhile, backstage, a smaller group of individuals are frantically moving levers and pulleys to prepare for the next phase of the play. Those levers and pulleys are what we call internal tools that power the shiny end product–aka Arches.

To put it simply, 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.

Back in 2019…

FOX’s design systems journey began right after the completion of the FOX/Disney deal. It was a time of change and evolution, a turning point for our new company which presented a chance to think outside the box and re-envision how we worked. It was indeed the opportunity of a lifetime and we were excited to make FOX Tech Design an effective and nimble creative team who leveraged design systems to their advantage.

Armed with our FOX entrepreneurial (“we can do anything”) DNA, we began charting a new course for the design team. At the time, FOX Tech design suffered from file fragmentation, workflow cohesiveness and a lack of design visibility, remnants of past processes. Working with the team and our partners, we began the journey by not only changing our team culture and how we worked, but how we would eventually implement design systems as a practice.

The Story of Delta

The Delta design framework, which is used by many of our consumer applications, was launched in 2017 when it initially focused on entertainment properties like FOX, FX and NatGeo. At the time, Delta provided a single design language which networks applications leveraged to highlight their shows and VOD content. In 2018, FOX Sports joined the framework and the following year we launched FOX Nation, both expanding the platform’s features by delivering live streaming and subscription services.

Since then, our consumer apps have undergone multiple rebrand exercises and facelifts as well as expanded the platform’s reach to over 10 different devices — each with unique characteristics and rules. At scale, with so many devices, iterations and products, came the realization that our design language and live product experiences were inconsistent and disordered. Our team was quickly faced with the challenge:

What is the real source of truth and where was it?

Of course, these types of problems aren’t unexpected in our industry, but for a brand like FOX, it was unacceptable, and we knew we had to do better. We had to get organized.

Plan, Execute & Test Drive

From the very beginning, we knew we would be the first team at FOX Corporate to implement our Delta design system across our digital products, and so we approached the challenge in three phases. Each of these phases involved not only a lot of elbow grease and open mindedness, but required changes in workflows and tools.

Phase 1: Collect, Collect, 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.

Once organized, our first objective was to prioritize consistency within common features across the different platforms. However, we quickly realized this method was keeping a duplicate inventory of the same UI elements in several files. Multiply this approach by the number of brands, and this initial approach quickly failed. We kept refining until we opted to implement a collection of libraries based on core anatomic symbols and relevant UI components, such as: Logos, Buttons, Cards, Navigation, Utilities. Inside of these libraries, symbols were organized by platform-type and by brand. Note: a good trick to properly organize symbols is to experiment with common naming conventions and numbering systems.

For us, our anatomic design libraries really benefited from setting up a numbering system to organize all relevant features and screens to easily match files and UI components regardless of what platform or brand a designer was currently working on. For example, a designer can easily find files or UI symbols for any device-type simply by following the number system assigned in the file name.This helped designers focus most of their time on quality and big picture thinking vs. time on the details and translating the same feature over and over to fit the different platforms. The design systems we were creating quickly assisted a designer to comp a feature for the iOS devices and with a matter of a few clicks, they could transform that very same feature for an Android device.

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.

Since introducing new workflows powered by our new design system, our teams have been navigating through new features and launching new applications at a much faster rate, and this was first evident when we debuted FOX Soul on Roku. While it followed the same framework from some of our current apps on the Roku client, it took just a few short weeks to comp because it took advantage of the way we had reconstructed UI elements inside branded features. Voila- our new design system was now future-proof. It was built to anticipate new brands to be added at any given time by simply altering UI patterns within core anatomic libraries and replacing them in our templates with as few clicks as possible. This new approach continued to work seamlessly when we later launched FOX News International across the globe.

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. Storybook, Figma to name a few. 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.

Meet Arches

Behind all the consumer-facing products are interdependent technical tasks required to weave video, artwork and data into a seamless end user experience. In order to serve the growth and adaptability of the business going forward, we had to evolve the tools we used and the work required to conceive and build them. Some tools we had went with Disney as part of the deal. Other tools were outdated– pushed beyond what they were designed to do. With all that said, we knew we needed to streamline, update and create new workflows, data, and tools.

One practice we would use to get there would be to employ a design system that we named Arches. This UI system would be embedded within the development process from its starting point. Essentially, Arches became a development framework and a design system that would enable teams to efficiently build upon and integrate with back end tools in the FOX Tech ecosystem. Developers benefited greatly from Arches as it provided the rules and governance to build cohesive and integrated applications ultimately enabling faster tool development and deployment than before.

The vision was to create a centralized framework of design and development components capturing work we had already done and apply it to new challenges. In turn, this would remove repetitive development and give developers and designers components to build tools for the future. Our end product would be a suite of tools that were easy to understand yet interoperable: connecting complex tasks into streamlined workflows as well as the assets– for both Design and Development- as well as the process to build effectively for the future.

Bringing It All Together

Like Delta, we started with an inventory of tools we already used, tools we were in the process of creating or updating as well as tools that needed to be replaced. DPP, a Video Management tool, and Spark, an internal CMS, were rapidly evolving. Finding commonalities between those efforts and applying some shared UI was the beginning of Arches’ Design.

While we had some established UI patterns and UX workflows from building DPP, not all of the elements were sketch captured and defined in Sketch–our “go to” UI design software at the time. With no downtime in the world of television entertainment, we would need to pair the work of design and development more closely. As the saying goes, the show must go on.

With our users, designers and developers in different time zones, we rapidly stood up minimum viable solutions to pressing deadlines related to flagpole events and contracts. Using the work of individual tool design to inform our design system and learn as we go, we were able to quickly create some standardized patterns and workflows.

We learned quickly that scaling, without standards in place, only multiplies inconsistencies and duplicates efforts. Using Sketch to create libraries for common design elements, and making more global assets and styles available as libraries, helped us to keep the UI consistent across teams, projects and evolving design. Abstract was used to centralize, share and track change within the design process. Connecting our Libraries from Abstract to Invision DSM (DSM) allowed us to share all of that with developers, product teams and designers.

Ultimately, we were able to launch a unified dashboard for access to tools, administration for roles and permissions, artwork management, video ingest and management and more. However, our work isn’t done. We continue to build into the design systems to inform ongoing tool creation and design. However, having a portal like DSM with instructions and context has helped lighten the need for dedicated Design and Development support. And, the tools we’ve created have begun to deliver on our vision, with improved workflows making it easier and faster to get a video clip from the sidelines to the living room in a matter of minutes.

Positive Results

Since their launch, our Arches design system has significantly improved consistency on our back end tool applications, simplifying the amount of development work needed to build such apps. But one of the biggest areas of improvement was how transparent design systems became within our entire team. Every new application called for the need to align, which in turn made workflows feel more familiar due to the consistency in UI. The results speak for themselves:

“Demos for the Video Manager have been carried out recently by our users due to their ease of use. Also, they’re able to train new team members without us PO’s needing to be involved at all.”

“The tool is very straight forward with the workflow easy to follow/understand. That’s due to multiple things, like the system feedback we give to users, errors and their notifications help them anticipate when they do something incorrect or out of order.”

An Evolving System

While the idea of design systems is not new, the way we create them, how we execute and apply them to work is. There are some great suggestions on how to do it, but there is no one single formula and every business will have to chart its own path. With collaboration, transparency and “interconnectedness” now a must (thanks to the pandemic), the value of design systems has only risen higher. But the ultimate value will depend on what you want to achieve in the long run. For Fox Tech Design, the goal was to introduce and implement the practice to make our design process more consistent, efficient, effective and collaborative. Achieving these (so far!) has helped our team to be more productive and confident. And as we reap these benefits today, our next set of goals are to make design systems even more integral to the product design process. Ultimately further improving efficiencies by creating live coded components right from a designers canvas, ready for dev review and application. Now that is something! 😉

So come back and check in on us a few years from now and see how we’re doing.

—

About FOX Tech

Make Your Mark Here.

At FOX, we pride ourselves in shaking things up and making things happen. We’re a community of builders, operators and innovators and each and every day we experiment, collaborate, and co-create to develop the next world of news, sports & entertainment streaming technology.

While being one of the most well-known brands in the world, we provide our employees with the culture of a start-up — fast paced, non-hierarchical, full of smart ideas & innovation and most importantly, the knowledge that each member of the team is making a difference in defining what’s next for FOX Tech. Simply put, we love to do great work, with great people.

Learn more and join our team: https://tech.fox.com