MPB

One-click product protection

MPB were looking to provide their customers with the option to add extended product protection to their range of products. Add-ons can create friction in the checkout process, I was asked to come up with an on-brand solution that would be seamless for the user.

Requirements of exploration

Placement

This solution was for the checkout part of the user journey and it meant there could've been a number of different instances depending on a user's selections that I had to design and account for.

Governance

Due to the solution MPB were working on being attached to an insurance product, it meant I had to ensure our design allowed for the correct links and journeys to compliance documents. To ensure it adhered to the governance of each market the solution would be available in.

Brand & design system

MPB had recently invested lots of time, energy, and money into their updated brand and design system. It was important for me and the UI Designer to understand our parameters and develop ways we could come up with solutions that aligned with their DS.

One click goal

As the solution had to sit within checkout I wanted to add as least friction as possible. Ensuring the user was able to engage with the protection upsell with ease, whilst focusing on the main MPB goal which was to convert users into adding a protection plan to their item. We are also able to keep the user in control of their order throughout, aiming to make them want to add a plan instead of creating a friction-based experience which could lead to a negative conversion of the original checkout items.

Key explorations for MPB

One click card buttons

We created a component that housed the two different term plans that MPB was looking to offer. By using their mouse or their finger a user is able to add, remove or change these terms with one click at all times leading up to the point of payment. We are really proud of what we came up with and think we took MPB beyond their competitions experience when adding a protection plan or warranty.

Summary animation

We wanted to make it really clear to the user they have added a protection plan to their item. We did this by doing a number of things. Changing the colour of the component to a radiant sun colour approved by the brand. We also changed the copy to show the item was added created an animation in the summary which adds a bounce to protection card under the item in the summary.

Product card iterations

Due to the thousands of items MPB has available it meant that some were not suitable for product protection plans. Therefore we designed a way to display the reasons why certain products were not eligible within the existing product cards. So a user could look through all of their items in checkout and know exactly what was and wasn’t available to them.

Back to explorations