2020 has sparked the world’s largest-ever remote-learning experiment. This has been a major learning curve for students, parents and educators alike, moving their teaching online. With the need to deliver a cohesive and consistent experience that is customizable, creating a design system seems like a perfect fit! We recently built and deployed a design system for the world’s top business school that not only helped them deliver a consistent experience but also lowered the barrier for non-technical web editors.
With multi-tiered hierarchies, multiple people handling different sub-brands under the umbrella brand, multiple relationships and roles, a higher ed ecosystem is a web of interconnected pieces. Lack of consistency over time is the biggest challenge faced by Higher Ed institutes. It affects their productivity and, more importantly, it affects the user experience. The best alternative for a Higher Ed brand to serve a consistent experience is to get their ducks in a row by building a design system.
So what is a design system anyway?
A design system unites people and teams around a common visual language. It defines the approach to design work. It provides patterns of design elements that can be reused and improved in a controlled way. It makes design decisions easier. It structures creativity. It promotes long-term consistency.
A design system comprises of three components –
- Style guide
A style guide is a set of rules for how a brand should be displayed. It is both visual (design & imagery) as well as written content (voice & tone). It includes the uniformity guidelines of brand consistency across design elements, fonts, etc. The purpose of a style guide is to allow multiple contributors to create content while representing the brand cohesively. Almost every major higher education brand has a style guide. For example, Illinois College has an elaborate style guide menu that caters to the purpose, personality, promise, positioning, and identity of its brand.
- Pattern library
A pattern library is a collection of all reusable elements on your website. These elements usually include carousels, slideshows, social media features, navigation, related links, etc.
- Component library
A component library consists of all the styles and components used in a website, software or app, including buttons, input fields, a UI kit, etc. It is the new and improved code that can be reused for various applications within the brand umbrella.
Design Systems for Higher Ed - How the University of Arts, London’s accidentally discovered the design system
The year 2017 was a breakthrough for the University of Arts, London when the User Experience team started focusing on reshaping the core digital experience to be more user-centric as part of their Digital Transformation Program. Before that, every team worked in silos on their site, resulting in a disjointed and inconsistent digital experience. Phase one of the program focused on updating the website, during which the team stumbled upon the concept of having a design system. This is when they collaborated with the University’s brand, content and development teams for the program. Intending to harmonize components across colleges and streamline processes, the teams started working collectively on the design system and the website project. What we see today on UAL’s website is the living version of their brand guidelines that is accessible to all — no matter their device or location.
The teams were finally synchronized around one common system. For the first time, the teams could bridge the gap between developers and designers and effectively communicate with each other.
– Joshua Shindler, Digital Development Manager at UAL
Design Systems - reshaping the educational experience
A design system contributes to setting up a persistent brand both for the website as well as the higher education institute. The major benefits of having a design system for your higher education brand are:
- Brand consistency
A design system creates brand consistency and brand consistency builds trust. Design Systems are extremely helpful in creating consistency across the website. Whether visual or functional, a consistent design does not only make the website look appealing but also makes up for an intuitive and friendly user experience. Enabled by their design system’s amplified user experience, the Georgia Institute of Technology recorded over 10,000 enrollments for their MCS program. The design system creates consistency by providing a unifying influence. It also integrates communication across mediums, creating a consistent brand narrative online.
- Faster turnaround time
With a ready-made design system, you can save up to 70% of the team’s time during the product development process. This increases the quality and quantity of the delivered functionality. The design system reduces development time through prototyping that relies heavily on a set of processes, patterns and documentation for the developers. With established design foundations and reusable components and modules, the design system saves building time for new components and modules.
- Improved team communication
Over 1300 full-time employees of the London School of Hygiene & Tropical Medicine work in tandem with the help of their design system. The uniformity of guidelines encourage collaboration among different teams and help get each individual to work in absolute synchronization. A design system provides each individual with the documentation about everything required to get familiar with the project. Having a design system facilitates the creation of a shared process and governance model within the teams which breaks down design and development silos.
- Encouraged innovation
With a set of processes and guidelines to work on, one must assume that design systems do not leave any room for creativity. Contrary to what it seems, design systems eliminate repetition of tasks, increasing the potential for individuals to add innovative things to the project. Designers and developers prefer solving complex problems which add value. The design system allows more time for exploration and creativity by removing repetitive and low value-adding tasks.
- Enhanced efficiency and clean code
As per a recent study conducted by Figma, having a design system enables resources to work with 34% more efficiency. While a design system promotes consistency, it also focuses on efficiency equally through the reduction of waste or technical debts by promoting the development of generalized or unified elements that are reusable and cater to the long-term goals of the organization. This also helps in maintaining a clean and reliable code-base. Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
Here’s how we helped the world’s top business school standardize their design
We collaborated with one of the World’s Top Business Schools for building a design system and standardizing their website’s visual components using Pattern Lab.
- Our team of experts implemented Pattern Lab for design standardization
- We followed component-driven development enabling content managers to easily create pages
- Our designers used low-level components to design high-level ones
- The design system and standardization enabled 100% self-sufficiency of the school’s content team
We standardized the visual styling of elements for the world’s top business school without deviating from their standard component style. Read more about this project here.
Conclusion
Design systems are a higher education institute’s key to amplify their digital landscape and a tool to maintain consistent design, code and brand. Having a design system saves time and improves team communication and collaboration. And is a great way to streamline and simplify the complexity of a higher education digital ecosystem. If you are looking to implement a Design System reach out to us at business@qed42.com.