My Utilita app design

Product design of the 4th version of the Utilita app, the 3rd version of which is currently used by over 800k Utilita customers.

I started working on the My Utilita v4 project when Trust Power was acquired by the Luxion Group in November of 2025. Initially I was working on Canary Care before shifting focus to the My Utilita app.

Initially the remit was just to modernise the existing app’s technology by rebuilding it in React Native. However it soon became clear that the entire app was a mix of ideas and features and could do with a massive overhaul. The app has a massive user base of over 800,000 customers, so there was some initial reluctance to rock the boat. But once I started working on the 4th version, it soon became apparent that there was indeed a lot of room for improvement.

The 3rd version of the My Utilita app.

I started working on the My Utilita v4 project when Trust Power was acquired by the Luxion Group in November of 2025. Initially I was working on Canary Care before shifting focus to the My Utilita app.

Initially the remit was just to modernise the existing app’s technology by rebuilding it in React Native. However it soon became clear that the entire app was a mix of ideas and features and could do with a massive overhaul. The app has a massive userbase of over 800,000 customers, so there was some initial reluctance to rock the boat. But once I started working on the 4th version, it soon became apparent that there was indeed a lot of room for improvement.

The first thing I did was do a design audit of the existing app, trying to understand all the features, menus, navigation and styling. It soon became clear that this app had evolved naturally over time, but things had not been thought out too clearly as to where they would go, or indeed why they would even go into the app. Things were developed and placed into the app, with very little understand or planning - from my perspective at least. I always try to understand the requirement of a new feature as much as possible, and then prototype it and test it and iterate it multiple times before getting it into the hands of developers.

Design is cheap, I always say. I’m more than happy to design screens and delete them if they’re not right.

I always prefer starting off designing a few key screens before committing anything to the design system. For this project, and indeed for all Procode projects, there is a strong focus on create once, use many. In practical terms, what this means is having a base design system which we could then branch off to create separate design systems for different projects - but they’d all have the base design system at their core. This keeps the designs all using similar components, and also helps to speed up development since nothing would be started entirely from scratch.

There was also a requirement to create an app which could be white labelled, and thereby sold for other companies to use. This was achieved by utilising design variables so switching designs became quick and easy.

Some of the design variables created for this project - allowing quick creation of dark mode screens, as well as entirely new screens.

Some of the design components and variables I created and used in this complex project.

Once I’d designed a few screens - working alongside project owners for feedback - I started updating the base design system to match the styling of this new app. At this time I was still pretty new to Figma, so I had to learn a lot fairly quickly. After the design system took shape, developers starting creating the components for use across the app.

Early on, working with the developers, they were initially a bit hesitant to approach me. There was previously a mentally of leaving the designer alone and I tried hard to ensure that I was the opposite of this - always approachable, always flexible. I want to ensure that we get the best product, and this can only be done by open communication and trust between stakeholders.

Some screens from the 4th version of the My Utilita app.

Now that the basic screens were starting to be put together, I focused on improving exiting features and turning them into better experiences. This was done by creating and testing prototypes, and most importantly by speaking to customers and getting their feedback. I took the initiative by visiting a Utilita Energy Hub in Southampton and speaking to customers, staff and call centre agents in order to get feedback and ideas.

Dark mode for the app, which can be created quickly via variables and modes in Figma.

The 4th version of the app made the key features a lot more prominent and easier to use. Payments have become a much smoother journey, as well as finding and applying for financial support. We also utilised Loop’s usage screens in order to display to the user their live and historic energy consumption.

Previous
Previous

Loop app

Next
Next

Loop Optimise webapp