Design and delivery of a new product vertical for good-credit advocates, Totally Money.

Design and delivery of a new product vertical for good-credit advocates, Totally Money.

- Mobile first responsive web product design.

- Mobile first responsive web product design.

The company had undertaken intial research, business proposal, roadmapping, initial design sprint / ideation, and top level site-map and wireframing. I was introduced to the team to utilise the initial UX and logic to define and develop the product features and UI, and manage successful handover and implementation with front-end developers.

The company had undertaken intial research, business proposal, roadmapping, initial design sprint / ideation, and top level site-map and wireframing. I was introduced to the team to utilise the initial UX and logic to define and develop the product features and UI, and manage successful handover and implementation with front-end developers.

Main screens

Sign up form process. Radio buttons for eliminating user input error, collapsible tool tips with large touch targets for easy clarification, and inline animated alerts all aim to provide the user with a light and intuitive sign-up process to facilitate more energy provider switches by eliminating drop-off while signing up.

 

Sign up form process. Radio buttons for eliminating user input error, collapsible tool tips with large touch targets for easy clarification, and inline animated alerts all aim to provide the user with a light and intuitive sign-up process to facilitate more energy provider switches by eliminating drop-off while signing up.

Post-launch testing revealed an issue of confusion around tariffs that were actually more expensive than the users’ current one, appearing to offer greater savings. Changing the highlight bar colour and rewording the message to a more explicit ‘more expensive’ created a disruption to the users scanning and eliminated confusion.

Post-launch testing revealed an issue of confusion around tariffs that were actually more expensive than the users’ current one, appearing to offer greater savings. Changing the highlight bar colour and rewording the message to a more explicit ‘more expensive’ created a disruption to the users scanning and eliminated confusion.

Alternative Address

Addresses of users outside of the National Grid are unsupported. Rather than lead them down a 5 step dead-end journey I moved the conclusion forward to step 2 to reduce frustration, even if we can't help the user in the end.

Addresses of users outside of the National Grid are unsupported. Rather than lead them down a 5 step dead-end journey I moved the conclusion forward to step 2 to reduce frustration, even if we can't help the user in the end.

Artboard Copy 4

'More Info’ reveals a tariff summary followed by a detailed breakdown below. The original pattern of a slide in overlay on desktop was inherited from the third-party data comparison service used for tariff comparison. This was moved to a separate page to break up the information into more relevant and manageable chunks. For mobile - a collapsible accordion style menu to enable users to view the entire list of available categories in one go and view each at their choosing rather than scroll through a long page of information.

'More Info’ reveals a tariff summary followed by a detailed breakdown below. The original pattern of a slide in overlay on desktop was inherited from the third-party data comparison service used for tariff comparison.

This was moved to a separate page to break up the information into more relevant and manageable chunks. For mobile - a collapsible accordion style menu to enable users to view the entire list of available categories in one go and view each at their choosing rather than scroll through a long page of information.

When the product launched there were a number of backend bug fixes needed to improve screen load time. To reduce the perception of long load times an animated skeleton screen was introduced to proivde a visual cue for more content sequentially loading in.

When the product launched there were a number of backend bug fixes needed to improve screen load time. To reduce the perception of long load times an animated skeleton screen was introduced to proivde a visual cue for more content sequentially loading in.

Energy Flow