First thing first – let’s be clear: we don’t hate buttons. But we do have an issue with how some components, including buttons, are implemented across digital interactions. Let me explain…

We have a very busy content design team, spread thin across multiple projects, services and products. When members of our community make requests for web pages, often with very little explanation about what they are trying to achieve and who their users are, this can be incredibly challenging for the team.

Aside from that, we’ve been having many conversations about consistency of experience, content standards and what would help speed up the design process. We’ve also been discussing one critical pain point in how we, as a digital team, interpret stakeholders’ suggestions and whether to implement them.

This blog post reflects some of these conversations, conclusions and decisions we’ve come to as a team, as well as what we’re doing about them.

Linking back to University strategic goals

Millions of people from around the world interact with our website and other digital services each year. The University is lucky because it has a dedicated team that is truly committed to delivering the best experience possible for its large and diverse audiences.

To maintain consistency, we work from , which is effectively a library of guidance, examples, and repeatable design patterns that focus on key digital interactions. It allows us to move at pace and provide effective digital experiences that support the University’s strategy and its goals, such as equality, diversity and inclusivity – a critical mission to deliver on its ambition.

But there is more to it.

Having a library of design components can sometimes give the impression that all the design work has been completed… Although patterns do help teams build things in shorter amounts of time, it is how and why a group of patterns and components are stitched together that results in great design.

It’s all about context

Turning a content design eye on your own design system helps keep products consistent and scalable. It also helps keep designers sane.

They have to understand this collection of components, patterns and tools, but more importantly the right contexts in which to use (or not use) them.

Without this you can easily lose the benefits that those components were designed to provide, such as greater accessibility for users who rely on assistive technology to browse websites.

When we talk about content design in the context of design systems, we are not necessarily talking about style guides. We are referring to how we create repeatable design patterns, backed by research and agree upon their correct use as a team. Having a clear understanding of the solution to a problem allows it to be reapplied when the same problem comes up somewhere else – and at scale.

For example, we spent a bit of time looking at research groups and the important need for the contact panel, in terms of discoverability and consistency of experience. The design system is an especially valuable tool in the case of the .

In our content management system, there’s a lot of flexibility with the component itself. Here’s an example from the Coherent X-ray Science group:

Although many of our content designers have been using the template since it was launched, checking in with the design system helped remind them of best practice. The design system also helps them progress work more quickly by removing the need to rely on other members of the team for this information.

So what about buttons?

We have nothing against buttons. We’re only using them as an example of when choosing a component to build a product or service means making a content design decision for that interaction.

When a component has context, you can make the right decision by default.

Our design system contains information about and what they communicate. It gives explanations and showcases our different button types.

All of this is great because it’s flexible, but it can’t always tell you when to make that content decision of including a button or not.

When you add the context and the content choice to the system, the designer knows the right button to choose for each content type.

At this point, we probably want to stop thinking about buttons in isolation – more in a sense of journeys and the next steps a potential user group may choose to take, if at all. And that’s what we’re hoping to move towards.

For example, our new Postgraduate Research topic pages include Drupal fields where primary buttons can be applied using simple HTML code. These are present in the design system, but used sparingly by content designers despite the technical flexibility to use them more liberally.

Here’s our design system page for this product, including for ‘How to apply’ which uses primary buttons.
Then cross referenced with , it’s easy to understand that the primary buttons are for important tasks.

Journeys can be broken if there is not enough understanding of:

• when to use and more importantly not to use a button,
• what button type is most appropriate,
• where to place a button on a page

Throw in the human need to want to please people (such as by doing exactly what they’ve requested on a ticket) and things can go really wrong.

This is where training comes in to support individuals – to help them question any request we get in terms of the real value it will deliver for our users. After all, we’re here to represent them.

The need for good design choices

So to clarify our position, this is about how a design system, made up of well-chosen components and patterns, does not replace the need for good design decisions.

There are a million ways to make bad choices using good components and patterns – in the same way a piece of text can follow a style guide but still not read well or give users what they need.

