NFU Mutual (NFUM)

Design system

During the design research phase, I undertook a review of NFU Mutual’s current design, brand, and competitive landscape. The audit findings were compiled and translated into a series of design recommendations across various areas, which resulted in a new and agreed concept for the digital design vision for NFUM.

Proposing the development of a cohesive design system aligned with their vision, we advocated for the creation of Design Principles, Style Guidelines, and a Component Library to ensure consistency across all digital platforms. This involved crafting overarching design principles for the NFUM brand and establishing an atomic design system from scratch, covering foundational style elements and components. The entire system, seamlessly linked through Figma and Storybook, incorporated UI elements with clear patterns and rules from the foundation and up, with each component thoughtfully designed for optimal interaction behaviour, accessibility, and inclusive design.

Enhanced UX Journeys, User Testing And Research:

While redesigning NFU Mutual’s appearance, we identified opportunities to improve user journeys from a user experience perspective. Our goal was to present opportunities in where we go beyond the initial scope of the project and create an enriching and valuable experience for users which resulted in an increased scope of work. Below are some key areas covered and how I approached it:

Navigation

The initial focus of our redesign project addressed the Information Architecture (IA) and navigation system on the website, responding to issues identified through user insights. Challenges included duplication, unclear labelling, hidden key journey items, and an unbalanced UI.

In response to the pain points identified from the current website, the information architecture was thoroughly reviewed and underwent a comprehensive discovery process to group items effectively. Additionally, we assessed the impact on the entire user journey of the website. As part of this process, I designed a new navigation system with a refined IA, offering a more streamlined and visually engaging experience. The redesign featured clear headings within the menu, better use of space, a clear hierarchy of information, and a customised mobile interface.

To validate its effectiveness, we conducted user testing with built prototypes, engaging existing customers and potential customers. This approach ensured that the new navigation was efficient. Feedback from the testing allowed us to refine the groupings and address content or wording that did not resonate with some users.

To bring the evolving vision of the navigation to life, I created a motion interaction using After Effects to demonstrate its functionality, which also proved beneficial for engineers.

View Desktop Motion Video

The navigation design placed significant emphasis on inclusivity and accessibility, ensuring a broader and more accommodating user experience, as detailed further below.

Product Pages

From gathering feedback from users and the wider business and reviewing the data on the current product pages, the templates highlighted issues of excessive content, unclear structure, overuse of imagery, and a lack of “get a quote” CTAs which was a key metric. Analytics exposed poor scroll depth, high bounce rates, and user disengagement. Through collaboration with product owners and stakeholder workshops, we gathered requirements.

From the insights gathered, the redesign focused on a clear hero section with key actions, social proofing, and further content streamlining. To focus the pages purpose and enhance the brand, I created a set of purposeful illustrations for each product page’s hero section, replacing generic imagery that lacked relevance to the content.

Inclusive Design & Accessibility

My passion for accessibility and inclusive design was integral to the project, embedded into every process. We explored various approaches to accommodate diverse ways of using and accessing the website, ensuring we met at least the AA standard. For example, during the design phase, we examined the tabbing order of the navigation, incorporated skip links, corrected page semantics, and implemented thoughtful alt labels. We also considered screen views when zoomed in, which influenced solutions for tooltips and text/heading structures.

Throughout the development of the design system, every component was carefully considered and reviewed against WCAG guidelines. Additionally, understanding NFU Mutual’s customers—such as an older demographic and users in farming areas with limited Wi-Fi—allowed us to delve deeper into inclusive considerations.

Overall Impact

NFUM’s new website, designed with a customer-first approach, has received positive feedback from users. A key stakeholder highlights the website to be ‘A truly customer centric website that aims to make doing business with us easier’. Data highlights an increase in button clicks ‘Get a quote’ an increase of completion of tasks on prime journeys and a reduction on bounce rates.

As the leading product designer on the account, the client has developed trust in us to explore additional areas of their digital ecosystem. We are now focused on building an online account service for customers and creating a digital experience for their products. My specific role centres on the end-to-end flow of their Motor quote-and-buy journey.