Shell Energy

The project

Shell are the 5th largest company in the world. Their new venture into the energy sector saw them acquire First Utility. With 700,000 customers, Shell wanted to offer them a brand new multi-platform Shell Energy experience.

My role

Oversaw and contributed to the product design of both Android and iOS. Worked closely with both Shell Execs and First Utility customers to ensure a cohesive finished product.

The timeline

6 months from blank canvas to full roll out.

The team

2 Product Designers, 1 UX Researcher, 6 Engineers, 1 Test Engineer, 1 Product Owner.

4 week discovery

The exercises we completed in the first 2 weeks

Reviewed current app

Reviewed analyics

Call centre staff & customer interviews

Card sorting

We created 2 concepts and tested them with 10 users

We thoroughly tested each concept with 10 users, from a mixture of backgrounds. Each concept gave more prominence to different features. We used the system usability score (SUS) below to give each concept a usability scoring. We also annotated our designs with insights from the testing sessions.

Setting up a collaborative space

Working with Sketch and Abstract

With us having 3 designers working simultaneously between files, I needed to implement a system where we could collaborate without having file clashes & corrupted files. The benefit of setting up Abstract and implementing it into our design process was that we also got version history and file management as added benefits.

App flows, WIP designs and real time feedback

One of other main areas of focus was ensuring out current design workflow was transparent and clear to other team members and key stakeholders. Using Miro to get feedback on work, show progress and map out flows meant that the whole team felt involved in the design process.

Sharing internal knowledge & learnings amongst the team

There were lots of conversations happening on a regular basis which not everyone was involved in. We decided that we should be storing all of the things we had been learning in a centralised location. We decided to use Notion for this as it means we could create out own internal wiki of shared knowledge. This also helped when on-boarding new members of the team.

Some juicy design details

Designing the home page cards

These cards on the home screen of the app are where users can have quick access to tasks they ned to complete. We prioritise the cards and change the states depending on what information we need/don't need. On the right there are some examples of the many states these cards can be in. The list is much more extensive. There was a lot of time and care taken to ensure that at any point, the user isn't overwhelmed. The cards provide clarity and also peace of mind to the user.

Tariff change journey overhaul

Two of the most badass designers I've ever worked with, Sam & Joana

The tariff change journey on First Utility's website had been built upon and little by little over the past few years and it was long, confusing and hard to understand. We did an audit of the current flows and then spent half a day fine tuning it down into the most simple set of steps we could. We then mocked up all of the screens and tested them on a mixture of 10 customers (more of this in the next section).

This is a small part of our Android design library file - we had a similar one for iOS, using native iOS patterns. When I first joined the project, some flows in the app had already been designed without using a design library. We decided to go all in on the sketch library beta and I did an audit of the existing elements we were using. I then created the library from scratch and re-built the screens using the library elements. Meanwhile, the team carried on as they were, and once the library was at a good level I introduced into our wider process.

A key part of this succeeding was having a gatekeeper to the library. We carefully considered changes, updates and additions in our weekly design sessions.

Account & tariff expiration

There are lots of places within the app where the detail is incredibly important. There are so many variations of user types and things we need to tell people at different points in the process. We used microcopy, colour theory and lots of other visual guides to guide people down the correct path.

How did we test our hypotheses?

👀 ⬇️

Usability testing documents

Joana's usability documents which were created after each testing session.

I worked alongside Joana to explore what the customers were finding confusing or challenging during our testing sessions. Initially we were creating these documents after each session. However, this became cumbersome and time consuming. I suggested using a tool like Notion so that we could have more of a living document which didn't get outdated.

Introducing Notion

Findings from user research is something which should be open and accessible for everyone on the product team. By organising everything into Notion, it was easy for everyone to find insights, hypothesis and useful information about users in a short amount of time. Everything was organised and tagged accordingly.

Thanks for reading.

Back to the top ☝︎