Octopus Energy
24 hour hackathon project with a team of software engineers, data scientists and product designers.
Our mission: to harness abundant green energy and reduce dependence on expensive fossil fuels. This case study will showcase how a cross-functional team navigated through a whirlwind of creative chaos, team alignment, user-centered design, and time constraints to craft a transformative solution.
Role
Team Lead
UX/UI Design
​
Results
Digital Solution MVP IOS
Panel Presentation
Introduction
In the fast-paced world of UX design, our ability to adapt and excel under pressure can make all the difference. This case study delves into a 24-hour hackathon experience where I led a diverse team of software engineers, data scientists, and product designers to tackle a critical challenge posed by Octopus Energy.
Our mission: to harness abundant green energy and reduce dependence on expensive fossil fuels. This case study will showcase how we navigated through a whirlwind of creative chaos, team alignment, user-centered design, and time constraints to craft a transformative solution.
Problem Space
Cutting Carbon Emissions
Problem Statement: How might we encourage customers to maximize the utilization of abundant, affordable green energy while minimizing the use of expensive fossil fuels?
Digital Solution
Harnessing Usability
Our objective was to empower users to make informed choices about their energy consumption, aligning it with eco-friendly practices.
Our solution aimed to:
Facilitate behavioral shifts towards consuming energy during off-peak hours.
Reduce dependence on fossil fuels during high-demand times.
Contribute to maintaining London's 100% green energy commitment.
Introductions
Meet The Team
Our team comprised three engineers, one data scientist, and three product designers, each with varying backgrounds and hackathon experience levels.
Kick-off
Breaking The Ice
To kick-start our journey, we initiated an ice-breaker exercise aimed at fostering empathy for our users. Through this exercise, we crafted user personas, delving deep into their behaviors, frustrations, and motivations. This not only loosened us up but also aligned us on our target user's profile, saving crucial time during ideation.
Discovery
Understanding The Problem
Our problem statement challenged us to encourage customers to maximize green energy utilization while minimizing fossil fuel consumption. To tackle this, we dove into understanding Octopus Home Mini's capabilities and the complex landscape of energy consumption.
We leveraged our data scientist's insights and examined the provided data sets. While primary research wasn't feasible due to time constraints, we were lucky to have Octopus Energy users on our team who provided valuable insights.
Discovery
Secondary Research
Our secondary research uncovered that Octopus Energy offered great tariff options but lacked user-friendly visibility. Rather than reinventing the wheel, we decided our solution should enhance the visibility and usability of existing tariff options.
Our focus was to provide users with clear visibility into peak vs. off-peak hours for better energy consumption planning.
​
We drew inspiration from competitors like British Gas, which had clear app displays and home mini screens. Real-time energy consumption data was a priority for users, both for awareness and cost savings.
Ideation
Designing With Empathy
Our user-centered design process began by creating a persona named Jonathan Field, an Octopus Energy customer living in London.
Using Jonathan's unique perspective, we ideated through techniques like 'crazy-8s' and collaborated closely with our technical counterparts to ensure our ideas aligned with Octopus Energy's values and the 24-hour time frame
How might we incentivize Jonathan to change his behavior to consume energy when it’s cheaper and cleaner?
Ideation
Design Opportunities
Our research found that Octopus Energy already had many great tariff options available to their users to encourage them to minimize their fossil fuel consumption but many of these options with unclear or difficult to access.
We decided that instead of creating a new experience for the users, we would enhance the usability of the great tariff options Octopus energy already had to offer.
Our main goal was to create more visibility into peak vs off-peak hours allowing our already eco-motivated users to better plan their energy use habits at times when green energy is more abundant and they can avoid using fossil fuels.
Design
Wireframes
The design team rapidly produced wireframes with a strong focus on accessibility and usability. Collaboration with engineers began early to incorporate their feedback and kickstart development.
Design
UI Design
We sought inspiration from industry leaders and adhered to the Octopus Energy design system for familiarity and reduced cognitive load. Regular sharing and input from developers ensured alignment and usability.
Delivery
Final Designs
Our team's final solution was meticulously crafted to achieve two primary objectives: first, to increase the visibility and adoption of the Agile Tariff, encouraging users to plan their energy consumption around off-peak times; and second, to elevate the user experience within the existing Octopus Energy app. Below, we delve into the features and functionalities that make up this transformative digital product:
Marketing Campaign
To promote the Agile Tariff and incentivize users to switch, we devised a strategic marketing campaign. This included a prominent pop-up modal that appears for users on other tariffs, showcasing a comparative chart.
Demystifying energy costs is essential for informed decision-making.
We provide users with a detailed breakdown of energy costs, including both GBP (£) and kWh (kilowatt-hours) units. This transparent approach aligns with industry standards and allows users to gain a clear understanding of their energy expenses.
Best Practice: Real-time data and transparent cost breakdowns contribute to user trust and satisfaction.
The chart illustrates the potential cost savings users could achieve by switching to the Agile Tariff. This data-driven approach leverages behavioral economics to encourage user adoption.
Best Practice: Pop-up modals should be well-timed and non-intrusive, appearing when users are likely to be receptive to the message.
In-app Monitoring
Our solution incorporated an in-app monitoring page, providing users with hourly updates on their energy consumption. This page also displayed a 24-hour projection of peak and off-peak times, drawing from data on London's energy grid.
To empower users with timely information, our solution includes a notification system that sends alerts when energy prices are at their lowest and when a higher proportion of green energy is available.
These alerts are designed to prompt users to shift their energy consumption to periods that are both cost-effective and environmentally friendly.
Best Practice: Push notifications should be customized to user preferences and time zones, enhancing their effectiveness.
We recognized the importance of highlighting green energy sources to users.
On the main page of the Octopus Energy app, we introduced interactive graphs that visually represent the proportion of green energy versus fossil fuels in real-time.
These graphs employ industry-standard data visualization principles to ensure ease of comprehension.
Delivery
Developed MVP
Simultaneously, our skilled software engineers were coding the MVP, transforming our design visions into a functioning reality. They navigated the intricacies of coding with speed and precision, working through the night to bring our concepts to life.
​
Technology:
​
JSX and CSS (Sass)
JavaScript
React.js
Collaborative workflow with git
Delivery
Presenting Our Work
The final challenge was presenting our digital solution to the Octopus Energy panel and answering technical questions about our process and design.
We only had 10 minutes to summarize the work we had completed over the last 24 hours and needed to ensure that our delivery was clear and compelling.
This added challenge helped to crystallize our enthusiasm for our solution and come together as a team to better understand each piece of the of the project.
Next Steps
In the fast-paced environment of a 24-hour hackathon, we successfully combined innovation, collaboration, and user-centered design to pioneer a solution that holds the potential to revolutionize how people engage with energy consumption.
To solidify the impact of our solution, our next steps include:
User Testing
Rigorous testing to validate our design with real users.
Incorporating user feedback to enhance usability and functionality.
Scaling
Exploring opportunities to integrate our solution into Octopus Energy's existing products and services.
Sustainability
Continuously monitoring the impact of our solution on energy consumption patterns and adapting as needed.
Key Learnings
Team Empathy: Starting with an ice-breaker exercise built empathy within the team, fostering a user-centric mindset.
Alignment: Clearly defining goals and user flows kept the team on track during the hectic hackathon.
Technical Collaboration: Collaborating closely with engineers and data scientists ensured feasible and effective solutions.
Presentation Skills: Crafting a compelling presentation is crucial for conveying the depth of user-centered design.
Resilience: The hackathon showcased the power of collaboration, resilience, and a shared vision to overcome challenges.
Conclusion
That 24-hour hackathon was like a real test of our teamwork and determination. We found out just how amazing a united team can be when we're all in sync and aiming for the same goal. It really showed us how far you can go when you've got talented people, a lot of passion, and a shared mission. And we made a real impact on Octopus Energy's mission to get more people on board with green energy.
