“The NHS Highland website had existed in its previous form for over a decade. It had long been viewed by the organisation as offering an outdated experience for service users, staff, and stakeholders; with knock-on effects for services and how NHS Highland was perceived.”

Graft – NHS Highland Website Review Report (2021)

In February 2022, NHS Highland published a tender for the redevelopment of its website. This was informed by an in-depth Discovery process and website review conducted by Graft, that elicited and prioritised the needs of users, today and in future.

Factory 73 was engaged to develop a new website, and as long-term partners, we were asked to help ensure a user centred approach was maintained throughout the design and development process. This involved:

To ensure we were able to deliver the most value within the constraints we adopted the following approach:

Kicking things off

Things got underway with a project kick-off meeting which, at its core, is used to establish a shared understanding of the work to be done, and define how to deliver the maximum value within a project’s constraints. This involved running through the following:

Standard discussion points:
Project-specific discussion points:

This was a highly positive meeting that allowed us to establish a shared understanding of priorities. It also provided the opportunity to discuss key challenges in detail. This informed an updated approach that reflected what was required to make a phased launch plan feasible.


  • Identify client-dependent inputs required to achieve key milestones, then provide the support required to overcome these. On this project, an example of this would be the need to provide content guidelines that would accelerate the optimisation of key content.
  • Empower stakeholders to make informed decisions by presenting the pro’s and con’s of different methods. If and when you make recommendations, ensure these are driven by a sound understanding of each project’s specific requirements and desired outcomes.
  • Focus exploratory research on low-confidence / high-impact assumptions, leverage evaluative testing for high-confidence and/or low-impact assumptions.

Translating recommendations into requirements

As this was an agile project, the first thing we did was to translate Graft’s website review document into a technical development brief and functional requirements document. This detailed key strategic information and detailed all known functional requirements by phase, into the following categories:

This provided the development team with a concise overview of strategic objectives and desired outcomes. It also enabled the development team to focus on scoping the key functional requirements and integrations required for the launch of a ‘minimum viable product’ without losing sight of the desired future state.


  • Ensure you document strategic, as well as tactical information, to ensure everyone understands the “why” behind the “what” of any requirement.
  • Always categorise your requirements – by type as well as priority. As this will help you identify key dependencies (e.g. content) and potential bottlenecks (e.g. availability of resources required to complete the scope of work required).
  • Ensure technical requirements are documented in a way that enables development teams to be on-boarded efficiently.

Learning from other health boards

Once preliminary documentation had been defined, we began to build on our prior analysis of the website review document by conducting secondary research. This commenced with an in-depth review of other citizen-centric health board websites. This was used to:

Ultimately, we were looking for approaches, patterns or components that contributed to a positive user experience, versus that had a detrimental impact. For example:

Positive UX

  • Always align key content and main navigation options to end-users likely mental models and top tasks.
  • Ensure “red routes” (high-visibility options) for likely repeat users (e.g. Patient Hub, Staff log-in, etc), are presented effectively.
  • Always provide a persistent search option that provides useful search results. 
  • Always adhere to accessibility requirements.
  • Ensure all interactive elements are styled effectively and adhere to usability conventions.
  • Ensure content is not outdated, duplicated and/or fragmented across multiple pages/sections of the website.
  • Always ensure alerts and warning messages are worded sensitively and implemented effectively.

Negative UX

  • Do not adopt an organisational approach to information architecture.
  • Do not use carousels to detail key information (especially when they auto-rotate).
  • Do not overload users with too many links competing for attention in close proximity.
  • Do not use unfamiliar terms or labels that are unlikely to be instantly understandable to citizens.
  • Do not use decorative images that unnecessarily increase page load times.
  • Do not create “siloed” content that does not help a user identify what to do next.
  • Do not recreate content that is published, and more actively governed, on third party websites.


  • In addition to documenting best practices, remember to document any issues encountered too. As this will help you identify what not to do, as well as what should be done.
  • Remember there is no one right way … every health board website should be designed to respond to the specific geographical, social and operational realities of each area.

