The University of the Arts London’s accidental path to a design system
The University of the Arts London is ranked the sixth university in the world for Art and Design in the QS world rankings. It has impacted the creative industries worldwide, in part by launching the iconic careers of Lubaina Himid, Stella McCartney and Anish Kapoor… just to name a few.
But it wasn’t until 2004 that the colleges formed an official federation under the name “University of the Arts London,” aka UAL. Today, the university is made up of six colleges, each with their own rich history and identity — most dating back to the early 19th century. But their unique past presents design challenges because the organization uses a number of identities. As Declan Talbert, a UX designer at UAL, put it, “everyone looks after their own site and they each want to implement their own style.” As a result, UAL’s digital experiences can feel disjointed and inconsistent.
Since last year (2017), the User Experience team has been focused on reshaping UAL’s core digital experience to be more user-centric as part of the Digital Transformation Program. The team partnered with the University’s brand, content and development teams for the program. Updating the website was phase one. And while a design system would be an eventual output of the project, the team stumbled upon the opportunity midway through the website project. As Andrea Caporale, UX manager at UAL, said, “the design system was good collateral damage.”
Making the switch mid-project
The UX team tested several design tools during the early phases of the website project and struggled with the siloed nature of most applications. As Talbert said, “We immediately fell into issues trying to collaborate with our Sketch files — the problem was we were not able to work seamlessly on files together.” Between working with outside agencies and internal stakeholders spread across 14 campuses, the team grew frustrated. Versioning issues caused confusion, syncing files took time, and, as a result, communication loops became exhausting which caused a rift between dev and design.
“After just three days we saw all the benefits of Figma.”
After testing out Figma, Talbert recommended the team try it. Because Figma is accessible from any computer with a browser and enabled the team to collaborate online in real-time, they decided to make the switch, even though they were midway through the website project. Because importing their original files from Sketch was a simple drag and drop, Caporale said, “after just three days we saw all the benefits of Figma.” Having a centralized source of the truth across developers, designers, key stakeholders and even executives resulted in an unprecedented level of transparency. And most impactful was the new level of collaboration between development and design. According to front-end developer Bo Ajayi-Walmsley, “Just seeing all our work within one tool was incredibly useful.”
Go big with Figma
Equipped with the right tool all teams and external agencies were finally speaking the same language. But given the extensive nature of the website project, the team decided they’d have to build everything from scratch. In an effort to save time, Caporale saw the opportunity to prioritize the design system. As Caporale puts it, “building out the Design System came naturally thanks to the quality of features in Figma.” Thus, the UAL design system was born.
Project: Design System
The teams worked in tandem on both the design system and the website project, both were of equal importance to the overall website redesign and helpful to align other Digital Transformation Program key projects. Caporale said, “The design system was not just about creating components for our website, it was a way to connect together all of our channels and give them the same style and functionality.” The goal was to harmonize components across colleges and streamline processes.
To get started, the UX team conducted a series of workshops with students and business partners to understand what features were critical in the design system. The idea was to uncover every single component and all the discrepancies.
The team then translated the style guide into digital assets. And given the complexity of UAL’s brand, the design system had to be flexible enough to allow the use of different colors, typography and personality. Using the team library in Figma allowed the UX team to have a living version of their brand guidelines that is accessible to all — no matter their device or location. And with the recent release of Figma Styles, “it was like our prayers were answered,” said Talbert. Because Styles allows you to apply color styles separately from text and effect styles, the team can provide an added level of flexibility.
Fast delivery, the Figma way
With the design system taking shape, the website project moved at lightning speed. Leveraging components, the team built base pages to act as templates, enabling development to spin up new pages fast. According to Joshua Shindler, Digital Development manager at UAL, “With our Design System in Figma, we’re able to move faster because we’re able to instantly see how designs can be created in code.” The teams were finally synchronized around one common system. For the first time, the teams could actually bridge the gap between developers and designers and effectively communicate with each other.
“We’re able to move faster because we can instantly see how designs can be created in code.”
Collecting feedback on the website design was simplified, too. “The executive board can access a Figma link, view it at their leisure and see how the website project is developing,” says Talbert.
A New Journey for UAL
In the end, the new UAL website launched — and on time. But it was the reaction to the project that may have been the biggest win. Everyone in the organisation feels this as an exciting, new beginning — from the students through to the executive board. As Caporale puts it, “Our design system in Figma marks the starting point of a new journey where we build more consistently and speak the same language across every single part of the UAL experience.”
