The UK Government service to apply for Visas and Citizenship had detected several problems with their online processes.
We worked to optimise the main journeys for users as well as content, language, form design and the look of the site, with accessibility and inclusivity in mind.
↓ Read the full story below.
↓ I joined the UKVCAS team halfway through the project (to support my colleague Colin Mcquistan), and all along our focus was on:
So what did we need? We came up with a plan of work by finding out more about user needs.
The scope of users who access these visa services is very wide. We had to keep in mind a wide range of constraints: from the generational, cultural and language-related to the permanent, situational and temporary users face when interacting with the platform.
We designed with accessibility in mind, but also with an inclusive design mindset.
Eventually, we narrowed down the journeys to work on:
This allowed us to break the journeys down into stories, but to structure the work effectively we needed everyone to be in sync as to what needed doing and prioritising.
We then held a series of workshops with stakeholders on what wasn't adding value and/or was a problem, what could be improved and whether there was room for innovation, then we were able to work together to prioritise and create a useful backlog.
1. Improve information architecture, revise content and unify language.
A content catalogue of which pages needed content and the type of content, split between logged in and logged out pages. We also analysed the content upload system from our side and the end user's.
Language needed consistency, not only in terms of tone and voice but also in terms of labelling across the site (for instance referring to appointments as bookings, etc.).
One of the main goals was to lose pages with duplicated content, and make the site map easier to navigate and memorise by users.
2. Create a new pattern library for a new look.
A new pattern library, documenting the type of components and the scenarios for their intended use. Find a new visual style that would look modern but rather timeless, fresh, clean and minimalistic. This means we needed a distinct look that would at the same time suit the GDS guidelines.
We worked on modernising base components, unify branding and narrow down text styles, etc.
One of the goals with this was to create template pages to make things more efficient (UKVCAS could then create more pages in the future without further design work), and verify that templating was realistic and future-proofed within the existing tech stack.
3. reevaluate processes to make them more user-centric
Focusing on the main journeys we described in the backlog, we worked on streamlining processes: things such as preventing errors, improving on-screen information and talking to users in straight, simple and consistent language made users more self-sufficient and decreased dramatically the number of support enquiries.
One of the principles was to always explain to users what things meant, what the next step would entail, why things happened, and what to do to correct things when possible.
A key part of this was to improve the FAQs. We placed them on the Home for visibility and tweaked them into a dynamic component that would serve the most popular upfront.
UKVCAS transactions can be very critical, so we set out to improve the "next steps" type of info everywhere, addressing the anxiety element that research had found when users would when they didn't know what to expect and when.
4. Exploring new visual styles for the refreshed pattern library
We looked for something modern, fresh and low-maintenance. Different drafts were evaluated before defaulting to the most minimalist of all. Style and illustrations had to be in line with branding and be scalable (for any future new pages), which means that we should always be able to replicate a visual style in the future with minimal effort.
5. Provide more hand-holding overall
Some processes appeared quite complex for users, combining area availability for appointments in real time, combined with different levels of service (premium appointments, etc.). It was important to address this by visually guiding users with a simplified UI and better content hierarchy.
The most obvious model to follow here (one that many users would recognise) was that of travel bookings online, using a stepper and a 'slides' calendar for clarity.
Things worked out greatly on all the accounts we looked at at the start:
My role
Information architecture, content design, user interface & component specs/documentation
Thanks to
Colin Mcquistan (UX prototyping)
Links