It’s been a great start to 2019. Ok, so 2019 started five months ago, but it’s flew Of.

We have worked with our partners Manifest AND Acquia on a rather large project to replace the University website. We’re starting from scratch. A blank page. Lots of blank pages, actually. New content, new designs, new code, new processes. New everything. I also bought some new pencils…

Our partners turned out to be intelligent, nice and extremely well organized people. Everything is planned and executed as if we were in the military. In a good way, I mean. We don’t have to say hello on daily standup video calls every morning or anything like that.

For more information about our project and our partners read this: We introduce you to our new CMS platform and our partners

This was certainly an intense project.

However, we can proudly look back on what was achieved between the various teams who worked together through design and development in a matter of months:

• a new design system with over 30 components, each with multiple variants and responsive states
• a template library full of accessible and mobile-optimized components and templates
• full integration with a new Drupal-based website that will allow content editors to easily select templates and drop components into a page

This post is a breakdown of what made coffee flow and our pixels have gone so far this year.

Starting from 2018 (« The Year of the Design Sprint »)

In 2018, we invited all students and staff members to participate in the research we were doing as part of our project by participating in a design sprint. A design sprint brings people together to solve problems by generating ideas, proposing solutions, and choosing a final solution to test with real people (aka « users »).

We ran over 20 design sprints with staff and students last year, tackling issues like these:

• How do we help people find personnel information?
• How can we better serve people who want information about topics?
• How can we improve the course page experience for prospective students?
• How can we make comparison courses easy and fun?
• What information should a country page provide to meet the needs of the audience?

The ideas and solutions gleaned from design sprint participants were used throughout the design process in 2019.

As well as core business research, this has been the basis of what you will see on www.dundee.ac.uk in the future. We have gathered many, many insights as part of this process – honestly, this has been invaluable to us. A huge thanks if you made it to a design sprint, we hope you enjoyed the experience.

There will be more design sprints in the future, there will always be complex problems to deal with.

So the main point here, the TL; DR (too long; unread), this is it our design is driven by research to obtain original and effective solutions. Which is very fitting for a research driven university.

A new approach to working with content; priority guides

Traditionally, we have used wireframes as the basis of our designs. This was a quick technique for creating layouts based on content provided in a Word document or email. Occasionally in the past, we’d find that there was no actual content to embed in the wireframes or the design team had to make decisions about what that content might be.

By their very nature, wireframes are high-level and abstract; they do not require you to present the content structure in detail and this can lead designers to make assumptions about how a feature should look and work on a website. In other words, using wireframes can increase risk in a project and cause delays if you discover that these assumptions were incorrect.

So, we looked for alternative processes and discovered priority guides. A priority guide is a single column of content presented in simple annotated boxes explaining the purpose and origin of each bit of content. To create a priority guide you need to know how the content will be structured. Typically this task falls to the content team who, using knowledge and research, divide the content into logical chunks (these eventually become fields in the content model and CMS). A priority guide is then created based on these fields using real content.

Our priority guides are the width of a typical cell phone screen. The theory is that mobile phone users need content delivered quickly in a simple and clear format, in the right order based on the user’s needs (or goal). This approach is called « mobile-first ».

Priority guides have been created for all content types; courses, help guides, projects, people profiles, events, stories and much more. They are one of the cornerstones of what you will see on every page of the new website.

Putting accessibility first

Accessibility is about making our websites available to everyone. This includes people with disabilities. People with a wide range of needs and experiences. People using assistive technologies that may not be familiar to us designers.

Why is accessibility important?

Accessibility requirements are part of UK law and must be considered when creating a website. However, we aim to produce websites that are fully accessible regardless of legal requirements. This ensures that our websites have the largest possible audience and are usable by everyone.

Approximately 10% of University of Dundee students report a disability each year (approximately 1,400 students). The actual number will be higher as this estimate does not include unreported disabilities. An estimated total figure of more than 2,000 (out of approximately 14,000 students) would not be unrealistic. And these are just students.

What can designers do about it? What have we done so far?

Our work in this area began right at the design stage. Here are just a few examples of the first steps we have taken:

• The color contrast was checked for every possible color combination
• Our design tool includes a plug-in to check how color blindness will affect things like contrast between foreground and background and how links will be visible
• The global font size of the new website has been increased to make it easier to read
• The space between the icons and the shortcuts has been checked to ensure that they are easy to interact with, especially on mobile phones (we call this the « affected area »)

Read more about how we design things to be as inclusive as possible: Accessibility in a design system

How can we ensure that content and design work is accessible in the future?

We have created a new website accessibility policy to ensure that everyone understands the requirements for people creating new content and design work at the University.

This document is currently under review and final approval, but in the meantime you can see the contents in the screenshot below:

We will publish all the details in a dedicated article on the policy in the near future.

The focus on accessibility was carried forward into the development stage of the process, with each component and model undergoing rigorous testing for color contrast, ease of use when using a screen reader, and other « best practice » checks and measures. « .

Luckily for us, our development partner, Manifesto, is an expert in this area.

Design a design system

A good design system unites people and teams around a common visual language. It defines the approach to design work and provides templates of design elements that can be reused and improved in a controlled way. Makes design decisions easier.

And the good news is that our digital design system is well underway.

The system includes everything a designer needs to create an on-brand, accessible and consistent design. It prepares us for the years to come so that we can realistically achieve a high level of quality in our design work without losing consistency over time.

Template Library: The heart of the design system

At the heart of the design system is a « template library ». It is a collection of components (feature bits like navigation menus, tabs, images, etc.) and templates for presenting content.

As a designer, we can select any component or model in our design tool and drop it onto the page. Developers can select and import the « coded » version of each component. Content authors can drop the same components on a page and add content. The main benefit is consistency throughout the process and consistency for website visitors. It turns out we’re obsessed with consistency.

The template library has been such an important part of our work that it deserves a entire article to cover all the details. Then I will deliver to ours Front-End Developer, Ryan, to introduce the template library workflow and provide some detailed examples:

Create accessible, mobile-friendly, fast-loading, and eye-catching website components and templates

Is that all for the year?

Time to relax? Maybe rewatch Game of Thrones? Hmm, let me check the project schedule… ah, no, we have another 2 1/2 years of work before we’re done. And then we won’t be finished exactly because a good website is never finished.

This is the pressure of continuous improvement; We want everyone to have the best possible experience on the website. We want people to reach their goal, whatever it is, faster and without friction (in other words, getting really irritated). And as environments, technology and user expectations change, that won’t be easy.

It’s true that we will never be done. So expect another update soon…

Thanks for reading.

PS You can be part of this project

Keep an eye out for our upcoming user testing sessions.

Our « beta » website will be launched in July this year (I know, fast, right?) and the feedback from people like you will be invaluable. This is the first opportunity for you to share your views on the new University of Dundee website and help us develop key pages such as courses, people profiles and help guides.

Want us to email you when it’s ready? So hop on our email list and we will do just that.