The precedent for this in government is interesting. and are both incredibly solid and allow for very little variety – you can only prototype in code so there’s very limited potential to deviate all the way through from sketching to development. Even with all that, there’s still the need for hefty and sophisticated design reviews and assessments to make sure teams are making good decisions. This is because there’s still a lot of room for poor usage.

I’m being reminded (thanks Kate!) of this old – playing all the right notes, not necessarily in the right order so you get a completely different piece of music as a result. Not necessarily what you expected when you bought your concert ticket!

Question everything everywhere all at once

Getting the whole team on the same page is really important, especially around the purpose of the system and how to use it. We’d spent many meetings in the past going back and forth about whether we needed more guidance for our team or for the disciplines we collaborate with. We wanted to make sure we were crystal clear about this as a group so we have plans to create more training and simple guidance to ensure the wider team understands how to design for specific goals and journeys.

Question everything, everywhere and all at once to get out of your comfort zone to ensure that the people who are interacting with our services get the best experience when that happens. Being comfortable with awkward conversations is important, and it gets easier as you become more familiar with the work, design principles and flows.

We’d also love to do more on how to introduce content patterns and more robust design crits and 2i (our quality checks) so nothing falls between the cracks.

There’s always room for improvements, including how we accept the work and suggestions from the community vs the time it takes to evaluate and understand what solutions may work. This includes when we need to involve other disciplines such as performance analytics, SEO or user research.

We’re iterating as we go along. We’re not over buttons as yet. They have a role to play, just not in every single page, or journey…

Did we say we’re recruiting?

We are always looking for new talent.
If you are interested in being part of our team, naturally curious human-being who feel that trying to solve content problems is your thing, please get in touch. You can read more about our team and its ethos in our recruitment pages.

My sincere thanks to Claire, Jonny and Kate for their contribution and suggestions.

I want to… learn some more about current opportunities at the University of Southampton

So that I can… become a part of an award-winning digital user experience team

We’re really excited to be opening up a number of brand new design and UX roles in the University of Southampton’s Digital User Experience team. Whether you’re already in the user-centred design industry or hoping to enter it, we want to give anyone who’s interested a flavour of our work and what it’s like to be part of our team.

Our story so far

We’ve formed the new digital user experience team to continue the work of the OneWeb programme. As part of it, you’ll be responsible for delivering digital transformation across a whole organisation. You’ll be inspiring and supporting the University in taking a user-centred, data-driven approach to digital operations, products and services, and building up iteratively from small beginnings to grand designs.

Our ultimate goal is all about making people’s digital experience better. This means that every service must be designed around user needs, because that’s the key to delivering great products and services, which in turn means we can help our university achieve its strategic outcomes.

What it’s like to work here

We are:

1) User-led

We are extremely committed to really understanding our users, and have the willingness to do what it takes to deliver a user-led approach to our services. We are willing to challenge ourselves and our university in order to improve our services. This is a big part of our culture.

For a number of years, we were engaged with our university under the umbrella of the OneWeb programme. The work included some long-term design, research and product development and a lot of specialist work. This has set the tone for the next phase of a permanent team structure and some of our key priorities for the next 12-months.

We tend to refer to OneWeb as an accelerator to digital transformation work. Metaphorically speaking, it allowed us to reach Mount Everest’s Base Camp. We now need to climb up the mountain and enjoy the view, continuing on this challenging, yet rewarding, journey with our colleagues.

Our selection of Beta stickers featuring three mountain peaks with a basecamp below, just like what OneWeb has allowed us to achieve so far.

2) Multi-disciplinary

We’re a growing team of multi-disciplinary practitioners from design and research to delivery and product management. Our team members often work across disciplines to get the best results possible. We try to create an open, democratic and self-motivated culture. We trust our team members’ judgement and give them responsibilities to take actions and make decisions, always with support and discussion.

3) Inclusive

Everyone in our team has a stake in the direction that we’re going in. We’re interested in listening to diverse views as this often enables better outcomes. We have constructive team get-togethers to discuss the work we’re doing, as well as bringing in other colleagues from different teams across the University, to get a sense of the bigger picture.

