10 Design principles to help us build a better website

As part of the process of starting again and building a new and improved www.dundee.ac.uk, the design team here in Web Services are making big preparations to make sure we’re ready. Ready for what exactly? Ready to start again and rethink everything we have ever designed. Every button, every text style, every page layout. We’re starting again with open minds, ready to listen to what our users need to help them meet their goals, to get the information they need, to enjoy their experience visiting our website.

We receive millions of website visitors every month. Lots of very different people, from all over the world, with very different needs and perspectives, using a huge range of browsers and devices (over 24 different countries, over 5500 different devices, for example).

To successfully deliver designs that are unique and memorable yet consistent, accessible, and on-brand, we need a structure that supports our work. That structure is a design system. And the first step in building the design system is to define our design principles. These design principles are practical values we can work to every day to help us make consistently good design decisions. They help us to put the emphasis completely on the goals of the user when we design.

Our design principles

1. Solve problems

Do I know what user problem(s) I’m solving? Will the features and elements I have added help solve that problem?

2. Be inquisitive, ask questions

Do I have all the information I need to solve the problem(s)? Am I assuming anything about the brief, the content or the audience? Is the brief or the content good enough?

3. Combine data with instinct

Do I have enough user data to avoid making assumptions? Am I using my instinct and creative experience in conjunction with the data?

4. Enhance the content

Am I enhancing the presentation of the content or distracting from it? Am I making the user work to find the information they need to achieve their goal?

5. Avoid complexity

Do I need every feature or element I have added? Will they all improve the user experience? Can I strip back my design to make it completely focused on just delivering the information the user needs?

6. Communicate in the right way

Do I need early feedback before heading in a certain design direction? Will a face-to-face conversation help improve my design? Am I gathering feedback and direction from the right people (i.e. the users)?

7. Consider all types of users

Does my design consider those with physical or cognitive impairments? Will mobile and desktop users achieve their goals, and are those goals different? Have I considered all target audience groups?

8. Bring creativity and energy

Am I bringing creativity and energy to my work? Am I constrained by the brand guidelines or am I inspired by them? Am I using motion to bring my design to life and deliver a memorable experience?

9. Obsess about performance

How will my design impact performance? Is there a technology or technique I can use to deliver information faster, or to improve the perceived performance, for a better user experience?

10. Design with context

What is the context of the user’s experience? What journey are they on and where are they in that journey? What specific goal are they trying to achieve at this point in the journey?

About our design system

Our design system will enable us to define and manage how we build, design, measure and improve the digital user experience at the University of Dundee.

It will define how we design and use links, colours, fonts, buttons, headings, and all of the components we use to create the layouts for our content.

“A design system is a set of interconnected patterns and shared practices 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 those patterns, particularly when working in a team.”

Excerpt from: Alla Kholmatova. “Design Systems.”

We will use these principles to build our design system and when we build new functionality into the site. If a user requires new functionality to go onto the website, we’ll use these principles to guide us as we solve their problem and seek to develop a sensible solution for all users.

We will progress our design system throughout the alpha and beta phases of the new website, keeping the wider community up-to-date via email, posters and on our own blog.

The web is a constantly evolving, fast-paced environment and so we expect to constantly evolve our design guidelines and system to better serve our staff, students and the wider community. As always, any feedback is welcome!

 

Update: You can now read the full details about our digital design system

Written by:

Having previously worked in Glasgow and Edinburgh in similar roles I joined the School of Life Sciences web team as a web designer in May 2012. As of May 2015, I merged into the single web team for the whole university.

My main duties include gathering requirements and data from meetings, producing wireframes and designs and building front end templates which will then be passed to development.

In my spare time I enjoy football, music, movies and video games.

  • Show Comments and Reply Form

    Leave a Reply

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>