Ripple Energy is a renewable energy start-up on a mission to make green energy ownership accessible and affordable. We are doing this by allowing UK consumers to buy part of a wind farm and benefit from the cheaper, greener electricity it produces.
Having launched our first wind farm in 2020, we already had a website and sign up flow, however I was given the brief to improve the sign up flow to ensure it is as easy and accessible as possible to help us get closer to our core mission.
Creating a sign up flow that is makes purchasing green energy simple and accessible. During the sign up flow, the user must be able to:
- Provide us with their address and electricity consumption details
- Understand their quote and choose how much of the wind farm they want to purchase
- Switch to our supply partner if necessary, and set up energy payments with them
- Have the option to delay their switch to our supply partner
- Purchase their wind farm and become a Ripple member
Improving the sign up flow for Ripple is more complex than it seems. There are a number of key challenges I was faced with:
- Ripple is a brand new concept - there is nothing else quite like Ripple on the market. This means that users can struggle to understand what Ripple is, and exactly how it benefits them.
- When working on this project, we were just launching our first wind farm. This means that users could be skeptical about Ripple - there was no proof of concept.
- When signing up to Ripple, some users would have to switch energy suppliers, but some did not. Incorporating this as part of the flow seamlessly was a challenge.
We already had a lot of data on user behaviour on our website from HotJar and Google Analytics. This showed us the areas of the sign up flow that caused issues and drop off rate, but didn’t tell us why.
To understand why users were having difficulty, I undertook usability tests on our old sign up flow with 8 participants. This was mid-lockdown, so we did the usability tests using Zoom, which actually worked out better as we were able to use participants from all over the country and therefore get a better cross-section of our user base.
The usability tests were incredibly insightful - you can see in the image below all my insights on post it notes, and then arranged using an affinity diagram into key insights:
Based on my affinity diagram, I was able to draw out key takeaways from user feedback:
I presented the findings back to the whole team and then ran a workshop to get as many ideas as we could on how we could improve based on my findings. I tried to encourage the team to be as crazy as possible with their ideas and not just think about what is possible within current constraints. We then went and voted on the best ideas and had a discussion on how we could make them feasible for our product.
A little snippet of some of the ideas we came up with:
With all these ideas mapped out I went on to decide what content users need to access to understand Ripple Energy based on the research findings. Myself and our Product Manager used Google Analytics and HotJar data to look through our users' behaviour when they use our site. This enabled us to map out where certain content should live based on user behaviour.
With the flow mapped out, I then went on to sketch up the wireframes. I like to do this using pen and paper first, so I can iterate quickly. I then mocked my designs up on Figma. Some key changes I made to improve the flow:
1. Redesigning the homepage to ensure users were drawn down the homepage, so they got a good overview of what Ripple is first.
2. Improved the ‘How it works’ page to give users a deeper understanding as to exactly what Ripple is and how it works. This includes an explanation of switching supplier, and who would need to do it, as well as a video on bill savings as this is a common question we get from users.
3. Introduced a ‘how it works’ video on the home page, along with the explanation by text. This allows users to consume the information in the way that best suits them.
4. Introduced a interactive indicative quote on the home page, so users can get a broad understanding of how much they are likely to save, and how much it will cost before they get to the quote page.
5. Reduced the number of pages from home page to quote page from 5 to 2.
Having made these improvements and mocked up the designs, I did more usability testing with the new designs. Based on these tests I made some more improvements, below is one example:
I then presented the designs back to the team to get their feedback. There were some features that were important to discuss with the wider team to ensure it was possible. For example, I added a ‘request a call back’ button on the sign up flow, as we know users want to speak to a real person to ask questions. However, being a start-up with a small team we had to have a discussion on whether we had the resource to deal with this.
The designs were handed over to the development team. As the whole Ripple team had been involved from the outset of the project, the developers knew exactly what to expect and this made the handover super simple and straightforward.
The whole team was extremely happy with the new design, in particular how much better it explains Ripple to potential customers. Being a small start up means we can be very agile and we can learn and iterate quickly. We are continuously learning and making amendments, which we can pick up quickly. I regularly speak to our users using our web chat function, which gives me really valuable insight into how users interact with our site and what can be improved.
At the moment, we are looking to improve our home page again, and create a home page that gives more of an emotional pull rather than overload users with information, which can be provided later once users are more hooked.
If you like what you see and want to work together, get in touch!
imi@imogengeddes.com