In 2018, Shell acquired the British energy and broadband company First Utility. This acquisition created the need to design and develop a design system that reflects Shell’s corporate brand identity and to redesign and rewrite the existing web application using the new design library. The design approach was mobile-first and focused on redesigning the elements that posed crucial obstacles to users.
Beginnings
Following the acquisition of First Utility by Shell, the company rebranded as Shell Energy. The website and broadband application required a complete redesign with a key objective of reducing customer contact with the call center.
Working with the broadband team, I contributed to redesigning the existing app using the Shell design library and developing new features that enhanced customer self-service. The updated app enabled users to easily monitor their broadband speed, access router troubleshooting information, and upgrade their plans, providing greater value and autonomy to clients.
Defining users needs and business goals
Observational studies and in-depth interviews were conducted with service agents to understand customer challenges related to broadband speed, frequency of support calls, and problem resolution methods on Zendesk. Insights from these sessions revealed key customer pain points and agent response patterns. The results of this research was presented to the stakeholders and road map of implementing features were implemented.
First designs
This dashboard design provides users with a clear overview of their broadband status, package details, billing information, and rewards. Key functionalities include real-time broadband diagnostics (such as router status and data usage alerts), quick access to troubleshooting guides, easy broadband upgrade options, and direct viewing of the latest charges with billing timelines.
The interface also highlights the user's package features—such as estimated speed and usage limits—and offers information about exclusive customer rewards, making essential self-service tools easily accessible and reducing the need for contacting the call center.
Lessons learnt
Lessons learned from this phase underscore that communication is absolutely key to effective collaboration within an enterprise. When communication is lacking, the project becomes highly vulnerable to risks including misalignment, duplicated efforts, and wasted resources. During this phase of the project, despite my proactive efforts—such as organizing regular meetings with stakeholders and experts, and traveling to the UK every two months to foster direct collaboration—communication gaps persisted.
A significant challenge was spending three months gathering data concerning how plan upgrade works and that had already been defined by a single individual, who’s existence I was unaware. This situation revealed how siloed communication and lack of centralized knowledge sharing can seriously impede progress. The experience highlights the critical need for transparent, frequent, and structured communication to ensure all team members have access to the same information and can contribute effectively, thereby reducing risks and enhancing project outcomes.
Next iteration
Next iterations focused on more complex features. This dashboard design provides users with a convenient way to monitor their broadband speed and immediately take action if the current plan does not meet their needs. If low speed is detected, users can quickly access the option to upgrade their broadband plan directly from the dashboard, ensuring a seamless path to improved service.
Alongside real-time diagnostics, billing details, and troubleshooting resources, the upgrade feature is prominently positioned to enhance user autonomy and satisfaction, minimizing the need for additional customer support contact.
Ongoing Workshops
The collapse of several smaller energy providers in the UK market led to Shell Energy acquiring over 500,000 new customers through a government-mandated transfer. This marked a new chapter in ensuring a smooth and seamless onboarding experience for a large influx of users.
To address this challenge, my team and I conducted 40 user interviews with customer representatives, uncovering key pain points such as login difficulties and uncertainty about how to read meters. We also gathered customer feedback via targeted surveys on the website and tracked user behavior using Hotjar, with dedicated funnels to identify friction points and guide improvements.
Ongoing IDI Interviews
This user testing scenario focuses on the onboarding journey for customers switching to Shell Energy, with detailed interview questions about their moving experience, previous suppliers, and reasons for switching. Participants are guided through key billing pages, asked to interact with information about their energy supply numbers, and provide feedback on clarity, helpfulness, and their next steps. The scenario includes prototype testing where users act out receiving support emails and navigating new account pages, allowing insight into their comprehension, pain points, and critical information needs during the switch and billing process.