Developing content patterns at BP

project details
Product Designer, Freelance
BP
March - November 2022 (9 months)

How might we create content consistency in a globally diverse product?

At BP, I had the exciting opportunity to redesign existing user journeys with a completely new research-backed design system. Except, the design system hadn’t been built yet, and I found myself needing components and patterns that hadn’t been created as I started tackling one particular journey: edit your payment card details. As a content-first designer, I believe effective content patterns are the backbone of any well-structured design system, so I found myself in our product guild meetings asking, do we use “continue” or “next” in our forms? What patterns do we have for when a user wants to edit their previous inputs? As no predefined solutions were available, I took the initiative to develop my own.

How did I have an impact?

In collaboration with a design systems designer, content designer, and UX researcher, I used my squad’s “Edit card” journey to research and establish an Edit Pattern for BP’s new design system. 

We set up an A/B inter-sample first-click test, where 50 participants engaged with two variants of the “Edit this card” page. Variant A had a detailed Edit CTA such as “Edit mobile payments,” whereas Variant B had a simple Edit CTA of “Edit.” The participants were given identical tasks and asked to select elements on the screen to complete these tasks.

Our results led us to set a research-backed pattern for content and interactions at BP. It also set a precedent for product designers taking ownership of design systems work in collaboration with other designers. This not only enhanced the user experience but also provided a framework for all future designers working on edit journeys.

Want to see the nerdy details?

Show lessShow the nerdy details

Research breakdown

Let’s recap: we set up an A/B inter-sample first-click test where 50 participants engaged with two variants of the “Edit this card” page. Variant A was experienced by 28 participants, while Variant B was explored by 22. The participants were given identical tasks:

“You are responsible for managing the fuel card payments for the vehicles in your business. Your drivers currently use physical fuel cards but there is an app they can use to pay for their fuel, in addition to using a physical card alone. You want to change the settings on the fuel card so that drivers can use this app to pay for their fuel.”

The success route required users to click on the Edit CTA at the bottom of the Mobile Payments card – “Edit mobile payments” in Variant A, or “Edit” in Variant B.

Limitations were noted, primarily in the form of seemingly random clicks, which could be attributed to respondents speed-clicking through the study with limited engagement or inadvertently clicking the wrong areas during their initial task. To mitigate these issues, a multi-pronged approach was adopted.

First, the research design ensured a sufficiently large sample size to identify and manage outlier data points effectively. Second, tasks were randomised to evenly distribute "first-task unintentional clicks" among participants. Finally, extensive post-task data cleansing was performed to filter out misleading or irrelevant data.

The results of the research revealed crucial insights. In Variant A, the “mobile payments” card received the highest click traffic, with users splitting between the “Edit mobile payments” CTA and interacting directly with the card's copy. These findings indicated the need for more exploration of this interaction pattern's implications in future click tests.

In Variant B, a similar pattern emerged, but the clicks were less varied, leading to an overall higher success rate for the simple “Edit” CTA and the 'Mobile payments' card. 

‍

let's connect

Looking for a product designer?

Drop me a line.

design@laurablock.co

Open to new opportunities.