Mariana da Matta
Back to projects

Explaining electric cars to Brazilian drivers

Peugeot

Helping people understand electric cars, at their own pace.

The Electrification Guide, Move to Electric
Role
Senior UX Designer, via Merkle
Team
UX, UX writing and product managers
Tools
Figma

Overview

Brazil’s first electric Peugeot

With the arrival of its first electric car in Brazil, the e-208 GT, Peugeot had to explain everything that makes an electric car different, in a simple and didactic way, while keeping the brand’s identity.

The briefing: find out whether the electrification content from the Peugeot Portugal and France websites made sense for Brazilians, how mature the Brazilian public was on electric cars, and then define the content and wireframes for the product showroom and an electrification page.

Research

How ready is Brazil for electric cars?

To understand the public’s maturity, I mapped the main doubts consumers had, the terms people searched for most and how the electric car market communicates.

We built a comparison matrix of electric car product pages: what information each one offered, and how. The learnings became user journey proposals.

A guide to read, learn from and come back to whenever you want.

Design

A product page and a guide

Following the visual guide of Peugeot France, I designed two wireframes. The information architecture came from the ideal user experience, the storytelling of the main pages and the brand’s creative concept.

  • The e-208 GT product page, with every detail of the model.
  • The Electrification Guide, a content hub with what matters most about electric cars.
Illustrative process diagram

Wireframes and pages

From wireframe to page

The wireframes I designed for the e-208 GT product page and the Electrification Guide, each followed by the final pages.

Wireframe of the e-208 GT product page: a hero with the model name and buttons to buy online or build your own, tabs for the page sections, and four key advantages: range, battery, motor power and wallbox.
Wireframe · e-208 GT product page
The e-208 GT product page on a laptop: a hero with the yellow e-208 GT, the Move to Electric seal and tabs for advantages, charging, range calculator, technology, design and experience.
e-208 GT product page
e-208 GT product page: the introduction, the key figures (340 km of range, 50 kWh battery, 100 kW motor, charging station included) and the advantages section.
e-208 GT product page · key figures and advantages
e-208 GT product page: the launch offer, the technology section with regenerative braking, and the design section.
e-208 GT product page · offer, technology and design
Wireframe of the Electrification Guide: a hero, tabs for range, charging and battery, performance, costs, sustainability and technology, and the first topic, range.
Wireframe · Electrification Guide
Electrification Guide hero: the yellow e-208 GT on a city street, the Move to Electric seal and the title Peugeot electric car guide, with the topic tabs below.
Electrification Guide
Electrification Guide: the introduction and six topic cards (range, charging and battery, performance, costs and maintenance, sustainability, electric technology), followed by the range topic.
Electrification Guide · the topics
Electrification Guide: the section presenting Peugeot's electric cars, with the e-208 GT and buttons to buy online, see the car, book a test drive and build your own.
Electrification Guide · Peugeot's electric cars
Electrification Guide: the electric cars section, sustainability, electric technology with driving modes, and where to find charging points.
Electrification Guide · sustainability and technology