Rethinking myEnergy Rewards

Boosting conversions through better UX

In the midst of Ontario's energy saving push, Hydro One's myEnergy Rewards program wasn't connecting with users. The goal was simple: get more Ontarians enrolled. I led the landing page redesign using UX research, content strategy, and focused interaction design to improve clarity and drive more sign-ups.

Visit live site See the impact
Phone Mock up myEnergy Rewards landing page

Themes

UX strategy, UI design, web development, prototyping

Roles

UX designer, UX developer

Tools

Figma, Wrike, Visual Studio Code, Microsoft Sharepoint, HTML, CSS, Javascript

Time frame

2 months July 2024- August 2024

Intro

Simplifying the path to enrollment

Hydro One's myEnergy Rewards program encourages Ontarians to reduce their energy use, but the original landing page was falling short. Cluttered content, unclear messaging, and an outdated layout were preventing users from enrolling.

Our team was tasked with bringing the redesign in-house and applying user-centered design principles to improve performance. The goal was to create a clean and intuitive landing page that clearly communicates the program's benefits and motivates users to take action.

This case study walks through the entire process, from early research and competitor analysis to design exploration and final launch, showing how thoughtful UX can drive real results.

Before

Hydro One contact page before image

After

Hydro One contact page After image

Goal

Aligning user needs with business outcomes

Our main objective was to design a landing page that not only looks good but converts. The new page needed to follow proven marketing principles while solving usability issues and making the enrollment process feel easy and intuitive. By balancing a professional tone with a more human-centered design, we aimed to build trust and increase sign-ups for Hydro One's myEnergy Rewards program.

What we set out to achieve

Research

Grounding design decisions in data and best practices

Before initiating the design process, we conducted extensive research to understand user behavior. Insights from heatmaps showed areas where users frequently dropped off, while user interviews revealed confusion about program benefits and enrollment processes. These findings informed key design decisions.

Competitive analysis

Energy Auctions

Strengths

  • Clear monetary benefit: Claims up to $18K/year with simple language.
  • Call to Action (CTA) is bold and immediate (“Enroll Now”).
  • Minimal design clutter: Easy to skim and digest key points.

Weaknesses

  • Dated design and minimal visual polish.
  • Doesn't personalize messaging (residential vs business).
  • Lacks interactive or educational content.

Opportunities

  • Emulate clarity and value-first messaging.
  • Use improved design visuals to enhance trust.
  • Lacks interactive or educational content.

GridPoint

Strengths

  • Modern, professional visual design with animations and icons.
  • Uses social proof (partner logos, case studies).
  • Minimal design clutter: Easy to skim and digest key points.

Weaknesses

  • Focused on enterprise/B2B, so not relatable for residential users.
  • Very little detail about how the program works.
  • CTA is to “Request a Demo” not suitable for utility customers looking to quickly enroll.

Opportunities

  • Leverage GridPoint's visual storytelling and brand polish.
  • Include customer success examples or video testimonials.

Heuristic annotation highlights

Every effective hero section should include three key elements: concise and scannable verbiage that clearly explains what is happening, a clear call to action such as “Click me,” “Schedule now,” or “Make it happen,” and relevant imagery or video that visually communicates the product or service being offered.

No need to have this section anymore as we are bringing the page inhouse and our navigation will be used.

The “Stay Cool and Win” section could be clearer and more engaging. Emphasize that the contest is exclusive to existing myEnergy Rewards members, highlighting that members can win up to $3,000 just for participating. Right now, it's unclear who qualifies or what the contest involves. Add a stronger callout and include a secondary CTA like “Enroll in myEnergy Rewards” to encourage new sign-ups by showcasing the added value of ongoing membership.

Add social proof on the page (A guide section). We can take the quotes from participants already enrolled into the program. It will really help add legitimacy to the landing page and trust for users.

Add a “negative stakes” section below the hero to show what users risk by not enrolling. Highlight the pain points and position the program as the easy solution.

Screen shot of old myEnergy Rewards landing page

Landing page guide

