CASE STUDY #1

Streamlining the design cycle

Moving all UX work in-house for agile development of a new product

Project overview

In my role as ‘Director, UX and Marketing’ at Munich Re I worked on the addition of a new product to their digital insurance platform. I co-produced wireframes, high fidelity mock-ups, and led a team of two copywriters and one graphic designer.

This project marked an important milestone for the UX team, as in order to keep up with the demands of our agile development environment, we did all the UX design work in-house for the first time.

With this new approach we succeeded in:

Homepage Hero Banner and Calculator (Figma)
Homepage Hero Banner and Calculator (Figma)

The challenges

Because the Term Life product was eagerly awaited by the sales team and there was a limited budget for development, we were tasked with quickly designing the UX with minimal deviations from the products we already offered.

We needed to produce UX deliverables based on business requirements, input from internal stakeholders, and the user feedback we had on the existing platform and products, as received via the customer service team.

Discovery and requirements gathering

To kick-off the design process we conducted whiteboarding sessions with our insurance subject matter experts, business analysts and product owner.

We facilitated the review of the user experience of our existing life product while analyzing and prioritizing the requirements of the new one.

We identified various points of difference and UX challenges:

Whiteboarding Session (Invision)

Whiteboarding Session (Invision)

Agile wireframing and problem-solving

From low fidelity sketches in InVision, my colleague and I proceeded to co-create wireframes in Axure. We illustrated interactions for the developers via clickable prototypes and included notes highlighting this product's specific rules and logic.

We customized the homepage premium calculator, a widget shared across products, to accommodate additional fields ('Desired term' and 'Household income') required to calculate quotes for this product.

Calculator with Added Fields and Notes (Wireframe)

Calculator with Added Fields and Notes (Wireframe)
Since family coverage was not offered, we designed a new feature so users could send an email to their spouse inviting them to apply for their own coverage.

New Invite Spouse Feature (Wireframe)

New Invite Spouse Feature (Wireframe)
To avoid overwhelming users with too long a questionnaire, we designed it with only top-level questions displayed, reflexive questions appearing only based on users’ answers.

Reflexive Questions (Wireframe)

Calculator with Added Fields and Notes (Wireframe)
We proposed an indented design for the follow-up questions, however, due to the constraints of the Pega system, this was considered out-of-scope by the product owner. We agreed on an interim solution using colour coding to help the user distinguish the question types, until our recommended designs could be implemented in a future phase.

Branding and high fidelity designs

After confirming the feasibility of our prototypes with the developers, my colleague and I divided up the pages we would each design in Figma. I created high fidelity designs for the homepage and other marketing pages, including desktop and mobile views as references for the responsive site.

In this design phase we defined the product's unique branding, colours, fonts and photography while keeping screen layouts consistent with our other sites.

Marketing Blocks on Home Page (Figma)

Figma Design: Marketing Blocks on Home Page
In response to user feedback on the importance of trust in Parachute as a relatively new brand in the insurance space, we decided to replace the ‘Your Parachute Account’ section on other products' homepages with one about ‘The Parachute Promise’. This area provided a summary of our brand promise and a secondary call to action for users wishing to learn more on a new ‘Our Story’ page.

New Section on Home Page (Figma)

Term Life - Detail of Figma Design - The Parachute Promise
We presented the Figma designs to our executives and signed off on the UX, branding, and marketing copy.

Development and launch

Prior to the development sprint, we completed all required UX deliverables including Axure prototypes, Figma designs (desktop and mobile), and Confluence pages with the copy and French translations.
The UX team attended showcases at the end of each sprint and was involved in the user acceptance testing (UAT) phase confirming development matched the requirements and designs provided.

Quote Page - Desktop & Mobile (Figma)

Term Life - Detail of Figma Design - Quote Page

Learnings from the project

While working with an external UX agency had been beneficial during the early days of the platform, over time the internal UX team had grown and developed the expertise needed to take on this work.

Thanks to the collaboration between the UX, delivery, and development teams throughout this project, designs were well adapted to the system's constraints and very few clarifications and modifications were needed during development.

Bringing the entirety of the UX work in-house proved to be a very successful approach that allowed us to better meet the demands of our agile development environment.

The product went into production as scheduled in July 2022.
Scaling for enterprise productsImproving user productivity