Designing and building services for the NHS – meet NHS Digital

The NHS Digital service manual is an incredible resource that empowers designers to learn from the research and experience of other NHS teams. This includes the NHS Design system, that provides detailed guidance on how to build consistent, usable and accessible user interfaces. Most importantly, all of the patterns, styles and components detailed within it have been tested and provide known solutions to common needs.

Therefore, as soon as we got the green-light from NHS Highland we started the process of testing the prototyping kit and investigating how this should inform our approach to producing design deliverables. Our initial inclination was to skip to code as the availability of a pre-tested visual language ensured we’d be able to focus on designing and testing journeys, and not the usability of particular interface elements. However, upon further investigation it soon became apparent that despite this being a technical accelerator, using it to showcase how the underlying information architecture of the website could be optimised wasn’t the right approach to take. So, it was at this stage that we made the following decisions:

We would use wireframes to:

These were provided in an editable format so all stakeholders could contribute to this process efficiently.

In addition to this it was also decided that the new NHS Highland would:

These were styled to align to NHS Digital’s design system so these would be representative of the interface and visual language to be used. This allowed us to rapidly visualise proposed changes to the information architecture of the new website and then share these with internal stakeholders for feedback and further iteration.


  • The NHS Digital service manual is actively maintained by a dedicated service manual team. Make sure you and your team revisit this invaluable resource whenever you kick off a new health and care project, as it is constantly being updated and extended.
  • Choosing how you prototype proposed changes is a critical decision that should be influenced by a myriad of factors, e.g. skills and resources available (e.g. design, technical, etc), likely effort per option, scope/scale of change to be showcased, risk, what is the appropriate level of fidelity to use, what is the feedback and testing process, what tools are available, etc. Always consider what you’re prototyping, and why, prior to selecting how you’re going to prototype proposed designs.

Understanding context

Graft’s website review report provided a valuable overview of the distinctive characteristics of the NHS Highland area; including geography, demographics, digital connectivity and digital exclusion, and their implications for the future website. This information was supplemented by further research into digital connectivity and mobile coverage across the NHS Highland area. Doing this informed key content decisions, for example, the use of unnecessary decorative images was not recommended, as this would make the website unnecessarily slow to load in low-bandwidth environments.

In addition to this, we collaborated with NHS Highland to build a deeper understanding of delivering health and care services across some of the most remote and sparsely populated parts of the United Kingdom. This involved investigating:

This research was developed into 15 proto-personas that detailed the needs of archetypal characters. These were not only useful for highlighting the disparate needs of users, they also detailed a compelling case for why the website had to be focussed on the needs of citizens.


  • Review the information at your disposal, identify any gaps or low confidence assumptions and then identify if and how you could fill these.
  • Do not rely on what reports tell you … research we conducted highlighted that there was a substantial disconnect between what reports and speed tests claimed and people’s “on-the-ground” experience.
  • Work with domain experts to define a broad range of archetypal scenarios, triggers, and journeys. Then investigate how key variables could influence these, e.g. location, friction, etc. As this will allow you to identify the breadth of needs that must be met.

Overcoming the noise of over 2,800 web pages

One of the greatest challenges to launching a new NHS Highland website was the volume of content that had to be analysed and optimised. Over the years this had grown to over 2,800 web pages. Given the volume of content, and the fact that different content teams had written and published these pages, it was no surprise that this had knock-on consequences.

For example:

To ensure we were able to develop a user centred approach to information architecture, as well as address known issues, we needed to audit all of the content on the existing website through the lens of the proto-personas developed. We adopted the following approach to ensure this activity delivered the maximum value and expedited the content migration process. This was achieved by analysing the existing site map and identifying the following information per page encountered:

Doing this enabled us to identify:

