Experience
Transformation

Get In Touch

Globalising Patterns

Overview

As part of my role at Centrica, I was responsible for the design of a global design framework that would allow each of Centrica’s utility brands to offer a user-centred online account management solution. This project involved assessing existing services across multiple brands, developing an information architecture that worked across all service complexities, analysing customer needs, and producing a set of reusable tools, guidelines and frameworks that would be agile enough to adapt to change.

“Bryn has a fantastic ability to think about the experiences between the experiences. He focuses on the connections between features, products and services, so that others are free to make individual experiences great in their own right. We think about the locations, he thinks about the topography.”


 

Problem

Centrica owns a collection of utility brands. Most of their brands offer an online customer account, and it was their intention to roll this service out across all brands. However, those with an existing online service were performing, and none shared practice or knowledge. The challenge was to design a global pattern framework to serve all brands, either as a transformation direction or a ready-made solution. The end objective was to improve both customer satisfaction and operational efficiency.

 


 

Solution

Vision
We created experience visions for each of the brands showing example outputs and how they related to each of the deliverables.

Design

 

Guidance
We used a clear user-centred information architecture that works across all service complexities and would inform any development roadmap.

Guidance

 

Ownership
We developed an agreed ownership model stating whole-owned and shared ownership products, each with their respective roles and objectives.

Ownership

 

Behaviour
We developed a framing logic based on activity type, to allow individual applications and experiences to be wrapped in a global navigation framework in a consistent manner.

Framing

 

Communication
We also designed a communication hierarchy with a robust decision framework to guide the selection of appropriate communication method.

Communication

 

Structure
Finally, we developed a comprehensive design system that provided structured templates, components, and compositions that were all skin-able and individually aligned to user needs.

Component Design

 

Process

Overview

We needed to build an accurate model of the real world, and to explore mental models and gain a better understanding of the user. We also needed to bridge the gap utilising a more user-centred interface that would be infinitely more accessible and enjoyable to use. We aligned with organisational needs and desired outcomes, and also built a reusable set of central tools that could be used by all Centrica’s brands.

 

Reality
To stand the best chance of building a system to support customers we first needed to understand their relationship with the business.

Mapping

 

Information
Taking the relationship model, we explored what information existed at each point, and this allowed us to see what elements users would need or want to interact with.

Information Structure

 

Context
We conducted a technical investigation into the primary information structure knowing that we would need to contextualise this within the broader service offering, and acknowledged that the interface solution would need to allow movement between systems.

Context

 

Interpretation
We began exploring the mental models of customers to see how they expected to interact with the service. This involved conducting customer interviews, carrying out mapping exercises, card-sorting, tree testing, and several other activities.

User Testing

 

Needs
Pooling a wide range of information sources, we developed a prioritisation model based on user needs.

User Needs

 

Access
Combining a needs priority matrix with customer interpretation and system structure provided the foundation for deriving the interface structure and navigation logic.

Navigation

 

Objectives
We mapped information structures onto products, each of which was intended to address a specific user need that was derived from customer interpretation. Considering the system structure, we identified the essential elements required to allow basic function that needed to be included in the MVP. This ultimately went on to guide our roadmap creation.

Objectives

 

Templates
Each part of the overall structural diagram was templated out giving further details of objectives and the components it would be composed with. Each template was owned by one product team who were responsible for its success and progression, and this approach formed the basis of the ownership model.

Template

 

Components
Each of the components included in the templates was also specified, again with clear needs and objectives. These items were used to build a comprehensive component library which was governed by a centralised team but leveraged de-centralised contribution for improvement.

Component

 

Visuals
We established a visual design framework with decision guidance of how to style components. Each brand had a different style, and this framework allowed us to use a consistent governing logic which could be easily updated.

Visuals

 

Adaptation
A large proportion of this work was discovery and definition which needed to be completed upfront to give the project shape and vision. As the implementation would be agile, we created a working model that allowed us to iterate and improve this work to align with new information, and keep it relevant.

Process

 

Lessons Learned

You’re the bridge.
To interface is to connect two things and allow them to communicate.

  • You need to understand the system before you help people use it.
  • It’s important to take the time to understand what the end users think the system should be.
  • You need to understand how work is done and change is made within a company.
  • Model the vision and keep updating it as you learn new things.
  • Modularity and clear ownership allow focus.
  • Do things in the open to garner support.

 


 

Outcome

Better connected experiences.
The design framework provided ongoing direction by remaining relevant even when faced with change.

  • Improved finding efficiency and effectiveness.
  • Improved operational delivery efficiency.
  • Improved satisfaction markers.
  • Reduced contact via all channels.
  • No negative impact seen over the next fifteen feature additions.

 


 

Working Photos

 


 

Related Projects
Scaling Design
Reducing Cost

Client
Centrica

Sector
Utilities

Status
Complete (2018)

Client
Centrica

Sector
Utilities

Status
Complete (2018)

Scaling Design /
Bryn Ray

Want to know more?

Let's have a chat

Get in touch