Mobile design library
Laying the foundations
Company: NRMA insurance (IAG)
Project Name: Mobile app redesign
​
Roles and Duration:
Mobile app designer
Interaction & visual design,
Prototyping & testing, User research
Sept 2018 - May 2019
About NRMA
​
NRMA is a premium insurance brand that has a customer base of 3 million people.
They offer a range of products from car, motorcycle and home insurance, to travel insurance. The mobile app allows users to check,edit and make a claim to their
insurance policies.
​
NRMA is a part of Insurance Australia Group Limited (IAG) which is the largest general insurance company in Australia and New Zealand. The Group’s businesses underwrite almost $12 billion of premium per annum, selling insurance under many leading brands across the Asia-pacifc.
​
​
The Problem
Business problem:
​
-
NRMA could not share mobile components for use in other new mobile app projects and for other insurance brands within IAG
-
Business did not have the budget and resources to manage multiple apps within the company
-
The app is not scalable for future app functionality
Customer problem:
-
Inconsistencies in user patterns and components resulted in poorer user experience
-
Users have trouble navigating, finding and editing content within the app
-
The app is inconsistent with the brand positioning and values within the market which raises security concerns
-
The app is in-accessible to users who have physical disabilities and/or vision impairments
​
​​
​
The Solution
1. Mobile app design library
A component library is to be developed that allows it to be repurposed for other new NRMA app projects. The whole NRMA app user experience and design, will be replicated for other insurance brands under the one code and managed by the one product team.
​​​
2. IA and restructure
Navigation of the mobile app will need to be reconsidered based on the research findings but this will be detailed in the next section.
Challenges
-
Getting everyone on board
This proved to be a challenge as not all stakeholders may see the value of a design system and developers would much prefer to work on the next exciting technology. But in order for a project to have the best outcome, everyone needs to be cheering for the same team.
-
New branding
NRMA was undergoing a new branding strategy and deliverables were spread out across the financial year which meant we had limited guidance on brand direction and assets. Furthermore, reaching out to other insurance brands required knowing the right stakeholders.
-
Consistency across the web platform
It was necessary to work closely with the brand and the principal design team, that were across multiple projects to ensure consistency on all channels. While this was important, the needs of a mobile user were different to those of desktop user. We had to ensure mobile had its own voice, as it had its own native components depending on the platform.
Laying the foundations
This design library is based on the idea that each component is made up of a series of small and smaller blocks, like legos. These are to be combined and used for more intricate layouts.
​
The naming system was crucial as developers will be using the same naming structure for the components (No specific colour reference for names but using attributes to sum it up). The problem that became apparent was that designers and developers weren't speaking the same language when we were talking about specific components and interactions. This meant designs needed to be reworked on many occasions. With this new system, it meant future design referencing will be 'flawless'. (Well, that is the dream.)
The design sketch file also needed to be structured in a way to be able to differentiate between multiple brands. Setting it up a certain way meant that a brand re-strategy won't cost millions of dollars to refresh everything. And let's face it, this happens every few years for every company.
​
​
But why do you need
a Design library for mobile?
We understand Android and IOS already
has their own native components and they come with
accessibility considerations. Using native components minuses half the coding time. But with every good user experience, it usually needs its own custom components
and not just something out of the box. This mobile app design library makes it easy to reference and know if patterns are being applied consistently. You can question if new components need to be added if a similar one can be used. It will be the 'single' source of truth and made available online for agencies.
Process...
The process wasn't linear as we hoped. We designed the library simultaneously as we were testing and designing the mobile app. It was essential to ensure all sketch files were set up properly to be spun up for other brands. The development team had tech spikes to determine best practice moving forward as they were starting code from 'scratch'. They would have to structure the files to recognise the different brand attributes and apply it to the different components pending on the insurance company.
The final product
The final result of the NRMA design system was something that was versatile,
minimalistic, intuitive and premium to use.
Spinning up the other app
And in the middle of meeting the brand team to get approval; talking to the web design team and web developers; accessibility tech spikes...we had to spin up the app for budget insurance "SGIC". It wasn't as easy as we anticipated but overall we were happy with the results.
