Vodafone Energy
Vodafone Energy
Vodafone Energy
Designing a 0-to-1 in-app product to expand a telco giant into the green energy market
Designing a 0-to-1 in-app product to expand a telco giant into the green energy market
Background
Vodafone Spain aimed to diversify its business by breaking into the energy services. I worked on the team to define the E2E experience of the Energy Hub from scratch, integrating it directly into the app 13.5 million customers already use.
Background
Vodafone Spain aimed to diversify its business by breaking into the energy services. I worked on the team to define the E2E experience of the Energy Hub from scratch, integrating it directly into the app 13.5 million customers already use.
Role
Product Designer
Timeline
8 months (2022)
Team
2 Product Designers, 2 Tech Leads, 10+ Engineers
Tools
Sketch, Invision, Zeplin, Mural
Background
Despite being a high-margin product, FX Forwards growth lagged behind our core FX suite due to a legacy interface that lacked professional sophistication since 2021. I led the revamp of the contract creation process to remove operational bottlenecks and empower users to trade independently.
Background
Despite being a high-margin product, FX Forwards growth lagged behind our core FX suite due to a legacy interface that lacked professional sophistication since 2021. I led the revamp of the contract creation process to remove operational bottlenecks and empower users to trade independently.
Role
Product Designer for Treasury Tribe
Timeline
2 months (2024)
Team
1 Product Owner, 3 Engineers
Tools
Figma, Figjam
The foundation
When I first joined, MVP features based on initial benchmarks against E.ON and Endesa were already mapped out, so I took ownership of preparing initial wireframes in preparation for the primary usability test within a month. The flow covers four core pillars:
Find & Sell: Discovery and customised calculator
Checkout: GDPR and credential migration
Onboarding: Account setup and initial orientation
Self-management: Dashboard, consumption tracking and billing
The foundation
When I first joined, MVP features based on initial benchmarks against E.ON and Endesa were already mapped out, so I took ownership of preparing initial wireframes in preparation for the primary usability test within a month. The flow covers four core pillars:
Find & Sell: Discovery and customised calculator
Checkout: GDPR and credential migration
Onboarding: Account setup and initial orientation
Self-management: Dashboard, consumption tracking and billing
The foundation
When I first joined, MVP features based on initial benchmarks against E.ON and Endesa were already mapped out, so I took ownership of preparing initial wireframes in preparation for the primary usability test within a month. The flow covers four core pillars:
Find & Sell: Discovery and customised calculator
Checkout: GDPR and credential migration
Onboarding: Account setup and initial orientation
Self-management: Dashboard, consumption tracking and billing
Stage 1
Validating our concept
Our goal to this primary research was simple: validate the end-to-end product hypothesis and catch friction points early.
The results were positive, confirming that effortless tracking and self-management are the service's most valuable features.
Stage 1
Validating our concept
Our goal to this primary research was simple: validate the end-to-end product hypothesis and catch friction points early.
The results were positive, confirming that effortless tracking and self-management are the service's most valuable features.
Stage 1
Validating our concept
Our goal to this primary research was simple: validate the end-to-end product hypothesis and catch friction points early.
The results were positive, confirming that effortless tracking and self-management are the service's most valuable features.
↑
Users loved the convenience of having everything in one place, but the telco-to-energy leap still felt a bit uncertain. While the concept worked, we found that small functional hurdles and a few trust issues were getting in the way of a seamless transition.
↑
Users loved the convenience of having everything in one place, but the telco-to-energy leap still felt a bit uncertain. While the concept worked, we found that small functional hurdles and a few trust issues were getting in the way of a seamless transition.
↑
Users loved the convenience of having everything in one place, but the telco-to-energy leap still felt a bit uncertain. While the concept worked, we found that small functional hurdles and a few trust issues were getting in the way of a seamless transition.
Stage 2
Polishing the quality
We moved into three-week Agile sprints to define acceptance criteria for development hand-off. However, an development hurdle emerged: the external Turkish team was unfamiliar with Vodafone’s design library, causing a two-week blockage and UI inconsistencies.
To restore velocity, I bridged the gap between the developers and our core design system team. I implemented a visual QA process to audit UI fidelity and interaction quality, managing all fixes via dedicated Jira tables to ensure every screen met our standards before go-live.
Stage 2
Polishing the quality
We moved into three-week Agile sprints to define acceptance criteria for development hand-off. However, an development hurdle emerged: the external Turkish team was unfamiliar with Vodafone’s design library, causing a two-week blockage and UI inconsistencies.
To restore velocity, I bridged the gap between the developers and our core design system team. I implemented a visual QA process to audit UI fidelity and interaction quality, managing all fixes via dedicated Jira tables to ensure every screen met our standards before go-live.
Stage 2
Polishing the quality
We moved into three-week Agile sprints to define acceptance criteria for development hand-off. However, an development hurdle emerged: the external Turkish team was unfamiliar with Vodafone’s design library, causing a two-week blockage and UI inconsistencies.
To restore velocity, I bridged the gap between the developers and our core design system team. I implemented a visual QA process to audit UI fidelity and interaction quality, managing all fixes via dedicated Jira tables to ensure every screen met our standards before go-live.
Stage 3
From release 0 to Release 1
After eight sprints, the first three pillars were production-ready. However, due to tight deadlines, we had to defer most of the self-management features to the next release.
To finish the remaining, we conducted an open card-sorting session with the goal of simplifying the IA and ensuring users could navigate the complex account settings effortlessly.
This allowed us to refine the user stories based on mental models rather than assumptions.
Stage 3
From release 0 to Release 1
After eight sprints, the first three pillars were production-ready. However, due to tight deadlines, we had to defer most of the self-management features to the next release.
To finish the remaining, we conducted an open card-sorting session with the goal of simplifying the IA and ensuring users could navigate the complex account settings effortlessly.
This allowed us to refine the user stories based on mental models rather than assumptions.
Stage 3
From release 0 to Release 1
After eight sprints, the first three pillars were production-ready. However, due to tight deadlines, we had to defer most of the self-management features to the next release.
To finish the remaining, we conducted an open card-sorting session with the goal of simplifying the IA and ensuring users could navigate the complex account settings effortlessly.
This allowed us to refine the user stories based on mental models rather than assumptions.
Stage 4
Stakeholder prioritization
During the transition between releases, we hit a recurring bottleneck: a lack of clarity regarding technical and business constraints. This ambiguity stalled our design progress, so I co-led a cross-functional workshop with Business, IT, Data, and Ops to align on our roadmap.
Stage 4
Stakeholder prioritization
During the transition between releases, we hit a recurring bottleneck: a lack of clarity regarding technical and business constraints. This ambiguity stalled our design progress, so I co-led a cross-functional workshop with Business, IT, Data, and Ops to align on our roadmap.
Stage 4
Stakeholder prioritization
During the transition between releases, we hit a recurring bottleneck: a lack of clarity regarding technical and business constraints. This ambiguity stalled our design progress, so I co-led a cross-functional workshop with Business, IT, Data, and Ops to align on our roadmap.
Connect CMS Image fields (Image 1–10)
↑
By evaluating tasks through this matrix, we moved past the internal blockages and created a Customer Journey Release Map. This ensured that the most critical functionalities for all stakeholders were prioritized for the upcoming sprints.
↑
By evaluating tasks through this matrix, we moved past the internal blockages and created a Customer Journey Release Map. This ensured that the most critical functionalities for all stakeholders were prioritized for the upcoming sprints.
↑
By evaluating tasks through this matrix, we moved past the internal blockages and created a Customer Journey Release Map. This ensured that the most critical functionalities for all stakeholders were prioritized for the upcoming sprints.
Outcome
The launch successfully transformed the Mi Vodafone app into a multi-service hub. By early 2024, Vodafone Energía became a recognized contributor to Spain’s National Energy Efficiency Fund, indicating a steady climb in its market footprint.
Outcome
The launch successfully transformed the Mi Vodafone app into a multi-service hub. By early 2024, Vodafone Energía became a recognized contributor to Spain’s National Energy Efficiency Fund, indicating a steady climb in its market footprint.
Outcome
The launch successfully transformed the Mi Vodafone app into a multi-service hub. By early 2024, Vodafone Energía became a recognized contributor to Spain’s National Energy Efficiency Fund, indicating a steady climb in its market footprint.
Key takeaways
Design systems require alignment, not just assets: We learned that a design library is only effective if the dev team knows how to use it. By facilitating direct communication, we eliminated UI inconsistencies and stopped wasting time on repetitive bug fixing.
Design-led efficiency: By preparing visual mockups and content before refinement meetings, we gave stakeholders a clear source of truth. This shift in the process cut our story-pointing time by 50%
Key takeaways
Design systems require alignment, not just assets: We learned that a design library is only effective if the dev team knows how to use it. By facilitating direct communication, we eliminated UI inconsistencies and stopped wasting time on repetitive bug fixing.
Design-led efficiency: By preparing visual mockups and content before refinement meetings, we gave stakeholders a clear source of truth. This shift in the process cut our story-pointing time by 50%
Key takeaways
Design systems require alignment, not just assets: We learned that a design library is only effective if the dev team knows how to use it. By facilitating direct communication, we eliminated UI inconsistencies and stopped wasting time on repetitive bug fixing.
Design-led efficiency: By preparing visual mockups and content before refinement meetings, we gave stakeholders a clear source of truth. This shift in the process cut our story-pointing time by 50%
Another story
Re-imagining the RB5 investment experience to help businesses manage and grow their capital
Another story
Re-imagining the RB5 investment experience to help businesses manage and grow their capital