the economist

What’s happening? To unify their team (of designers, researchers, developers) and attain a laudable level of purpose, the Economist team, led by Mark Mitchell, built a design system that enables group cooperation via visual language. Digging deeper: According to Mark Mitchell, ‘A design system is a living document in software and code. It is always up to date and new releases are immediately available to other products; a so-called “single source of truth”’. The old (design) system, which documented visual language via branding guidelines, is no longer effective in maintaining consistency and uniformity across all teams. Their ‘legacy products were designed and built by disparate teams over the course of many years, without a holistic view of the experience. Technological obsolescence complicated efforts to update and align our products.’ (The economist 2019) In this post, the milestones achieved by the Economist, the steps taken, and most importantly, the lessons learned would be pin-pointed. What are the Components needed to build a design system? The design system is a body of several components, such as user interface kit, component library, and an accessible website. Each of these components performs distinct functions that cannot be neglected. The essence of a connective user interface is to prevent the repetition of previous designs, circulate new ideas among developers and minimize differences in style. The tool used by the Economist team is ‘Sketch, an application for designers, to build the kit and synchronize a library of resources across computers’. (Mark Mitchell 2019) Though the UI kit can be likened to the veins and arteries of the human body, the component library represents the building blocks or cells. To paint a full-picture of the relevance of a component library, Mark stated that, ‘Each component in the library includes all of the necessary markup, styling, scripts and tests needed to use it in a product’ ‘With a component library, it is simpler to maintain code consistency and avoid duplication of work’, he added. With the UI kit and component library, the job is complete. However, it would be quite hard for a lay man to access and understand the visual content. Hence, the need for a public-facing website that is accessible and down-to-earth. A public-facing website would be helpful to internal stakeholders, marketers, third-party vendors or anyone curious about the visual language. Measures to put in place when building a design system Even though these measures might be different across all organizations, there are common lessons every enthusiast can gain. As simple as it seems, building a design system or establishing a visual language is costly. So you need to get stakeholders buy-in. Doing this would provide you all the support and of course, funds you need to pull it off. Mark did not reveal the total cost of the whole operation, but he hinted that ‘It (design system) requires a considerable amount of effort at the beginning, but that cost is outweighed by the long-term benefits.’ After buying the stakeholders to your side, you’d need to dedicate a team and find pilot projects. You don’t have to search for new teams. The people you need for the project are present in your organization, but you need to inspire dedication and appoint various tasks, depending on the daily schedules. To ensure everything goes as planned, the team would have to appoint several leaders. You can choose the leaders, but a democratic process is better. At first, Mark Mitchell adopted the centralized governance, which is piloted by the art director, but as ‘As we expand the design system, we will establish a working group to manage the new platforms and channels that join.’ he explained. Bottom line: Building a credible design system is a feat every organization should attain. The design system not only connects the team’s visual language, but also brightens user experience.

the economist

The Economist guide to building Visual Language

The Economist’s 2019 annual report reveals a slow growth in revenue