24-hour hackathon challenge: a collaboration with software engineers, data scientists, and UX designers

Participating in the Octopus Energy Hackathon, a 24-hour burst of creativity and organized chaos, I led a dynamic team tasked with a crucial challenge: encouraging customers to embrace cheap green energy and reduce reliance on expensive fossil fuels.
My Role
Team Lead, UX | UI Designer
Results
MVP, IOS
Client Presentation
The Challenge
Empowering sustainable choices with Octopus Home Mini
Octopus Energy, a global leader in green energy supply, is dedicated to shaping an affordable, sustainable energy future. Catering to over 5.3 million customers across 14 countries, they focus on maximizing the use of renewable energy. The Octopus Home Mini plays a pivotal role in this vision, enabling customers to monitor their real-time energy usage and costs.
Faced with the dual challenges of climate change and high energy costs, Octopus Energy presented us with a pivotal question:
"How might we encourage customers to make the most of abundant cheap green energy and avoid using expensive fossil fuels?"
Our Digital Solution
Octozone: Optimal Timing for Smarter Energy Use
Our hackathon innovation, 'Octozone', guides users to the best times for energy use, enhancing efficiency and environmental benefits. Octozone alerts users about these optimal times, making it easier to plan energy-heavy activities when green energy is most available.
Complementing this, 'Coral Points' rewards energy use in these optimal periods, gamifying conservation with coral reef growth visuals. Together, they make energy usage not only smarter but also rewarding and impactful for the environment.
Click anywhere on the below screen to interact with the latest prototype
Introducing Team 'Ink'
We were a dynamic group of three engineers, one data scientist, and three UX designers each bringing a unique skill set and perspective to the table.

Kick-off
Laying the groundwork:
Grasping the renewable energy scene
Our journey began with a collective deep dive into understanding the challenge at hand. We initiated our collaboration by aligning our understanding of renewable energy and user behaviors associated with it.
This involved a focused 20-minute session of desktop research, exploring the context of renewable energy and examining the current functionalities of the Octopus Mini app.
​
We adapted agile methodology during the hackathon to efficiently use our time and set milestones. While UX designers dived into secondary research, our data scientist started to analyze datasets to identify the market trends, define our consumer base and find patterns and opportunities.

Key insights from secondary research
Through our research and brainstorming, we identified critical aspects that shaped our approach:
# Consumer Awareness
Consumers want to understand their individual carbon footprint and take action accordingly.
# Smart Energy Usage
Consumers need clearer indicators informing them when they're using energy during periods that are both environmentally sustainable and cost-effective.
# Actionable Advice
The Octopus Mini app provides real-time data but lacks actionable recommendations on reducing carbon footprint and use more green energy when it is abundant.
# Diverse Motivations
A mix of environmental and cost-saving factors driving user behaviour, with many motivated by both.
Redefining the problem statement
Following our initial discussions and findings, we refined our understanding of the problem space. This led us to the question that would guide our project:
"How might we incentivise users to make environmentally impactful energy decisions while saving money by using Octopus Home Mini?"
This question became the cornerstone of our design challenge, focusing our efforts on creating solutions that not only promote sustainable energy use but also offer financial benefits to the users.
Crafting persona Tom: Data-driven insights
for young, eco-conscious users
Our journey to creating a persona began with insights from our data scientist and secondary research, revealing that younger generations are more inclined to adopt sustainable energy practices. Utilizing AI tools and these insights, we crafted a persona to guide our design process.

Table 1: Willing to make changes
Initially, the concept of a persona was unfamiliar to our data scientists and developers. I took the opportunity to explain its significance, emphasizing the importance of user-centered design. This approach led our team to consistently consider our user, Tom, in every aspect of the hackathon, from ideation to client presentation.

Table 2: Concerned about climate change

Identifying design opportunities: Smart energy scheduling and gamified impact visualization
As a result of our research and long discussions with the team, we identified two significant opportunities:
# Informing Optimal Energy Usage
We saw a need for a feature that informs users like Tom about the best times to use energy, balancing both environmental impact and cost-effectiveness. This solution would help users make more informed decisions about their energy consumption.
# Gamification of Impact and Savings
Another opportunity lies in presenting users' real-time environmental impact and financial savings in an engaging, gamified manner. This approach aims to make energy management not only informative but also enjoyable, encouraging users to actively participate in sustainable practices.
Sketching key screens: Showcasing best time slots, alarm settings, and gamified Coral Points rewards
Following the identification of key design opportunities, our UX team transitioned to sketching low-fidelity wireframes. We promptly shared these sketches with our development team, aligning our visions and setting a deadline to advance to mid-fidelity wireframes by 10 pm. Meanwhile, the developers were actively setting up Github and preparing the necessary code structures.

Visual design: Aligning with Octopus Energy's brand
In our approach to visual design, we first gathered UI inspiration through a quick research phase. Adhering to the limited brand guidelines supplied by Octopus Energy was crucial to maintain visual coherence and reflect the brand's values.
Brand guideline supplied by Octopus Energy


UI inspiration board
Delivery of our final design
In our project's final phase, the UX and development teams collaborated closely under time constraints. As we polished the UI and prepped for the presentation, our developers focused on code refinement and testing. We used Figma for seamless asset handover and Zeplin where necessary, maintaining constant communication. The feature's name, "Octozone," was brilliantly proposed by our data scientist Jeremy, capturing the essence of our energy usage reminder concept.
Technologies like JSX, CSS (Sass), JavaScript, and React.js, along with a collaborative workflow using git, were instrumental in bringing 'Octozone' to life.


Octozone
Octozone is the best period of time in a day to use energy for boosting the positive environmental impact and lower costs for you.
Alarm setting for Octozone
Set alarms and schedule energy-intensive tasks, such as running the washing machine or recharging electric vehicles, during the most efficient times.




Coral points and total savings
Earn rewards as you save money and the planet. Every eco-friendly action you take not only contributes to your Coral Points but also reflects in your monetary savings.
Presenting our solution
For our client presentation, I guided our team in creating a clear, engaging presentation. I assisted our data scientist in making complex graphs understandable and ensured everyone was ready with their parts.
Despite not having time to rehearse, our focus remained on highlighting our user-centered approach, often referencing our persona, Tom, to demonstrate our solution's real-world impact.

"Overall, this team did really well, I was a big fan of their solution and was well implemented. I liked the screen that showed the savings as well."
Next Steps
# User Testing
Our immediate priority is to conduct user testing with real users. This step is crucial to validate our design decisions and ensure that our solution meets user needs effectively.
# Integration with Smart Home Devices
We plan to connect smart home devices to the Octopus Home Mini, allowing users to schedule their devices' operation during optimal energy periods.
# Monitoring the impact
We would establish metrics to track Octozone usage and adherence, providing insights into user engagement and guiding improvements for enhanced sustainability impact.
Key learnings
This experience taught me the value of swift, effective teamwork in a cross-disciplinary, time-pressed sprint. Key takeaways include:
​
-
Effective Cross-Disciplinary Collaboration: We gained a deeper appreciation and understanding of different disciplines, learning to manage conflicts more effectively.
​
-
Crucial Role of Clear Communication: Overcoming misunderstandings among team members reinforced the importance of clarity in communication.
​
-
Time Management Skills: The tight timeline underscored the importance of efficient time management, ensuring that every moment was optimally utilised.
​​
-
Presentation Impact: The need for a well-rehearsed and content-rich presentation was clear.