Sustainable energy, shaping tomorrow’s landscape
Sustainable energy can feel distant and complex. SMS Energy saw an opportunity to change that with a new initiative: Metis, an energy-as-a-service platform designed to remove barriers and offer clean energy with no upfront cost.
They wanted to make renewable energy clearer, more accessible, and easier to act on—and they turned to CI&T to make it happen.
The concept was simple: a green energy solution offering fully funded solar panels and batteries, with no upfront costs. Users would pay a flat monthly fee—like you would for a streaming service—and get access to clean energy at home. The direct debit energy plan removes the need for bank loans or complex financing. The goal was to create a renewable energy branding experience simple and accessible, and empower people to make smarter, transparent choices.
I joined the project as Senior UI Designer, collaborating with our Lead Designer and an illustrator. Together, we set out to transform a technical subject into a human experience—one that could help more people adopt solar power without the hassle.
Before moving into design, the team ran an extensive UX research process to define the foundation of the brand. Over several months, dozens of in-depth interviews were conducted and analysed using Loop, an AI-powered tool designed to surface insight patterns, behaviours, and pain points. This allowed us to identify both user and landlord needs, and build a clear and rational framework for how the brand should communicate—internally and externally—anchored in real brand values.
Once the data was synthesised, Pete Sampson and I moved into brand strategy and positioning. Our goal was to define a visual and conceptual identity through purpose-driven branding—something that could express both trust and transformation.
Through this user-centred approach, we identified two powerful archetypes:
- the Sage, representing knowledge, clarity and insight;
- the Magician, symbolising vision, creativity and change
We experimented with bold, strategic visual directions that merged both worlds—balancing the Sage’s grounded nature with the Magician’s spark of possibility. This duality became the core narrative thread across the brand and informed the entire visual identity system for Metis.
Identifying the Sage and the Magician gave us a clear starting point—but before merging them, we wanted to understand the full potential of each. Through a deep design exploration phase, we developed two separate directions, each with its own visual language, typographic system, and colour strategy—reflecting either clarity and trust, or transformation and energy.
This comparative analysis allowed us to challenge assumptions and validate our design rationale. It also helped the team define the limits and expressive potential of each archetype across different formats, from web to motion.
Once the individual directions were fully articulated, we began shaping a hybrid identity system—one that balanced logic and imagination. The result was a scalable and modular design system that could flex across digital touchpoints while maintaining coherence and personality.
Route 1
|
The sage
Route 2
|
The magician
The final outcome wasn’t just a visual facelift—it was a fully-fledged design system built from scratch, using modular components and scalable design tokens, created to be accessible and ready to grow. I led the creation of this system, ensuring every element—from typography to colour usage—was purpose-driven and consistent across digital and physical touchpoints.
A central visual asset was a set of bold, vibrant gradients, used not only to create visual interest but also to signal energy in motion. Accessibility remained a core pillar: every colour combination was tested for contrast and clarity. The gradients were paired with a distinctive “blimp” typeface, used selectively to highlight key messages with a friendly, balloon-like presence—adding warmth and personality to the tone of voice.
We introduced a signature flowing line element, representing connection: between people, their homes, and the broader energy ecosystem. This line supported interactive storytelling across layouts, subtly guiding users through the brand experience.
The brand was further enriched with a custom set of illustrations by Nick Toye, designed to humanise the energy experience. To enhance this, I developed a motion concept—part of a broader motion design system—in which the gradient colours inside the illustrations would gently shift over time. This ambient, continuous movement visually represents energy as a living force.
The result is a digital product for sustainability—a brand that not only feels modern and clear, but alive—anchored in a flexible and robust brand system architecture that empowers both users and the business.
To conclude, we designed what became the most strategic moment of the entire experience: the savings calculator journey. It wasn’t a standalone feature, but a conversion-focused experience—the decisive moment where UX strategy, persuasive design, and brand clarity had to align to turn intent into conversion.
The flow was intentionally simple and user-led: a six-step path where users shared just enough information—roof size, household details, smart meter data, EV ownership—to generate a personalised savings estimate. Rather than overwhelm with forms or friction, we built a journey that prioritised clarity, autonomy, and trust.
The final screen revealed much more than just a number. It presented a tailored result with tangible benefits, editable inputs, and a clear next step—transforming data into value.
To support this, we introduced key UX decisions:
- Progressive flow to reduce cognitive load and increase clarity
- Optional questions to keep users in control of the experience
- Trust through transparency: no email required to view results
- Real-time results page, tested and iterated for clarity and ease of use
This tool became a strategic asset for Metis: not just a calculator, but a high-impact touchpoint—turning user interest into action through thoughtful, measurable conversion design and UX experience.
Credits
| Client | Metis (SMS Energy) |
|---|---|
| Agency | CI&T |
| Brand strategy and visual identity | Matteo Miele & Pete Sampson |
| UI design & design system lead | Matteo Miele |
| Illustration | Nick Toye |
English 
Italian