npower

E-commerce platform

Npower formed a partnership with Allianz in 2017 to sell home emergency cover to begin in the winter period, as a way to add to their all-around service; with Allianz the insurance partner and with the assistance network to underwrite.

My role

UI, UX, Front-end developer

Involvement

UX research

UI Prototyping

UI Design

Front-end build

Duration

4 months

Team

Digital Marketing

Creative

npower creative & UX

Business Development

Account Management

Research

Combined effort for a combined platform

Working in close collaboration with Npower’s digital and UX team, we were responsible for creating a seamless solution that transferred a customer from the npower website to an Allianz hosted website to npower customers; and a potential new customer base that could then become npower customers for other services.

It was decided by the product team that there would be four levels of cover to choose from, with levels of excess and the option to pay monthly or an annual payment; resulting in a sophisticated product selection with multiple variables.

It was fundamental to integrate with Allianz back-office operations while carrying npower’s customer data between websites securely to ensure that existing npower customers received pre-conscribed privileges (discounts etc).

Summary

End-to-end product designer

I featured the lead product designer in the creation of the UI to working closely with npower UX team to deliver a full end-to-end solution that met FCA ruling while being as customer focused as possible.

My involvement also included a fast turnaround of the front-end development, as the project required someone that understood both the product, the requirements defined and experience developing a front-end solution that could integrate with the back-office systems.

This is still going through a cycle of improvements, with accessibility feedback from an external agency due to be integrated.

Alli-power?

Dual branding

Due to the type of partnership, it is a requirement to ensure both brands were visible and be transparent with the customer that is an Allianz product for npower customers. We worked the npower creative team to incorporate their brand into an Allianz feel - without butchering either brand and using enough Gestalt rules to distinguish the products and meet accessibility guidelines.

The product team that there would be four levels of cover to choose from, with levels of excess and the option to pay monthly or an annual payment; resulting in a sophisticated product selection with multiple variables.

We came up with a 'one-page' checkout similar to Virgin flights; however as this had to integrate into existing back-office systems; the development team estimate. Therefore we had to produce new designs based on a five-step check-out process.

Mobile prototyping

Responsive tables

We worked closely with the development team in creating a product table that could carry dynamic content that was highly functional, visually clear and visually replicated the npower brand across. We explored having two tables that swapped depending on the size of the device, but after researching interaction best practice and feasibility; the decision was made to have a table that could scroll horizontally.