Our work is collaborative. We’re a tight-knit team and incredibly supportive of each other, and everyone contributes to this team culture. The design and research capability of our team is made up of a combination of designers, researchers, performance analysts, SEO, developers, delivery and product specialists who work very closely together, supported at a management level by myself and other heads of disciplines.

We know that digital transformation can often be challenging so we put staff well-being before anything else. We’re flexible around parental responsibilities and other care duties. We will always do our utmost to support our colleagues, listen and respond accordingly.

4) Ambitious

Throughout the OneWeb programme it became clear that by using end-to-end and user-centred service design we could make some big impacts for both the external user and the organisation. Establishing this connection between users’ needs and business objectives lets us present some big opportunities to the organisation.

The blueprint and the initial service have been developed for key areas, providing the foundation for far more benefits and innovations in future. We’re excited to work further with colleagues from all areas of the organisation on this.

5) Successful

We’re incredibly proud of some of our recent . As the saying goes “nothing worth having is easily gained”. We have an impressive story to tell that will lead to long-lasting change.

As a new team it remains important that we continue to deliver value to help embed design thinking across different university teams, continually growing these ways of working.

We also share our experiences at different sector and industry conferences (small and large) and we encourage our team to submit talks, contribute to our blog and get invited as guest speakers to events internally and externally about how we approach user-centred design thinking.

Special stickers to celebrate our award wins in December 2021: User Focused, Excellence in Content Strategy and the Collaborator Awards. 

6) Dare we say… fun?

For the past few years we’ve been working remotely, which meant we had to work extra hard to develop healthy relationships within our team as well as other parts of the University.

We’ve hosted regular bi-weekly team events, and monthly ‘show and tells’ with university colleagues to discuss our work, progress and how it’s been achieved. We’ve also organised a lot of playful team building events from the comfort of our own homes when we can’t meet in-person. We have held activities that involved our own award ceremonies, virtual storytelling, quiz games and much more! (We can get pretty creative and competitive with the quiz games.)

We were also the first digital transformation team to ever inadvertently combine a murder mystery party with a cutting edge fashion show.

As we’re moving into 2022, we’re looking at introducing some physical get-togethers to ensure we develop healthy relationships through team engagement.

Come and grow with us

How to apply

There are a number of new opportunities available as we’re growing our future team.

All the jobs we’re currently recruiting for are on the . They are:

If you’re interested in working for us, and you’ve read the job description, please register with the website, and complete the application form.

Please pay attention to the closing date and the week we’re planning to conduct some interviews.

We’re planning to shortlist candidates quickly and inform you as fast as we can if you have been successful.

Still unsure?

We are always looking for new talent and people who value diversity, celebrate differences, and encourage people to be their authentic selves. We’re also happy to consider applications for different working patterns and will be willing to work with you to ensure you get the flexibility you need.

If you want to talk first, or if you are:

• unsure about whether to apply,
• want to recommend someone else, or
• just talk through the roles,

Please contact Ayala Gordon, Associate Director – Digital User Experience via or .

Thanks to Jo Caley (aka SEO Jo) and Rayne Prendergast, our Search Engine Optimisation (SEO) specialists, for putting this blog post together.

We’ve been using a tool called ‘crawl visualisations’ to reveal some significant issues with the structure of our website. 

Once a user is on our website, it’s very easy for them to get lost or to arrive at content dead-ends. This leads to a poor user experience, meaning they’re less likely to return to our website in future. 

Search engines (e.g. Google, Bing etc) must crawl a LOT of URLs to understand the site. Issues such as duplicate content and sitemap errors can confuse search engines and ultimately waste , meaning they will not index or rank our pages, which in turn leads to users not finding our pages in their search results. Boo!

We’re going to deal with this as part of our OneWeb search engine optimisation (SEO) and larger strategy work. We’ve already made a start by sharing these visualisations and information about the work as part of our challenge session – but the data and findings were so compelling we want to share them with you too.

