Improving a 10,000 page site user journey

Refreshing the UX and front end

Through ten years of organic growth, the SRA website had amassed a huge number of different visual, layout and interaction design patterns in use across the site. 

As a result it lacked consistency, looked dated, performed poorly on mobile devices and the user experience was clunky and confusing. The SRA understood that the website, if left unchecked, could undermine confidence in the SRA and the solicitors' profession in general.

The SRA needed to refresh the site: to reduce the maintenance challenge of the front end, simplify and modernise the visual design and user experience, and to ensure consistency regardless of device.

They had no desire to change the fundamental building blocks of the site, and they had the in-house skills needed to work with their established Content Management System (CMS). They simply needed to partner with a digital agency who could offer expertise in UX and front end design and development.

IE Digital was appointed to create visual, structural and technical consistency across the website and provide a disciplined, user-led approach. Ultimately the project would improve the user journey and presentation of content across the 10,000 or so pages the site had amassed.

Workshopping the user experience

IE Digital began with an initial sprint to review the user experience and design of the existing SRA website.

Our consultants conducted an interactive workshop with the senior leadership team, to demonstrate the need for improved governance over the SRA’s content. We explored a more user-centric approach to publishing, to help them understand the impact and relevance of their content, and how to organise it in line with user goals.

In a further workshop we agreed a general approach to the User Experience with the client, and determined the design patterns in most urgent need of attention.

IE Digital then reviewed the core templates and redesigned the identified components, based on best practice. With no development at this stage, the output was simply a set of assets to demonstrate the general visual direction.

Ultimately, we wanted our decisions to be informed by real user testing, in order to offer the best possible end product. So these best practice recommendations were presented to SRA’s main contact and key stakeholders, to get their feedback and buy-in before we invested too much time in prototyping and testing.

IE Digital have been excellent collaborators with the SRA on this project. They’ve engaged with all levels of the organisation and become a trusted part of the team. IE have steered the SRA towards a much improved user experience and improved governance, simplifying the site with thorough designs and a pragmatic approach.

John Rieger, Head of Digital Communications

Rapid prototyping and atomic design

Following our broad-brushed, holistic review of the site, IE Digital carried out a series of design and development sprints in three phases. 

We began by immersing ourselves in the existing user research to understand the different user personas and journeys. We redefined the elements and built an interactive prototype to test with real users – solicitors and others associated with the profession, students, and the general public.

We observed users as they navigated the prototype, to identify areas where they struggled to find their way around, and used this to inform the next iteration.

In the next phase, we developed modifications to the User Interface (UI). These were coded by IE’s front end developers to be implemented by the SRA’s in-house team on the live site. This was performed in a series of development and testing sprint cycles. We created new, responsive, digital design patterns for testing with real users, using disposable rapid prototyping, iterating existing designs and adding new patterns or evolving existing ones at each stage.

With an overall strategic objective of improving consistency and usability, we reviewed every component of the site at the “Atomic” level. Bit by bit, from bullet points and numbering formats through to data capture forms, we examined the site to make incremental improvements. Once the code was implemented within the CMS it was tested to identify any issues, and the solution iterated to refine the UI: Do – Test – Refine – Implement – Repeat.

Overall, we condensed the site’s c.250 distinct design patterns to just 50 following the redesign. The entire process was completely platform-independent, and built entirely using a mobile first user-centric approach.