This process resulted in a leaner, user-focussed site map that was designed to accommodate a phased approach to content migration.


  • A content audit takes a substantial investment of time … do not underestimate or shortcut this … doing so will result in compromised findings.
  • When analysing content don’t just log issues, try and identify the root cause of the issues you encounter.
  • Collaborate with domain experts to secure buy-in for alternative approaches to labelling and organising information from an end-users perspective.
  • Always address duplicate pages or the unnecessary fragmentation of content across multiple pages.
  • Try and identify what content must be published (and therefore governed in-house), e.g. local information, and what content should be linked to (governed externally), e.g. national information.

Visualising proposed changes

Once a revised site map had been defined we were ready to start visualising key page templates so that we could finalise the content blocks required per page template. The following elements and page templates were developed:

In addition to this, we also designed a catalogue of reusable blocks that could appear across the website as and when applicable. This included components such as:

These were developed in a low-fidelity wireframing tool to ensure:

We worked closely with stakeholders to refine these proposed page templates and key components prior to their implementation by Factory 73.


  • Consider sketching out ideas before starting to develop your digital wireframes.
  • Re-use pre-tested patterns, components and styles.
  • Define header and footer elements prior to defining the body content per page template. 
  • Use a min. font size of 16px for body content on mobile.
  • Craft your headings, sub-headings and micro-copy.
  • Adopt a mobile-first approach to wireframing, then scale up to desktop.
  • Where possible use representative content, not “lorem ipsum”.
  • Define the core (mandatory and optional) content required per page template.
  • Hot link your stand-alone wireframes to showcase how the website will work.

Adopting a phased approach to launch

A rapid development process ensured a staging website was soon available for testing. A rigorous quality assurance process was implemented to identify any unforeseen issues and ensure all accessibility requirements had been adhered to. Once this process was complete NHS Highland was able to start migrating content prior to a public beta launch and open testing.

“It is really important to us at NHS Highland to put people using our services first, and to design services around their needs to give them the best experience. The website is a key place to demonstrate this and we’ve had lots of positive comments about how straightforward and easy to use the new site is.”

Ruth Fry – Head of Communications and Engagement, NHS Highland

To minimise risk and disruption it was agreed:

This approach ensured it was possible to launch a publicly available website, before iterating and extending functionality and content further through successive development rounds based on user feedback, website analytics and organisational needs.

To capture the feedback required to inform future development rounds, we defined the following:

These automated feedback loops were deployed by Factory 73 and an ongoing feedback capture process was implemented by the Communications and engagement team at NHS Highland.


  • Identify knowledge gaps and then identify who you need to conduct research with, and what questions you need to ask, to close these gaps.
  • Avoid vanity metrics … identify key performance indicators.
  • Ensure feedback loops are actively monitored. As and when issues arise, ensure these are analysed appropriately and any remedial action(s) are added to a backlog for future prioritisation and implementation.
  • Use qualitative research to complement quantitative research.
  • Ask questions that help you understand “who” is providing input, e.g. it is important to know if you are capturing the feedback of a healthcare professional vs. a citizen.
  • Establish a baseline, then compare data to relevant time-periods … seasonal traffic patterns matter.

The long-term roadmap

The new website is already out of beta and is now NHS Highland’s primary digital touch point. But this isn’t the end of the process, in fact it’s just the start. As Factory 73 and NHS Highland continue to extend the website, we’ll be on-hand to:

We will also be collaborating with NHS Highland to ensure we share any assets that could be of value to those working on similar projects in the future. In the meantime, should you wish to learn more about this event or any of the outputs detailed please feel free to contact us.

“Border Crossing UX’s thoroughness, commitment to adhering to NHS digital design standards, and impressive knowledge of the Scottish Approach to Service Design were instrumental in delivering a truly user-centred website. Their professionalism, attention to detail, and expertise surpassed our expectations. Their contributions, including translating research into phased requirements, developing target user personas, and implementing comprehensive information architecture, have made a significant impact. We highly recommend Border Crossing UX as a trusted partner for delivering outstanding results.”

Graeme McClurkin – Managing Director, Factory 73

François Roshdy

François is director of user experience at Border Crossing UX. He specialises in helping clients continuously improve the experiences they deliver.