NRMA website redesign
Continuous improvement of the NRMA retail website experience and implementation of brand redesign
NRMA Insurance is one of Australia’s largest general insurers, specialising in motor and home.
Challenge
How might we ensure everyone visiting the NRMA retail website feels the brand promise of ‘help is who we are’.
Objectives
Implement the updated brand styling to the digital environment;
Simplify website interactions;
Increase information transparency;
Create consistency across the website experience and collaborate to align the brand customer journey across touchpoints;
Deliver on NRMA’s brand promise of ‘help is who we are’.
Role
UI Designer, Lead UI Designer
Year
2019, 2020–2021
Team
I was part of the central delivery team working in an agile framework with a UX designer, content producers, copywriters and developers.
Approach
I had dedicated time towards ad-hoc UI design and updates as required by the project team, while leading longer term initiatives towards developing the NRMA digital brand style guide and implementing a component library in Figma.
-
Sprint planning
We worked in 2-week sprints, beginning each sprint with a team planning and prioritisation session.Prioritisation
I led the planning and prioritisation for all the component library work and liaised with our PO to schedule it into our sprint delivery. -
Existing research
Collate all existing research, analytics and requirements.Competitor analysis
Perform any competitor analysis or desk research of same or similar experiences.UX research
Collaborate with UX as required on tasks like mapping current user flows, customer journey maps and running customer interviews. -
Problem definition
Clearly define the problem and all requirements, scope, key collaborators and any unknowns.Risk definition
Depending on the problem clarity and risk ratings we would decide whether more research should be completed or to test and iterate live on the website.Hypotheses
Establish any hypotheses based on the discovery research. -
The design stage was quite varied with each piece of work for NRMA and relied heavily on definition.
Ideate, prototype, test
High risk work would fall into an ideate, prototype, test, repeat cycle until there was high confidence in the designs to move to high fidelity UI design.High fidelity design
Low risk work would often go straight to UI and run through a team feedback session and any iterations before moving to delivery. -
Detailed UI
High fidelity UI screens created across three breakpoints with developer details documented.Component library
Any new components are implemented in the design library and briefed into the developer team, then documented for all teams to access rules for use.Requirement mapping
Working with our PO, BA and developers we would map requirements and stories ready for implementation.Developer handover
Developer handover completed through Figma and Jira, including QA. -
A/B test
Designs go live to either 100% of the audience, or to 5% for A/B testing to gain further confidence if the change has high risk impact.Analytics
Analytics monitored to assess design impact and flag any unexpected results for further investigation.
Outcomes
Digital brand style guide
Creation of the business case for a digital brand style guide team and leading the definition and publication of foundation styles. This has evolved into an ongoing piece of work.
UI component library in Figma
Defined global design styles, components and patterns, simplifying developer and producer workflow and improving consistency, while adding meaningful use of design variance.
Re-designed page templates
Updated page templates for key business pages including product categories and payments pages. The redesigned CTP payments page resulted in a 9.2% uplift in payment completes.
Pattern efficiencies
Clear patterns and component documentation to utilise content producers for common page patterns, like product pages, while maintaining design consistency.
AA accessibility
All updated designs meet AA accessibility standards in the UI and we work with developers to constantly improve accessibility across the site.
UX/UI continuous improvement
Updated ad-hoc pages and flows across the NRMA website including appointment booking, finding your nearest branch and product segment pages. Often these pages rely on legacy technology and inflexible systems making progress incremental.