As you may have heard or read, we are currently renovating, rebuilding and redesigning the university website.

As a Design Manager within the Web Services team, this is one of the most significant projects of my time here so far. In fact, it will be one of the biggest challenges of my 14-year career. And I’ve been struggling with HTML nested tables and Internet Explorer 6…

So I thought about how we can prepare for this challenge. What have been common design issues in projects in the past? What are the design issues that typically arise in a large project? What can we do to prepare for the significant amount of design work that will be part of this project?

Digital design challenges

These are the digital design challenges we’ve identified:

• How do we present digital content in a consistent, predictable, unique, attractive and measurable way?
• How do we design consistently for different channels (email, landing pages, website, app)?
• Can we make it easier to make design decisions based on user research?
• How do we fully evaluate the impact of our work?
• How can we work better with the development, content and UX teams?
• How can we design consistently for a variety of devices and browsers?
• How do we make sure we meet accessibility guidelines?
• How do we stay creative while being consistent and on brand?
• How can we « bring the brand to life » using animation?

That’s all? Easy.

In all seriousness, there are a lot of questions and too much to think about when producing design work every day. It would be overwhelming and creativity overwhelming to try and think of these for every project. In fact, it would be enough to send any designer out of the office in a flurry of paper, pencils, and cute coffee-table books about Apple, cappuccino splashing with wild abandon on once-pristine aluminum peripherals. Not that we are like that, of course.

It was clear to me that we had to structure our work so that we could address these challenges. We had established that our job should be:

• user centric
• based on research and data
• creative and on brand
• scalable (a button should work consistently across landing pages, ads, and emails)
• accessible and inclusive (everyone should be able to read and enjoy our content on whatever device they are using)

And most importantly, it should constantly be all those things. Lack of consistency over time is the biggest challenge we face. It affects our productivity and more importantly, it affects the user experience.

So what do we do?

We can solve our consistency conundrum by putting a structure in place to deliver quality work. We are currently building a system to define and manage how we build, design, measure and improve the digital user experience.

We are creating a design system. We called it BRGR, which stands for Build Right, Get Results.

BRGR (pronounced ‘burger’). The concept is that the individual layers work together in a coherent way with the goal of providing an enjoyable and memorable experience that satisfies a certain hunger. Just like a hamburger. Yum.

What is a design system anyway?

A design system unites people and teams around a common visual language. Defines the approach to design work. Provides design element templates that can be reused and improved in a controlled way. Makes design decisions easier. Structure creativity. Promotes long-term consistency. It gives you instant relief from your irritating and tickling cough. Ok, so, not the last one (if only there was such a thing).

The origin of the design system is in the 60s. Before websites and the iPhone. Back then, computer technology started to outpace software programming. Computers have gotten faster and cheaper, but software development has remained slow, difficult to maintain, and prone to errors. This gap and the dilemma of what to do about it has become known as the « software crisis ». A system of reusable components helped solve the crisis.

“A [digital] The design system is a set of interconnected models and shared practices that are coherently organized to serve the purpose of a digital product. Patterns are the repeating elements that we combine to create an interface: things like user flows, interactions, buttons, text fields, icons, colors, typography, microcopy. Practices are how we choose to create, capture, share and use these models, particularly when we work as a team.« 

Extract from: Alla Kholmatova. « Design Systems ».

Design systems are used by large companies and organizations around the world, including Google, IBM, Salesforce, UK Government, Shopify, SSN, University of Melbourneand countless others.

What’s in our design system?

• Building Blocks: We define and test the foundations or « building blocks » of any design (color, fonts, layout, animations)
• Patterns: we define and test the parts of our design that repeat and can be reused (buttons, navigation menu, search forms, header, page layout)
• Rules and guidelines: we define the processes, rules and guidelines that help us design coherently and in a way that solves the challenges we face (being user-centric, being accessible, being in line with the brand, be mobile-friendly, be test-driven)

What are the advantages of the design system?

The system will help us deliver consistent digital designs across web, email, landing pages and digital ads. Eventually, this will lead to aa a more pleasant and consistent experience for our visitors. And this is the main motivation of our design system.

Other benefits include:

• Let’s think about the user first
• We define rules that improve usability, accessibility, efficiency
• We design and build with accuracy and consistency
• We save time by reusing components and layouts
• We provide context for where templates are used
• We see user feedback in the context of a UI component
• We make it easy to share our components
• We make design guidelines available to everyone
• We can easily « scale » to design all future digital interfaces (new apps and systems)
• Let’s continue our test culture (article about our upcoming A/B testing adventures…)

What have we done so far?

We have completed our work on the building blocks of the system (colors, typography, grid, etc.). These may be adapted again in the future to test our ideas with real visitors on the first versions of the new University website. A good design system is a living and evolving which is constantly maintained over time to adapt to the needs and inputs of its users. And that’s what we’re aiming for.

Some examples of what we have created:

Color

Typography, grid and layout

Connections

Design principles

Our design principles are practical values ​​that we can work on every day to help us make good design decisions consistently. They help us place full emphasis on user goals when we design.

What role does this system play in the new University website?

We are now starting to implement gradual improvements to the design of the « alpha » version of the website. This is a very anticipated version of what will eventually unfold into the new University website as more content and features are added.

The « building blocks » of the design system have been predefined in the design system and are applied to the alpha website:

Visit the alpha site: https://alpha.dundee.ac.uk

We are using the alpha website to identify and design common patterns, which is the next stage in our work on the system. Anything that appears regularly in the site’s content can be considered a pattern. For example, bullet points, navigation menus, headers, buttons, and so on. We take each of these and start experimenting with their design, with the goal of creating something that works best for our audience and can be used across digital.

These models will be tested, documented, shared and reused as part of the design system. The end result should be a consistent, effective, unique and user-friendly design for every visitor.

Thanks for reading

Check out these related posts: