Io Vado a Metano

The Io Vado a Metano project (English: “I’m running on methane”) is an educational platform design created for Italian energy company SNAM to comply with Italian Ministry policies and promote Compressed Natural Gas (CNG) as a safe and sustainable alternative to gasoline and diesel. As Senior Visual Designer, I directed this comprehensive digital initiative that combined UX design, illustration, and motion graphics to make complex energy concepts accessible and engaging.

Project Goals & Strategic Objectives

The educational platform’s core aim was to teach Italian drivers how to refuel their vehicles with CNG safely while encouraging widespread adoption of this sustainable energy alternative. SNAM needed a digital solution that could effectively communicate technical safety information while making the switch to methane fuel feel approachable and beneficial for everyday consumers.

This initiative was part of Italy’s broader commitment to reducing carbon emissions and transitioning toward cleaner transportation fuels, making the platform both a commercial and environmental imperative for SNAM.

Design Challenge: Multi-Generational Appeal

The primary UX design challenge was developing a visual language that resonated with both younger and older audiences—a critical requirement since CNG adoption needed to span all driver demographics. The platform had to make the benefits of methane fuel immediately understandable and genuinely engaging, not merely informative.

Traditional energy sector communications often skew technical and dry. Our mission was to break that mold with an interactive learning experience that felt modern, friendly, and trustworthy while maintaining the gravitas appropriate for safety-critical information.

User Experience & Journey Mapping

Working closely with the UX Designer, I helped craft a comprehensive user journey that ensured the energy education platform was intuitive and inviting. The information architecture encouraged users to explore progressively, learn at their own pace, and ultimately share their knowledge with others—creating a ripple effect for CNG adoption.

Once the optimal user path was defined, I developed a flexible and consistent design system that could accommodate evolving content requirements and future platform expansions. This systematic approach ensured visual coherence across all touchpoints while allowing for scalability as SNAM’s educational content grew.

Illustration & Motion Design Strategy

The illustration and animation work presented unique challenges: the visuals had to be simple enough for smooth animation yet sufficiently clear to communicate complex safety instructions accurately. Every illustration needed to work both as a static image and as part of an animated sequence.

I approached this by simplifying real-world references into streamlined, schematic illustrations that could be animated efficiently. This methodology balanced clarity, creativity, and production efficiency within tight budget and technical constraints. The result was a library of custom illustrations that felt approachable without sacrificing instructional precision.

The motion design elements brought these illustrations to life, demonstrating refueling procedures step-by-step in a way that text or static images alone could never achieve. Animation made potentially intimidating technical processes feel manageable and straightforward.

Visual Identity & Design Execution

The final output was a friendly, informative sustainable energy platform that utilized warm, hued colors and playful illustrations to convey messages of sustainability and innovation. The color palette deliberately avoided the harsh industrial tones typical of energy sector branding, instead opting for an optimistic, eco-friendly aesthetic that aligned with CNG’s environmental benefits.

Typography was selected for maximum readability across age groups, with clear hierarchies guiding users through educational content. Interactive elements were designed with generous touch targets and obvious affordances, ensuring accessibility for less tech-savvy users.

Project Leadership & Collaboration

As project director and coordinator, I oversaw a team of four specialists while personally contributing the illustrated animations that became the platform’s signature visual element. This hands-on approach ensured creative consistency while allowing me to mentor junior team members in effective design system development.

Results & Impact

The Io Vado a Metano platform successfully transformed complex energy education into an engaging digital experience. The combination of thoughtful UX design, custom illustration, and strategic motion graphics created a resource that drivers actually wanted to use—a significant achievement in the often-overlooked category of utility education.

The platform contributed to SNAM’s mandate to promote CNG adoption while setting a new standard for how energy companies communicate sustainability initiatives to the public.

You can explore the live platform at iovadoametano.it

---

Project Vitals

Specialty: UI/UX Design, Illustration, Design System, Prototyping, Motion Design
Client: SNAM (Italian Energy Company)
Team size: 4
Role: Senior Visual Designer, Illustrator, Prototyper, Project Director
Duration: 6 months, 2021
Industry: Energy, Sustainability, Education
Tools: Adobe Creative Suite, Sketch, After Effects, Abstract, Zeplin