Revolutionizing Solar Storage
A UX/UI Website: Building a Trustworthy Digital System for a Clean Energy Innovator
Overview
Revolty, a French clean-energy startup, pioneered modular home battery storage. The challenge was operational clarity: redesigning the digital experience to transform complex second-life battery technology into a transparent, trustworthy value proposition that could attract both customers and investors.
Problem
The previous website didn’t explain what the battery actually does, how it works in a home, or why users should trust it. Both homeowners and installers struggled to understand the value and reliability of the technology, and the brand’s human, sustainable mission wasn’t visible.
Solution
I redesigned the site around clarity and credibility. I restructured the content, introduced motion and product animation to make the technology tangible, and created a responsive interface with a confident, human tone. The result is a cleaner, more intuitive experience that helps users understand Revolty in seconds.
Project Glimpse
1_ Discovery
Understanding Revolty and Its Voice
To ensure the final design provided genuine operational clarity, the project began with a phase of rigorous discovery. I conducted in-depth stakeholder interviews and market analysis to uncover not only how users perceive complex energy storage but also the foundational business needs and trust signals necessary for conversion. This process was critical for defining Revolty’s clear, confident, and trustworthy voice, establishing the strategic foundation that directly informed the new information architecture and overall site structure.
👤
6 interviews
Early users & installers
💼
2 Users types
Homeowner & Professionals
🔍
Benchmarked
Interviews & Insights
🎙️ Uncovering Operational & User Needs
I conducted deep-dive interviews with Revolty’s founders, early adopters, and solar providers to map the friction points in the energy storage journey. This research revealed a critical gap: while the technology was revolutionary, the initial digital experience left users with more questions than answers. By identifying these specific areas of confusion, I was able to pivot the strategy toward a narrative that prioritizes clarity and financial trust.
User Interviews
Competitive analysis
🔍 Mapping market landscape & trust signals
I analyzed clean-tech leaders such as Tesla Powerwall, BeemEnergy, and Atmoce to identify design and communication patterns. Most relied heavily on technical details, missing the emotional story of sustainability and independence, a clear opportunity for Revolty to differentiate.
Competitive Audit
Beem Energy
Visual Inspiration
Strengths: Outstanding UX/UI and lifestyle-driven branding that makes solar energy feel approachable.
Weaknesses: Overly focused on B2C, lacking the technical depth or specific sections needed for professional partners and investors
Atmoce
Technical Benchmark
Strengths: Strong tech-forward positioning with detailed product data that builds high professional trust.
Weaknesses: Dense, engineer-heavy copy that creates a high cognitive load for the average homeowner.
defining the voice
📣 Cafting a confident and trustworthy brand tone
To support high-stakes decision-making and build immediate credibility, I established a strategic tone of voice that bridges technical authority with human-centered accessibility. By demystifying complex technology through a clear and supportive narrative, the brand shifts from being a mere utility to a trusted partner in the user's energy journey.
Smart but approachable, trustworthy but human. > "We want people to feel empowered, not intimidated."
The
voice
early site map & information hierqarchy
🗺️ Structuring complexity for clarity and user flow
2_ define
Turning research into clear direction
After gathering insights from users and the Revolty team, I synthesized the findings into clear design foundations — defining the key user personas, problem statement, and core jobs to be done. These became the base for the site’s information architecture and content hierarchy.
personas
👥 Highlighting Revolty's two core user groups
The findings confirmed that we were designing for two different audiences, each requiring a different level of detail and clarity. These personas helped align the content strategy and design tone — ensuring Revolty could speak confidently to both technical partners and everyday homeowners.
problem statement
🎯 Framing the core challenge clearly
Despite Revolty’s innovative product and mission, the existing website failed to clearly explain how the system works or why it’s trustworthy.
The
challenge
Jobs to be done
⚙️ Focusing on functional and emotional motivations
The core of our strategy was defining the Jobs to Be Done (JTBD) for both the Homeowner and Professional personas. This framework allowed us to move beyond simple features and focus on the functional, emotional, and social outcomes users truly seek. By framing the design problem around these motivations, we ensured the final website directly addresses the critical needs for trust, efficiency, and clarity—key drivers for conversion in the clean-energy sector.
INFORMATION ARCHITECTURE
🗺️ Structuring clarity from complexity
Moving from research to structure, I developed the definitive Site Map (IA) to align the content precisely with our strategic goals. This architecture is not just a list of pages; it's a Goal-Driven navigation flow architected to solve the core Jobs to Be Done of both the Homeowner and Installer personas. The structure ensures users follow a logical path designed to build trust.
Together we decided to structure as follow:
3_ design
Transforming insight into a living experience
With a clear understanding of our users and communication goals, I translated insights into a design system and website experience that make Revolty’s technology tangible, trustworthy, and inspiring.
The design process focused on structure, emotion, and motion — turning complexity into clarity through storytelling and visual simplicity.
INFORMATION ARCHITECTURE
✏️ Transforming structure into storytelling
Starting from the validated site map, I built low-fidelity wireframes to visualize the content hierarchy and narrative flow.Each section of the site was designed to answer a specific user need identified during research.
🧱 Defining the look and feel
I worked on a clean, modern visual direction that reflects Revolty’s identity: << human, reliable, and forward-looking. >>
The interface combines ample white space, bold typography, and soft gradients inspired by natural energy transitions, making the experience feel both innovative and approachable.
design & content strategy
💡 Crafting language and visuals with purpose
Crafting a Clear, Human Narrative
The goal was to translate complex energy technology into a story users can understand in seconds.
The primary challenge was translating complex solar energy technology into a human-centric narrative that empowers users. I collaborated directly with Revolty's team to design the complete website copy, prioritizing clarity and trustworthiness. My process involved structuring content around core user needs—what the product is, the financial value it provides, and how to effectively engage with the product. By balancing emotional messaging (sustainability) with technical precision (safety, specifications), we ensured the final copy was intuitive, jargon-free, and unified the brand's voice across all platforms, successfully guiding the user to the next step.
Designing Visuals that Support the Story
To make the complex, technical product feel both tangible and approachable, I executed a modern visual strategy using AI generation tools (Midjourney, Runway, and DALLE). This process was critical for establishing the brand's identity: creating clean, future-focused imagery that consistently supported the narrative. I developed a unified visual treatment, including soft gradients and realistic textures, to build user trust and clarify abstract concepts—such as energy flow and installation context—that text alone could not convey. This ensured every image on the website was strategically designed to reinforce the story and elevate the overall user experience.
Visuals by AI: Enhancing brand consistency through DALL-E & Midjourney.
Aligning Visuals and Content into a Cohesive System
The final stage was ensuring seamless system cohesion: aligning every element—from the design visuals to the copy's tone and the layout's grid—into a unified user experience. This involved systematically pairing content decisions with the visual direction to reinforce meaning, ensuring the product felt both credible and modern. Critically, this foundational work focused on scalability, ensuring all content blocks and components were reusable across future pages and updates, establishing the practical groundwork for a comprehensive Design System.
design system & handoff
🧩 Delivering a scalable, developer-ready foundation
From Modular System to Seamless Execution
o ensure long-term scalability and technical consistency, I developed a comprehensive Design System in Figma, spanning core styles, spacing rules, and a library of responsive, multi-state components. This modular foundation was paired with a production-ready assets package—including AI-optimized imagery and finalized copy. By delivering a fully documented, structured ecosystem, I eliminated ambiguity and ensured that the final implementation maintained high visual fidelity and optimized performance from day one.
Final outcome & impact
From Modular System to Seamless Execution
The final result is a cohesive, high-fidelity digital ecosystem where visual consistency meets strategic intent. By harmonizing typography, color tokens, and professional-grade AI imagery, we elevated Revolty’s brand perception to a premium, industry-leading level. The content is now purposefully segmented, speaking directly to each user persona while providing the technical transparency and reliability that institutional investors demand.
Reflection
Next Steps
User-Driven Iteration
Implement design refinements and structural adjustments based on the insights gathered from the latest user testing sessions.
Motion Design Integration
Incorporate advanced interactions and micro-animations to enhance the tactile experience and intuitively guide the user flow.
Multilingual Expansion
Develop and adapt the content architecture for the English version, ensuring the design system remains scalable for international markets.
Key Learnings
Stakeholder Management
I learned the importance of setting clear boundaries and defining project scope early on to manage frequent change requests without impacting the timeline.
AI-Powered Consistency
I leveraged generative AI tools to create a cohesive and custom visual language, ensuring brand consistency across all imagery.
Development Synergy
Working closely with the developer taught me how to optimize Figma handoffs and inspired me to start learning Webflow to bridge the gap between design and code.