MPB
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, we were asked to come up with an on-brand solution that would be seamless for the user.
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 we had to design and account for.
Due to the solution, we were working on being attached to an insurance product, it meant we 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.
MPB had recently invested lots of time, energy, and money into their updated brand and design system. It was important for us to understand our parameters and develop ways we could come up with solutions that aligned with their DS.
As the solution had to sit within checkout we wanted to add as least friction as possible. We wanted to ensure 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 were aiming to make them want to add a plan, instead of creating a friction-based experience like a modal, which could lead to a negative conversion of the original checkout items.
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.
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.
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.