FE EV responsive website

header

Franklin Energy EV responsive website

My role

Customer Insights & Ideation

Partnered with a product manager and sales director to uncover insights and translate an idea into a concept.

Oversight & Coordination

Collaborated with product managers, engineers, and sales team to translate product features to the wireframe. 

Experience Strategy & Vision

Created frameworks to share vision, design principles, and content strategy. This helped generate ideas, align the team, and drive decision making. 

Planning & Scope Definition

Defined the product with the product manager and sales director. Evangelized customer goals and balanced business goals. 

Design Execution & Validation

Designed the site from scratch with a newly developed internal style guide including a color system, typography, components, and more, along with executing design specs and wireframes. 

Leadership

Designed and presented to executives, senior leadership team, and many other teams to get alignment and feedback throughout the project lifecycle.

Business goals

For EV Owners

Provides an experience to help them reduce costs of ownership by presenting information about Level 2 home chargers, along with charger rebate links to purchasing and other utility rate and demand response programs.

For EV Shoppers

Created an online experience for the user to easily navigate to see EV Benefits, Facts, Vehicle Comparison/Cost Calculator, and Find A Dealer, Find A Charging Station. Biggest benefit is to get them interested in EV and to then help them quickly choose an EV.

Process

Tool

  • Business requirements, user journey

  • Brainstorming, mockup, sitemap

    20 ideas

  • Wireframing, user testing

    3 concepts

  • Finalize wireframe

    1 final design

  • Visual design

Figma 

To create just about everything

figma_logo
Principle 

My favorite prototyping tool 

Principle-512

Who is the user?

AdobeStock_2105266252
Close-up portrait of yong woman casual portrait in positive view, big smile, beautiful model posing in studio over white background.

Emily

Emma

A proud EV owner. Emily owns an EV and drives to and from work every day. Emily has a charger in the garage that she used to charge her EV. 

A potential EV buyer. Emma wants to learn more about EV and the cost of owning it. 

Goal:

Find new programs to save on electric bills.

Goal:

Find more information before making a purchase.

User journey

How do customers find what they need?

FE EV responsive website

Ideation

Met with all the stakeholders, including the product manager, and sales director, to draft features that the customer might like at each stage.

FDD33195-A042-43A5-A5C4-193EA1AA1035

Sitemap & flow

Sitemap
Flowchart

Wireframe draft – low fidelity

Idea and exploration

assumptions
Find a dealer step 1
Find a dealer step 2
results
pricing-detail
3a-calculator
EV Home page1400x900_v1
EV Rate plan

User testing

The EV calculator is the key part of the whole project, we have worked with UserZoom to pinpoint what users like.

Testing method

Target: EV calculation mock up

Gender: 3 males, 2 females / A mix of EV owners and shoppers.

Method: Online user testing via UserZoom

Task: Compare value and usage

Some of the insights

“What was missing from the summary page was the math. Show me for different numbers of years of ownership what the total net cost would be!” – an EV Owner

“I felt like there needed to be a clear separation between the two vehicles to show the differences between each from a specs standpoint such as miles per gallon and other specifications of each car. I felt organization of the page was missing” – an EV Shopper

2021-01-31_07-02-08
2021-01-31_07-09-03

Final wireframing – high fidelity 

The home page would be divided into two different categories for two different groups.

EV owner main page

Key feature:

  • Introducing to incentives and programs
  • Promotional space for buying a home charger
EV shopper main page

Key feature:

  • EV Benefits & EV facts
  • Compare vehicles – the cost of owning an EV
EV Page for owner - Desktop
Frame 155
Owner page - Mobile
1.0.0 Shopper LP - Desktop
Shopper page
Shopper page - Mobile
Compare EV flow for mobile view
mobile_wireframe
Wireframe – all
FE EV responsive website

Style guide

Used the corporate style guide that I developed for Franklin Energy. 

FE EV responsive website

Visual design

The landing page has two directions that separate the user to view the dedicated content. I choose the video with an EV driving through nature to show the environment-friendly aspect of EV. 

Visual design – all
FE EV responsive website