Focus on your users

You’ve probably heard us banging the ‘user needs first’ drum over the past year. Our website is not for us, it’s for the people we seek to serve as a University. So that means focusing and understanding their needs first.

In other words, more about them, less about us.

As part of the preparation for the challenge session, we carried out a (Search engines crawl websites to discover content and store it in databases) of the main domain , using . We then used the output from the crawl to create ; interactive visualisations of our website’s architectures.

An example of an interactive force-directed crawl diagram from Screaming Frog. Credit:

An example of an interactive force-directed crawl diagram from Screaming Frog. Right click on a node to focus here. Credit:

Mapping the data

The crawler encountered 323,000 urls in total. Screaming Frog shorten each crawl map to the first 10,000 urls it finds, but even then the file is too large to reproduce online. Here are two screenshots instead, one showing a force-directed crawl diagram, the other a force-directed directory tree diagram.

Crawl visualisation

The internal linking structure of (first 10,000 urls encountered), created using a force-directed crawl diagram from Screaming Frog. ������:��H: Home page, VOD: Virtual open day, P: Prospectuses, SS: Student services, RGP: Regulations, guides and policies, SM: Sitemap, PGT: Postgraduate taught course pages, PGR: Postgraduate research pages, UG: Undergraduate pages

Directory tree visualisation

The directory tree visualisation of (first 10,000 urls encountered), created using a force-directed directory tree diagram from Screaming Frog. ������:��H: Home page, MOD: Modules, PS: Programme Specs, HU: Humanities, VOD: Virtual Open Day

How to read a crawl visualisation

Both visualisations’ start URL was the home page and show the increasing crawl depth of the site. Crawl depth is the minimum number of clicks it takes to get from the home page to the destination URL. 

The green nodes are pages which are indexable, meaning that search engines (e.g. Google, Bing etc). can find the page and return it in search results. 

The red nodes are pages which are non-indexable by search engines. They may be non-indexable because the pages:

• are
• contain a “” or “” tag (for example, to prevent duplicate content)
• , return an error (http status code)
• are blocked in the .

Therefore, they can identify areas of concern. 

The grey nodes show where a page has child pages, but the visualisation doesn’t show them as it has reached the 10,000 url limit.

The lines represent the link between one URL and another, via the shortest path.

Why visualisations are useful

Crawl visualisations show the internal linking structure of a website. Internal links help to establish hierarchy within a website and pass value and authority around the site. Effectively, this is how search engines might crawl a site and rank the content within.

Directory tree visualisations are useful because they show the organisation of a website and how users might navigate a site.

Either way, they provide scale and perspective and can reveal underlying issues that are otherwise difficult to detect.

What it all means

Our website is massive. These diagrams represent just 3.1% of the southampton.ac.uk domain. The crawl diagram shows that our website is very segmented, with undergraduate and postgraduate course pages operating as distinct and separate websites in themselves. 

Duplicate content and orphan pages (i.e. pages that aren’t linked to any other page) are likely to be issues and the sitemap template seems to be throwing errors. Other potential problem areas include the regulations, guides and policies, prospectuses, and student services sections.

The directory tree diagram shows how deep our website is (10+ levels) and that the ‘modules’ section is orphaned – representing a missed opportunity to acquire and engage prospective students through organic search (Google, for instance, tends not to index or rank orphan pages). There are also possible issues here with programme-specification pages – and more worryingly – some level 2 pages around the home page. This is a key area which OneWeb will need to address.

Next steps

Creating these diagrams has enabled us to visualise the website, albeit on a reduced scale, and produce a list of valuable action points to take forward into OneWeb. 

As part of the preparation for OneWeb, it is vital we drive a focused SEO strategy around keywords and metadata, and test the information architecture of the website with our users.

This will also feed into the strategy work around taxonomies (the way a website organises its data into categories and subcategories), metatagging (keywords and phrases which tell search engines what content to include in search results for users), and continuing iterations of workflows and governance. 

As always, if you have any questions, please get in touch. Thank you.