Context
The Join flow was a combination of quoting and checkout flow variations. It was used by and customised for people switching to Bulb, moving into a property supplied by Bulb, or taking Bulb with them to a new property. It had both self-serve and sales versions, for residential and business properties.
Selected Join projects
Join flow questions, quote, checkout, and welcome page designs, as they were when I started working at Bulb
Smart Pay As You Go
Context
The first big update to Join that I was part of was the introduction of a smart pay as you go (PAYG) tariff paired with the ability to run credit checks and take security deposits.
Design sprint
With seven weeks to go until the launch, and many unanswered questions, our team planned a 5 day design sprint to accelerate the work.
During the design sprint, I've worked with a content designer to create a Figma prototype that catered to all the new design needs and included other general design updates to test at the end.
My solution sketch from the Smart PAYG design sprint
Results
After the design sprint, I've refined the design based on the usability test insights and stakeholder feedback.
We've updated existing questions to include Smart PAYG specific options, and we highlighted safety concerns for those eligible to make sure they only choose it if it's safe for them.
Smart PAYG tariff specific safety questions
We've improved the quote page design by adding new content based on our test insights, making it easier for users to find information by grouping content into new distinct sections, and moving parts of the information to other pages where it was more relevant.
Part of the new design was implemented separately, after it won against the control in a split test, replacing the long, indistinct list under the quote breakdown.
Old quote page, on the left, updated quote page design on the right
We’ve also updated the checkout flow to include new credit checking and security deposit pages, alongside the added ability to change between tariffs depending on eligibility.
To enable security deposits, we’ve added card payment to the checkout. Following usability guides, we’ve matched the card field sequence to the physical card sequence, and we’ve added helper illustrations, 1 for Amex cards and another for all other cards, to the security code field.
Card payment component with security code illustration
Going electric
Context
Bulb launched a new smart tariff, with cheaper rates at night, designed to save electric vehicle (EV) owners money.
Design sprint
The team working on Join decided to run a 4 day design sprint to speed up the process of adding the new EV tariff to the Join flow. During the design sprint, the cross-functional design sprint team worked closely together to learn about the new EV tariff, create and test a prototype, and gather insights.
My solution sketch from the EV tariff design sprint
Competitor review
After the sprint, I've also conducted a competitor review, where I've analysed the EV quote flows of 9 competitors and the type of EV tariffs they offered, which I've presented to stakeholders together with the proposed quote flow.
Results
Working in close collaboration with a content designer, I've updated the design sprint prototype based on the combined research insights.
We've added 3 new questions to the quote flow, for eligible users, to help them understand if the new EV tariff is right for them.
New Join flow questions to help determine whether the EV tariff is right for the user
We've also updated the quote page, checkout flow, and the welcome page to accommodate new EV tariff specific information.
Below is a comparison of the old and updated welcome page, with extra sections, that I've added later, for a product offer and the Bulb Carbon Calculator product.
Old welcome page design, on the left, updated EV tariff specific welcome page design, with extra Bulb app, product offer, and Carbon Calculator sections, on the right
From single tariff to multi tariff
Context
Previously, Bulb only offered variable tariffs and quoted the most fitting tariff to the user based on their energy meters and/or their answers to pre-quote questions.
Due to record-high wholesale prices during the energy crisis, it wasn't viable anymore for energy companies to offer variable tariffs to new customers. Prompted by this pressure, Bulb started to explore fixed tariffs and multi-tariff quotes. This work affected all of the Bulb products and required collaboration between most teams.
Competitor review
I've conducted a competitor review looking at the sign-up flows of 10 energy companies, including Bulb. In the review, I've compared the suppliers across 3 categories—pre-quote, quote, and post-quote—, 28 points in total.
The findings were presented to all stakeholders and informed the design and content explorations.
Explorations
We've explored 2 different ideas: offering 3 tariffs per quote, a variable, a fixed and a fixed one with extras, and offering 2 tariffs per quote, a variable and a fixed tariff, with an optional add-on for extras.
I've identified key information to be included, and I've mocked up multiple low-fidelity layout options for both ideas, which I shared regularly with the stakeholders and the wider design team for feedback. The mock-ups below are a small fraction of the explored options.
Multi-tariff quote layout explorations
With the update of the top part of the quote page design, I was also able to convince stakeholders of two smaller updates that we couldn't prioritise before.
One of those changes was updating the Join flow header to take up less vertical space and give way for key info to be visible above the fold.
Previous Contentsquare analytics data backed the need to update the Join header. The exposure rate was especially poor on the quote page and post-quote pages. On the quote page, only 83% of mobile users were exposed to the main CTA—Join Bulb.
Old quote page with overlayed exposure rate data
The other small update was moving down the back button from the top of the page, aiding in winning a bit more vertical space, but also in making the quote look cleaner and more focused.
This change was backed by an observation from various user testing sessions where most participants used the browser navigation for going back in a web flow, and some participants even struggled finding the back button on the pages.
Comparing what’s visible above the fold, on iPhone 6/7/8, on old and new designs and with different header elements
In addition to the quote page design updates, I've tested a new checkout summary design, to solve the problems observed with it, also reinforced by Contentsquare analytics data.
On mobile, exposure rate started dropping at the second input field, showing that the summary pushed the forms out from above the fold, and click recurrence on the summary box was high, showing interest or annoyance with it, proving that it didn't contain the information users were expecting.
Old checkout summary on the left and updated checkout summary design on the right
Usability testing
I've created a high-fidelity Figma prototype for online usability testing, which was tested with 5 participants. Working with a content designer we both hosted some of the 30 minute sessions, and together we've gathered and presented our findings.
Result
Working with a content designer and an illustrator, I’ve designed 11 variants in total for both multi-tariff and single-tariff Join quotes. The new tariff looks were implemented consistently throughout our products.
Tariff cards on a wide screen and a tariff switcher on a narrow screen