Get In Touch

Globalising Patterns


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.”



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.




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



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



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



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.



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



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




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.


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



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


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.



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


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

User Needs


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



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.



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.



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.



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.



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.



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.




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



Complete (2018)



Complete (2018)

Scaling Design /
Bryn Ray

Want to know more?

Let's have a chat

Get in touch