CLIENT

Shell

ROLE

Product Designer
UX/UI Designer

 

DESCRIPTION

I led the design for Shell’s network of 135,000 charge points in 35 countries.

THE CHALLENGE

 

Shell were building a charging network and needed a digital product to allow customers to locate, navigate and charge at one of its 135,000 charge points. 

As the product would predominantly be used on the go, early on in the project, we decided that the primary touchpoint for users would be a mobile app.

 

THE TEAM

 

I worked in an agile delivery team alongside:
1 Product Owner, 1 Business Analyst, 1 UX Designer, 2 x Developers, Data Analyst and 1 QA.

 

PROJECT GOALS

 

1 . Release a product in time for Shell’s charging infrastructure launch

2 . Establish customer trust and credibility in the EV market

3 . Use technology to improve the charging experience

4 . Differentiate from competitors through innovation

 

RESEARCH

 

Prior to me joining the team, Shell used a third party to conduct research in 6 different countries. Initially I used this research to establish the user’s needs, goals and pain points within the Electric Vehicle (EV) market. 

However, this research alone was not enough for me to empathise with the user. We needed our own user community, so we advertised on forums and social media platforms. I recruited members for our community by designing leaflets and distributing them at various EV charge points and Shell garages.

This community of users eventually grew to over 100 people and was later instrumental in the the design thinking process.

I hired an electric vehicle several times, this allowed me to empathise with user pain points first hand.It also enabled me to use several competitor apps to identify areas where we could gain an edge as a challenger app in the EV market.

Our user community was expanding quickly. We invited a handful of them in for a full day workshop. We focussed on mapping out their existing customer journey using the competitor apps and networks that they were familiar with. We also facilitated a ‘sketching’ session for users to generate ideas and identify opportunities.

 

(Left) Flyers I designed to grow our user community. (Middle) Testing electric vehicles and competitor apps. (Right) Sketching workshops to generate ideas

(Left) Personas. (Right) Journey maps that show the current state for our personas.

 

DEFINING PROBLEM AREAS

 

I documented my findings by creating journey maps and user personas (a representation of the different user types). I used the personas to keep project stakeholders engaged, and I worked closely with the Product Owner to shape and prioritise our product road map.

I synthesised all the data from the research phase and identified the main user problem areas.

The user pain points were:

  • Availability - users didn’t know if a charge point would be available before they arrived to charge.

  • Charging - with so many providers available users would be required to start a charge at a charge point with an RFID card, which resulted in them having to carry dozens of cards at all times.

  • Pricing - users did not know how much the charge session would cost until they finished charging, or in some cases, until they received an invoice weeks later.

  • Personalisation - users would have to check the details of multiple charge points, in app, to understand which charger was right for their EV.

With the problem areas identified, I was now ready to move into creating ideas and concepts.

 

(Left) Sketching interaction ideas and concepts for the app’s map page. (Right) High fidelity UI design based on the original sketched concepts.

 

“Shyam led with the design and creation of the product, the UI style guide, core components and design pattern library. It was a pleasure to have him on the team”

- Product Manager, Shell Recharge

 

I began sketching and creating wireframe concepts, then early on, I guerrilla tested my concepts to help validate my ideas before presenting them back to the wider team for technical discussions.

After a few iterations, I was confident with the UX/UI design. I started to build prototypes of the app using Proto IO to get a feel for the interactions.

I worked closely with Shell’s brand team to create a consistent style guide -  this helped the developers in the team to build with speed and consistency.

TESTING AND ITERATION

 

After more design iterations and app development, we arranged lab testing at our offices in Canary Wharf. We employed a user recruitment agency to source and screen electric vehicle drivers and brought them in to participate in the user testing.

I built a test lab and observation space/hub in two adjacent rooms using a combination of screen sharing tools, mobile phones and laptops.

I invited all members of our team to take notes or to observe the testing sessions. I shared a video link with our project stakeholders incase they could not attend in person.

We documented the learnings from all testing sessions. We then prioritised the findings and identified areas for improvement.

(Left) Participants in the lab testing the app’s sign in journey. (Right) Making notes on the testing sessions in the observation room.

RESULTS AND OUTCOMES

 

The solutions created were validated by users and amongst the problems we identified during the early stages of the project we addressed:

  • Personalisation - allowing users to filter and create preferences meant that they would only see charge points that were relevant to them. Users were also able to quickly filter through charge points and add them to a list of favourites.

  • Availability - showing the availability of charge points, in real time, enabled users to feel a sense of trust with the product and subsequently Shell as a brand.

  • Pricing - being transparent and showing price and fee information before users started to charge, added to the user’s trust in the product.

  • Charging - giving users the option to start a charge from the app meant they no longer needed to carry an additional RFID card with them at all times. This technology allowed us to innovate the charging experience.

I also created key parts of the offline service including, the welcome packs (that every customer receives after registering) , RFID cards and charge point units.

The app was initially due to launch in Europe (UK, Germany and Netherlands) but after working on the projects for a few months the potential of the product was recognised and our team secured funding for worldwide roll out of the product.

Shell Recharge now gives users access to over 135,000 charge points, in 35 countries including: United Kingdom, Germany, Netherlands, Chile, India, Malaysia and many more.

 

KEY LEARNINGS

 
 

Due to Shell’s partnership with a third party provider we found ourselves in a situation where we had to ask users to complete a dual registration (once with Shell and once with a third party provider). We knew this could prove to be an obstacle for adoption of the product, but due to deadline pressures, we had to press ahead.

We used lab testing as an opportunity to validate our hypothesis and to gather more insights. I put together a short video of clips highlighting users frustration, this illustrated the need to revisit the solution with our stakeholders. 

Although it caused a delay in the launch of the product, we shipped to market with a superior and more sophisticated experience for the user.

NEXT PROJECT

John Lewis & Partners