User Centred Design Champion

Based in Surrey, UK

12:53

User Centred Design Champion

User Centred Design Champion

PAYG

PAYG

Not having this feature cost the business ~£220K per annum. See the fix.

Not having this feature cost the business ~£220K per annum. See the fix.

Company
British Gas
Company
British Gas
Company
British Gas
Role
UX Designer
Role
UX Designer
Role
UX Designer
Product
Web App
Product
Web App
Product
Web App
Start date
Feb 28, 2017
Start date
Feb 28, 2017
Start date
Feb 28, 2017

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

(Project Gallery)

Situation

One of 28 UX designers or 'UX Unicorns' as the department head referred to us. I sat within the Billing & Payments squad - driving user-centred/evidence based design in a period of digital transformation.

Problem

Pay-as-you-go customers when topping up online, were not able to add a new payment card or edit an existing card — this had to be done over the phone. Not only did this cause frustration for customers, the operational cost to handle this was north of £220K per annum.

Goals

  • Design and build a journey that matched user expectations.

  • Reduce inbound calls.

  • Journey value ~£110K per annum, which equated to a 50% reduction of inbound calls.

My Role

  • Discovered and validated user needs and business goals.

  • Devised and facilitated a workshop to extract the product team's vision.

  • Validated assumptions through MVP appetite tests.

  • Created dev-ready visual designs in Sketch - consumed a global design system.

  • Built click-through prototypes with Invision.

  • Setup/ran usability testing.

A product performance map of the web journeys our squad was responsible for. I pulled data directly from Adobe Site Catalyst to update these every month.

Complication

Our squad was not short on ideas for how to go about delivering value to the end-user or the business, but we had a problem. We were not working well together or aligned in our approach. The general morale of the squad also seemed to be low. This began to effect our release cadence — we had not shipped anything to benefit customers or the business in 3 sprints (6 weeks).

Outcome Expectation

Product teams were design led — UX was responsible for leading the way in what we shipped to the customer. With no demonstrable or perceived value being delivered in 6 weeks, the spotlight was on us.

  • The cost to handle inbound calls over a six week period ~£25,500.

  • Our squad was costing the business close to £100K per month.

  • We were expected to perform, and deliver an evidence based solution.

Remedial Action

I believed that bringing the squad together for a focused workshop would promote stronger team collaboration, joined-up thinking, and would help to achieve a product vision.

Taking inspiration from high performing squads who were using design sprints, I began researching workshop techniques and stumbled across the 'Crazy 8's' method.

Team Alignment

Pioneered the '63-minute design studio'. This maximised the opportunity to align and mitigated the risk of wasting time, effort, and budget when entering the development phase.

The design studio levelled the team upfront with key information:

  • User needs

  • Data insights

  • KPI's

  • Technical limitations

  • Compliance


Generating Ideas

The squad sketched ways to introduce manage payment card functionality.

Ideas were then expanded upon and remixed with other ideas, shaping something for testing.


Ideas we pitched to the group and votes cast on what individuals believed would provide an ideal experience.


With 8 members in the product team, we established a joined-up vision of what we felt could offer customers an experience that matched expectations. We agreed that manage card functionality should exist on a dedicated page and within the payment journey.


Appetite Test

In the spirit of being LEAN and doing the least to learn the most, I proposed a simple experiment. This helped validate our assumption — users expect to manage payment card on a dedicated page.

Hypothesis: Customers expect to add and delete their payment card/s on a dedicated page.

Experiment: A CTA was added to the payments hub page stating the user need. When the CTA was clicked/tapped, an error was returned. The volume of these error messages was tracked to measure intention.

Stimulus: Live site to 100% traffic. Error message triggered on user interaction.

Outcome: In 1 month (Feb 2018) The payments hub page received 179,539 unique visitors. Almost 15k error messages were recorded from customer interaction with the CTA. - a solid indication of users expecting a dedicated page to manage payment cards from.


Lab Research & Validation

John, another UX designer on the squad, in our observation room.


Mental Model

This research method was used during a usability test, to understand if users expected to add or delete a payment card whilst in the payment journey. 4/6 participants did expect to do this whilst in the journey.

We also learned that 5/6 participants expected a dedicated page from which to perform these tasks, which further strengthened the case for this.


Service Blue-print

A task flow showing steps for the user and the necessary micro-services to build this journey/experience.

End Results

The combined efforts of: our workshop output, appetite test and lab research enabled a data driven and user centric solution to be designed.

Navigation design showing how each view relates to another.


Views showing a single stored payment card, and a card carousel when multiple cards are saved.


Views showing: Edit card details with OCR functionality, making a payment with/without a stored card.


