Client Overview

Genesis Energy is one of New Zealand's largest energy retailers, providing electricity, gas, and renewable energy solutions to residential and business customers. As part of their commitment to digital transformation, Genesis sought to enhance their plan selection experience, making it more user-friendly and adaptable for content updates.

The Challenge

Genesis Energy's previous plan selection interface had several usability challenges:

• Limited Flexibility for Content Updates: Marketing teams required development effort for any updates to discounts, credits, or terms.
• Cluttered UX: Plan rates were displayed separately, making comparisons difficult.
• Tooltip Overflows: Tooltips did not dynamically adjust, leading to readability issues.
• Inconsistent Alignment: Content-heavy plans resulted in misaligned elements.

Recognising these limitations, Genesis Energy partnered with Streamline Webworks to implement a scalable and user-friendly redesign.

Plan cards before the changes

Objectives

• Enhance the user experience (UX) by improving readability and accessibility.
• Ensure content flexibility so marketing teams can update discounts and terms without developer intervention.
• Align plan card structures dynamically based on content while maintaining a clean and organised UI.
• Implement adaptive tooltips that adjust position dynamically to fit within the screen.

Plan cards after the update

The Solution

To achieve these goals, we focused on a structured approach involving UX research, design refinements, and technical optimisations.

1. Rates Embedded in Plan Cards: Users no longer need to scroll to a separate section to view rates, making it easier to compare them.
2. Dynamic Terms & Conditions: The bottom of each plan card now displays a consolidated set of applicable terms, which automatically adjust based on the selected features.
3. Edge-Aware Tooltips: Tooltips now adjust dynamically to screen constraints, preventing overflow issues.
4. Improved Content Alignment: Using CSS Subgrid, plan details align perfectly, regardless of the text length.

Execution & Collaboration

We worked closely with Genesis Energy's design and marketing teams to iterate on mockups and wireframes.

Consistent Styling: We leveraged design elements and components from the Rydewizard marketing site to ensure visual consistency across products.

We ensured all components were mobile-responsive and accessible, providing a seamless experience across devices.

We developed a reusable, CMS-driven component architecture, allowing future flexibility without additional development effort.

Improved plan card interactivity

Results & Impact

Streamlined Content Management: Marketing teams can now update plans, discounts, and terms in real time without developer involvement.

Enhanced Readability: Users can compare plans at a glance, with improved text hierarchy and spacing.