LIVE URL: tlevels.gov.uk
The starting point
Unlike other Government projects I had worked on, this wasn't a transactional digital 'service'. Being a campaign and marketing website its purpose was solely focused on awareness and behaviour change. As the end-point for the print and social campaigns, the website needed to provide the user - prospective students - with additional information and inspiration.
After the first release was somewhat rushed out to support the campaign launch - this was where I was brought in.
Understand the brand guidelines
This is a new brand, in which we (as a digital team) have had no input into. As the UX designer, I need to live and breath this document.
Review the MVP user research and user needs
There were several rounds of user research before the launch of the Minimal Viable Product (MVP).
We needed to understand:
1. What user needs have already been documented?
2. Which ones have been met already by the MVP?
3. Which are left unmet?
These then started to form our backlog.
DAC test the site
After picking up on some accessibility issues in my review, I recommended a Digital Accessibility Centre test of the site. This is good practice for any Government service, but especially in one with so many new elements due to the branding. More stuff for the backlog!
Holistic review
As the UX designer, I had some concerns with usability, user journey, and overall visual appearance of the site. Therefore, in what was essentially 'Sprint 0' for this project, I chose to complete a holistic review of the whole site. We'll take a closer look at this process next.
A CLOSER LOOK
Holistic review
Let's start by looking at a sample of the initial (MVP) site launch.
After looking at the site in some detail, collaborating with content designer on the team, I presented a full design and content review to the Product Owner, which we prioritised as a team. Some things I felt were none negotiable, like accessibility issues, and went straight into the backlog. Whereas others I knew were just my design opinion and...
...without further user research - it's exactly that, an opinion, everyone has one on design. Yes as the designer I'm perhaps more qualified, but I'm not the user.
Therefore, it was important to separate opinion on visual design and content structure from pure usability and accessibility issues. Instincts on the other things would be proved correct through further user research if they were in fact issues.
A closer look at some of the immediate issues, taking the 'T Level subjects' page as an example.
PART OF THE SOLUTION
Creating a design system
A lot of the issues picked up in my holistic review: inconsistent patterns, font sizes, missing patterns/components, etc - I felt could be fixed by having a design system. Something to define the designs around and build from. Based on what I'd learned from using the GOV.UK design system, I started to define things like typography and button and link styles, with different states.
The design system has been, and will continue to be, iterated based on findings from usability testing and the need for new elements.
ITERATING THE DESIGN
The design process
User needs
Every design we do should aim to solve a problem - a user need. Here, these may have been unmet ones logged by the previous team (in their Discovery and Alpha phases), or they're new ones we discover through further research and usability testing.
Overarching user need
As a student I need to be aware of, and understand T Levels so that I know all of my options after my GCSE's
BUSINESS NEEDS
It would be idealistic at this point in the process not to mention business needs. There is always a balance between creating a product or service for your users or for the business (the client). It's my job as the UX designer to of course lobby for the user - but also to find that balance between both sets of needs. Especially with a product like this one, where the business needs are arguably as least as important as the users.
Overarching Business need
As the Department of Education I need to raise awareness of T Levels with students and parents so that uptake is good and they are a success
Ideate and Refine & prototype
This is my favourite part of the process. This is where no matter how big or small the problem, I should have more than one idea. Different types of problems or tasks require different methods and tools.
SKETCHING
I often start with pen and paper and quick sketches. It's the quickest way for me to brainstorm and get ideas out of my head. These sketches definitely won't win any awards, but thats the point - it's quick and dirty.
QUICK MOCK-UPS
From here I normally still have a lot of ideas floating around - especially with this project which was highly brand focussed and visual. When the success or failure of a design is affected so much by the brand and visuals encompassing it - I found it easier to make decisions on designs when they were in fairly high fidelity. Crucial though in this approach is the word 'quick' mock-ups, for me this has to be as fast as sketching - it's digitally hacking around and sketching in high fidelity.
This tends to be the perfect stage to get feedback from peers too. Therefore I helped introduce design critiques with wider designers and researchers every 2 weeks.
Mock-up example 1 - 'Find a T Level' map redesigns
Mock-up example 2 - 'Student homepage' redesigns
WIREFRAMES AND FLOW DIAGRAMS
In addition to using wireframes to work out the position of elements in the UI, I find using a massively simplified version of them can be great to communicate pages (or page types) in a user flow diagram.
Again, flow diagrams have many uses and take many forms throughout a design process. They can be everything from early sketches, to having a huge part to play in my hand over to dev teams. But I also found them great here for communicating different ways of integrating a new user type and campaign into the site.
Option 1 - Adding an 'Industry placements' (business / employer focussed) page to the current site
Option 2 - Joint homepage with clear user group specific CTA's. Still one 'merged' site.
Option 3 - Joint landing / toggle page with user group CTA's directing to separate section of the site. Still one site, but distinctly split. Toggle page bypassed by user group specific social campaigns (most of the traffic).
QUICK CLICKABLE PROTOTYPES
I'll often use this approach when I have a couple of options for a design or flow. Rather than spend lots of time coding different options and scenarios into the main prototype I will often create quick clickable prototypes in XD or InVision - using the quick mockups. These design experiments can be ran alongside the main prototype as scenarios in research, or when in Alpha, this type of approach dominates. As with the previous step, the benefit of these prototypes is they are quick and throw away - it's easy to get attached to something that has taken more time.
An example of me using this approach to quickly test a couple of different approaches to the landing / toggle page 'below the fold' content.
CODED PROTOTYPE
Having already explained some of the benefits and use cases for quick prototypes, I don't want to be mistaken, I am in fact a big exponent of coded HTML prototypes. Having worked a lot on more traditional Government services using the HTML prototype kit I have seen the benefits working in such high fidelity:
• research effected a lot less by prototype issues (only certain bits working or being clickable etc)
• designing and testing with fully responsive prototypes has exponentially helped my understanding of what's possible and my work with dev teams
• When it come to the thing you're testing looking and feeling as close to the real thing as possible, I've seen more positives than I have negatives
After picking up the MVP prototype (put together by a frontend developer), I have worked in HTML and CSS to iterate the prototype over several versions to include: a complete redesign, new page templates and new components and patterns with all working states.
Test, test, test
After rounds and rounds of user research, and lots of iterations of the various designs and prototypes we'd found out lots about:
• our users and their expectations for the site (including lots of new user needs and clarity on some we already knew about)
• using the brand on the website and how best to interpret it digitally
• lots of usability and accessibility issues, and places to improve the design (which we tackled over time through each iteration)
KEY FINDINGS AND BIG THEMES
TICKER-TAPE & FONT
The font was a consistent issue throughout user research. Typewriter is very much a 'print' font and was really being pushed to it's legibility and accessibility limits with the longer form content on the site.
The ticker-tape caused similar issues, with some users thinking it was a clickable element or menu (especially when butted up against other sections) and others struggled to read it altogether.
MAP vs NO MAP
The original implementation offered little interactivity, and tested poorly. We experimented with more integrated search and map designs (some seen above).
Despite some users verbally stating they "liked maps", we observed it actually slowed down their understanding of the search results. For most, who were only looking for colleges in their local area (an area they knew) it added little actual value.
STUDENTS CAN READ TOO!
We had to somewhat fight a misconception in the wider team that 'they're students, they don't want to read much' - so we just need short, sharp headlines across the site.
We in fact found that this approach, for lots of students, just wasn't giving them enough to make a decision about or consider T Levels. As long as the information was broken up into bite size chunks, and using elements like accordions, so it wasn't overbearing - some long form content tested very well.
MORE WHITE SPACE
Designers love white space, and I'm no different, but the MVP site had very little. The brand in it's strictest sense is very blocky, loud, eye-catching. This is great for social media and print campaigns, however didn't translate as well to digital.
It caused lots of issues with responsiveness, but also caused usability issues. We found it didn't encourage scrolling for example, users often hit a colour block (sometimes black) and thought it was the end of the page.
ITERATING THE DESIGN
The challenges
1. Working with a new brand
Being a very new brand, lots of people were very attached to it and its application. The challenge was adapting the brand to work better in digital environments, and bringing those stakeholders along with us.
2. Being an extension of a campaign
This brought new challenges I hadn't experienced before, like working with 'Comms' colleagues as well as the usual content designer within the digital team. As they were working on the rest of the campaign, we had to ensure it all aligned - despite the content having different purposes in different places.
3. Lots of stakeholders
Some of which had little experience of digital and agile - the ongoing challenge is lobbying for the user whilst also bringing these stakeholders along the journey and onboard with a new way of working.
THE OUTCOME
tlevels.gov.uk
First let's take another look at those screens from the overview earlier on (in the holistic review), and see what they look like now.
The details
FONT
After lots of UR feedback and accessibility concerns, we finally managed to get a new font introduced in digital.
Clear CTA's
To each of the main sections, with new, consistent button styles with distinct hover and focus states.
Video relegated
Analytics showed very low viewing figures -
most users had already seen it in the social channels they have come from.
USe colour more sparingly
Although a massive part of the brand, I have used the bold colours for attention-grabbing calls to action and headers.
Link Styles
New link styles, utilising the brand colours but remaining accessible by only using them for the underline and hover state.
USing the colour palette
I adapted the use of the colour palette so that colour could be an additional visual cue between content for different user groups. Student pages predominantly using the red, and the new employer focused pages using the purple.
TICKER-tape
After lots of back-and-forth, we do now have a ticket in the backlog to look into removing all ticker-tape in digital environments due to the accessibility and usability issues.
new pages
More information on the actual course structure was the biggest unmet user need for both students and parents.
More white space
In particular when creating this new template for long-form content, I managed to work in much more white space. Giving the content more space to breath and making it more easy to consume.
We also introduced another user group...
But more on that soon...
THE LEARNINGS
Key takeaways
1. Change doesn't have to be immediate
It can be easy to see lots of things you could or should, or want to, change - but this doesn't all have to happen at once. Prioritise and pick your battles.
2. User research is the number 1 weapon
Findings consistent over time are hard to argue with. Even harder if you manage to get stakeholders to dial into research sessions themselves and witness issues first hand.
3. Be clear on design opinion vs usability / accessibility issues
Separate in feedback. Once trust is gained in you as a designer, as a team, and in digital / agile processes - then opinion will become listened to more.