Switch Savvi by Procure Smart
Switch Savvi is an industry-disrupting energy procurement product developed for Procure Smart that simplifies how small and medium-sized businesses compare, select, and switch commercial energy contracts. Designed with speed, transparency, and usability at its core, the platform empowers users to make informed decisions without the complexity typically associated with business energy purchasing. I contributed as Senior Designer, collaborating with PMs, UX specialists, and engineers to shape the end-to-end experience.
Overview
Role: Senior Designer
Team: 1 Project Manager, 1 Senior Designer, 1 UX Designer, 3 Engineers
Platform: Web
The Problem
Commercial energy procurement is notorious for being confusing and time-consuming for SMEs. Unlike the residential market where price comparison tools are commonplace, businesses face opaque tariff structures, inconsistent supplier information, and a heavy reliance on manual support or broker-led processes. Through industry research and stakeholder discussion, we identified core pain points: confusion over tariff comparisons, limited time and resources to navigate procurement, lack of transparency into contracts and suppliers, and the high financial impact even small savings can have on tight budgets. This informed our strategic focus on usability and clarity for real users.
Discovery Workshop Activity - Understanding The Product
To ground our strategy in real needs, we ran in-depth discovery workshops with Procure Smart stakeholders. These sessions surfaced key insights about SME challenges around energy purchasing and shaped a shared vision for the MVP. Major outcomes included defined user pain points, alignment on business value, and the foundation for personas, user journeys, and flows. The discovery work was consolidated into a cohesive pack that guided every subsequent design decision.
Building on discovery insights, our UX strategy centred on breaking down the complex procurement process into a simple, guided experience. We mapped user flows that reduce cognitive load by breaking tasks into clear, sequential steps, and prioritised transparency in presenting tariff comparisons. By focusing on a step-by-step navigation model, we aimed to help users complete energy comparison and switching confidently, regardless of prior experience with energy procurement.
Discovery & Research
Discovery Workshop Activity - User Persona Creation
Discovery Workshop Activity - Competitor Analysis
Discovery Workshop Activity - User Journey / User flow Mapping
Discovery Workshop Activity - Sitemap of The Proposed Solution
Design & Iteration
With the strategic foundation in place, wireframing began. Low-fidelity wireframes helped us validate navigation, page structure, and edge cases early. These were iterated with stakeholders, refining flows around key tasks like entering usage details, reviewing deals, and completing contract sign-off. Transitioning into high-fidelity UI, we built a comprehensive design system to ensure visual consistency and scalability beyond MVP. Throughout the process, iterative feedback - both internal and with client partners - ensured the design remained user-focused and aligned with business expectations.
Every design decision tied back to user needs and business outcomes. Design system components were designed to be flexible for edge cases like varied contract types and meter details. Pricing cards and progression indicators were crafted to provide clarity without overwhelming users. Visual hierarchies reinforced user confidence by emphasising actionable information and reducing ambiguity. We also leveraged brand guidelines to align UI aesthetics with Procure Smart’s identity, ensuring the experience felt familiar and trustworthy.
Example of The Iterative Feedback on The Switch Savvi “Deal Builder” Screen (low-fidelity Wireframes)
Snippet of The Components Setup & Style Sheet in Figma
UI Design Overview of Switch Savvi in Figma (High-Fidelity)
Example screens - Welcome & Step 1 “About You”
Example screens - Stages of Step 3 “Your Deals”
Debrief & Outcomes
Example screens - Stages of Step 2 “Meter Details”
Example screens - Deal Finalisation & User Dashboard
Switch Savvi successfully went live as a functional product that enables SMEs to compare and transact business energy deals entirely online. The design work translated complex procurement logic into an intuitive user journey, reducing reliance on traditional agent-led methods. While some UX optimisation and iterative user testing remain future opportunities, the current product reflects a strong foundation built through collaborative effort between Layers Studio and Procure Smart.
This project reinforced the impact of structured discovery and iterative design in tackling complex domains. Looking ahead, opportunities include running usability tests with real users to uncover optimisation opportunities, expanding support for additional energy markets or contract types, and evolving the visual system for broader brand consistency. Ultimately, Switch Savvi demonstrates how thoughtful UX and clear design strategy can bring transparency and efficiency to an underserved B2B space.
Live product: switchsavvi.procuresmart.com
Full discovery pack: Please see this link
Note - credit to Layers Studio and Procure Smart for allowing this project to happen.