Summary

  • The 63 minute design studio aligned the team, boosted morale and equipped us with a product vision.

  • An appetite test validated a key user need with 15k unique visitors interacting with a target.

  • Usability testing and research further proved needs and expectations.

  • Delivered designs to achieve the product vision.


(Project Gallery)

Situation

One of 28 UX designers or 'UX Unicorns' as the department head referred to us. I sat within the Billing & Payments squad - driving user-centred/evidence based design in a period of digital transformation.

Problem

Pay-as-you-go customers when topping up online, were not able to add a new payment card or edit an existing card — this had to be done over the phone. Not only did this cause frustration for customers, the operational cost to handle this was north of £220K per annum.

Goals

  • Design and build a journey that matched user expectations.

  • Reduce inbound calls.

  • Journey value ~£110K per annum, which equated to a 50% reduction of inbound calls.

My Role

  • Discovered and validated user needs and business goals.

  • Devised and facilitated a workshop to extract the product team's vision.

  • Validated assumptions through MVP appetite tests.

  • Created dev-ready visual designs in Sketch - consumed a global design system.

  • Built click-through prototypes with Invision.

  • Setup/ran usability testing.

A product performance map of the web journeys our squad was responsible for. I pulled data directly from Adobe Site Catalyst to update these every month.

Complication

Our squad was not short on ideas for how to go about delivering value to the end-user or the business, but we had a problem. We were not working well together or aligned in our approach. The general morale of the squad also seemed to be low. This began to effect our release cadence — we had not shipped anything to benefit customers or the business in 3 sprints (6 weeks).

Outcome Expectation

Product teams were design led — UX was responsible for leading the way in what we shipped to the customer. With no demonstrable or perceived value being delivered in 6 weeks, the spotlight was on us.

  • The cost to handle inbound calls over a six week period ~£25,500.

  • Our squad was costing the business close to £100K per month.

  • We were expected to perform, and deliver an evidence based solution.

Remedial Action

I believed that bringing the squad together for a focused workshop would promote stronger team collaboration, joined-up thinking, and would help to achieve a product vision.

Taking inspiration from high performing squads who were using design sprints, I began researching workshop techniques and stumbled across the 'Crazy 8's' method.

Team Alignment

Pioneered the '63-minute design studio'. This maximised the opportunity to align and mitigated the risk of wasting time, effort, and budget when entering the development phase.

The design studio levelled the team upfront with key information:

  • User needs

  • Data insights

  • KPI's

  • Technical limitations

  • Compliance


Generating Ideas

The squad sketched ways to introduce manage payment card functionality.

Ideas were then expanded upon and remixed with other ideas, shaping something for testing.


Ideas we pitched to the group and votes cast on what individuals believed would provide an ideal experience.


With 8 members in the product team, we established a joined-up vision of what we felt could offer customers an experience that matched expectations. We agreed that manage card functionality should exist on a dedicated page and within the payment journey.


Appetite Test

In the spirit of being LEAN and doing the least to learn the most, I proposed a simple experiment. This helped validate our assumption — users expect to manage payment card on a dedicated page.

Hypothesis: Customers expect to add and delete their payment card/s on a dedicated page.

Experiment: A CTA was added to the payments hub page stating the user need. When the CTA was clicked/tapped, an error was returned. The volume of these error messages was tracked to measure intention.

Stimulus: Live site to 100% traffic. Error message triggered on user interaction.

Outcome: In 1 month (Feb 2018) The payments hub page received 179,539 unique visitors. Almost 15k error messages were recorded from customer interaction with the CTA. - a solid indication of users expecting a dedicated page to manage payment cards from.


Lab Research & Validation

John, another UX designer on the squad, in our observation room.


Mental Model

This research method was used during a usability test, to understand if users expected to add or delete a payment card whilst in the payment journey. 4/6 participants did expect to do this whilst in the journey.

We also learned that 5/6 participants expected a dedicated page from which to perform these tasks, which further strengthened the case for this.


Service Blue-print

A task flow showing steps for the user and the necessary micro-services to build this journey/experience.

End Results

The combined efforts of: our workshop output, appetite test and lab research enabled a data driven and user centric solution to be designed.

Navigation design showing how each view relates to another.


Views showing a single stored payment card, and a card carousel when multiple cards are saved.


Views showing: Edit card details with OCR functionality, making a payment with/without a stored card.


Summary

  • The 63 minute design studio aligned the team, boosted morale and equipped us with a product vision.

  • An appetite test validated a key user need with 15k unique visitors interacting with a target.

  • Usability testing and research further proved needs and expectations.

  • Delivered designs to achieve the product vision.