To ensure the new page followed proven conversion strategies, we created an internal "Optimal Landing Page" reference based on UX best practices. It covered the ideal content sections for a landing page. This guide became a foundation for wireframing and helped align stakeholders on what “good” looked like.

Hero section Negative stakes section Value proposition section Guide section Plan section Explanatory section FAQ section Contact section Footer
Landing page guide

Why typeframing matters

Before diving into high fidelity visuals, typeframing offers a focused way to design with intention. It's a low fidelity layout that uses real content, accurate spacing, and proper structure, just without the final polish of colors, imagery, and branding. By stripping the design down to its essentials, stakeholders are encouraged to evaluate what really matters: the hierarchy of information, the clarity of messaging, and the overall user flow. This approach leads to faster alignment, fewer revisions, and a stronger foundation when moving into high fidelity design.

Low fidelity mock up of landing page Low fidelity mock up of landing page
Low fidelity mock up of landing page Low fidelity mock up of landing page

Design considerations

Designing with clarity, conversion, and trust in mind

Guided by our research and the optimal landing page framework, we focused on removing friction, guiding users, and reinforcing trust. Every design decision was intentional, rooted in user behavior, best practices, and Hydro One's brand values.

Refined content flow

Visual hierarchy that leads to action

Friendly and accessible design

Reinforcing trust and credibility

Black 400

#242424

Black 500

#424242

White 100

#ffffff

White 200

#e2e2e2

Teal 400

#005866

Teal 500

#1A6976

Teal 550

#257F8B

Vibrant Teal 400

#77E9C6

Mint 100

#DDF0EA

Mint 150

#CEE1DB

Typography

The choice of typography on websites plays a crucial role in establishing a modern, readable aesthetic that enhances user experience. With versatile styles and web-optimized designs, well-chosen typography ensures clarity, accessibility, and a cohesive brand identity, fostering trust and engagement with users.

Roobert

Hydro One's use of the Roobert font on their contact page embodies a modern, clean aesthetic that enhances readability and user experience. With its versatile styles and web-optimized design, Roobert ensures a cohesive and accessible interface, reflecting Hydro One's commitment to clarity and professionalism in digital communication.

Heading one - Roobert bold

Heading two - Roobert semi-bold

Heading three - Roobert semi-bold

Heading four - Roobert semi-bold

Heading five - Roobert semi-bold

Heading six - Roobert semi-bold

Body copy - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, harum.

The launch

From mockups to live site

With the design finalized, I shifted into development, bringing the landing page to life using HTML, CSS, and JavaScript. This end-to-end process allowed for a seamless transition from vision to execution, ensuring every detail from layout to interactions was implemented with precision.

Building the page myself meant I could rapidly test, iterate, and refine on the fly, optimizing for performance, accessibility, and responsiveness across devices. I also ensured SEO best practices were in place before launch to support discoverability.

Once live, I monitored the page's behavior to make minor refinements and ensure everything performed as expected. The result was a polished, high-converting experience that aligned closely with both user needs and Hydro One's goals.

Impact

Clearer messaging, better results

Following the launch, the redesigned landing page delivered meaningful improvements in both user engagement and program enrollment. Two of the project's key success metrics.

+25%

Enrollment increase

Enrollment rose from 24,000 to over 30,000 users in the months following the redesign, signaling that the new layout and messaging more effectively communicated the program's value.

3x

Improved time on page

Average time on page jumped from under one minute to over three, indicating that visitors were spending more time engaging with the content and scrolling through the full story.

Jacob possesses a unique blend of creativity and pragmatism. This harmonious fusion of his design and development prowess consistently culminates in the timely delivery of exceptional outcomes.

Jason Somai

Digital Manager - Hydro One

Final thoughts

Creating impact through clarity and empathy

Redesigning the myEnergy Rewards landing page wasn't just about aesthetics. It was about understanding users, removing friction, and encouraging meaningful action. By combining UX best practices with thoughtful content flow and clean development, we built a landing page that resonates with users and delivers measurable results.

More case studies
Desktop illustration