Charged Up

Users are going electric

Charged Up!

Charging Up

Overview/Summary

  • Users are Charged Up! over the ability to learn and make informed decisions about the purchase of electric automobiles.  Sales of electric vehicles are climbing at a steadily increasing rate each year as more and more people join the electric vehicle revolution.

Tools

  • Miro

  • Figma

  • Maze

  • Google Suite

  • Illustrator

Team

  • 1 UX designer

  • 1 Developer

My Role

  • UX design

  • UX research

  • Meeting Facilitator

Timeline

  • Overall: 4 weeks

  • Discovery & Research: 2+ weeks

  • Design & testing: 2 weeks

Problem

There are many myths and untruths out there about electric vehicles. This lack of information is especially prevalent for mobile devices as there are very few apps that share reliable information about electric vehicles with the users.

Target Audience

The target audience for this app includes those looking for a new environmentally friendly option to drive. These individuals also are looking for low lifetime costs. Some of these people are looking for a low lifetime vehicle cost.

Solution

Our end result is an easy to use intuitive and accessible application that is above the fold. The application allows the user to compare electric vehicles, compare features, locate charging stations, and learn all about electric vehicles.

My Design Process
Charged Up!

Double Diamond Design Process

Charged Up!

Week by Week Design Schedule

Charged Up!

What Are Our Research Goals?

Summary of Research Goals

  • Produce a user friendly application

  • Have the application free of pain points

  • Plan out what users will need to know to make informed buying decisions

  • Plan to discover through research what features users are looking to compare and contrast

  • Research and convey charging system information

Charged Up!

SWOT Analysis

SWOT Analysis

A SWOT analysis was deemed important to help provide a clear view of strengths, allowing me to build on them and meet objectives at the same time. Areas of weakness and possible opportunities were also found. These could be exploited and expanded upon to create a superior, user friendly electric vehicle companion application.

Charged Up!

Pains obtained via survey data

Surveys (Quantitative)

Pain Points and Takeaways

After the project kickoff, definition of research strategy and objectives was next. Understanding the target audience and their challenges was a priority. I built an online survey. In just a few days, 30 submissions were received. Based on these, I identified 3 common pain points, which lead to the next logical step of seeking qualitative data via interview. We kept these pain points in mind as we moved throughout the entire project.

Charged Up!

User insights from the survey

Charged Up!

Key Interview Pain Points

Interviews (Qualitative)

During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. I prepared an interview script with 8 open-ended questions, focusing on our target audiences’ values, motivations, and daily routines. In 4 days, I recruited and interviewed 5 users remotely. I referenced the user interview findings throughout the entire design process, including the pain points that were uncovered.

A User Interview for Charged Up

Charged Up!

Car Charging

Recommendations from Interviews

What do they need/What are some recommendations?

  • They really want research

  • They definitely want to find information on pricing

  • They want a more personalized experience for choosing electric vehicles

  • They want to see how they compare to traditional internal combustion vehicles

  • They would like to see what others have said about electric vehicles

Charged Up!

What Do Our Personas Look Like?

Personas

We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 3 personas for each of our user segments.

  1. The working father who was looking to purchase a more environmentally friendly 2nd vehicle for his family.

  2. The recent retiree who was looking to purchase a more environmentally friendly option that would allow her to lessen her carbon footprint as she set out to travel during her retirement.

  3. The early adopter who likes to grab new technologies soon after they become available.

Charged Up!

Empathize

Empathy Map

The empathy map represents a principal user and helped us better understand our users motivations, concerns, and overall experience. I wanted to organize our users behaviors and feelings to create a sense of empathy between them and ourselves.

Charged Up!

Charged Up Empathy Map

Charged Up!

Customer Journey Map

Customer Journey

I created a customer journey map to build a better understanding of how customers find and interact with electric vehicles and to discover opportunities for improvement. The map revealed some opportunities along this customer journey.

Charged Up!

Customer Journey Map

Charged Up!

How Might We

How Might We Exercise

I conducted a how might we exercise to help determine which product features to include in the design and how to go about designing them.

Charged Up!

Detailed User Stories

User Story/User Flow

There is a Native American proverb that says “It takes a thousand voices to tell a single story”and that’s exactly how I set out to write a user story. I took the voices of many users, uncovered their core need and turned it into a story. This represents the core needs of the user, what they do with the product and why they do it.

The user flow below represents the paths or tasks the user may undertake while using the product.

Charged Up!

Charged Up User Flow

Charged Up!

Charged Up Site Map

Sitemap

A top down look of how all the pages may be arranged in the Charged Up application.

Charged Up!

Time to Sketch It

Sketches

Below are sketches based on initial research.

Charged Up!

Paper Prototype

Paper Prototype

At this stage I set out to create a paper prototype to begin to gauge how the user might interact some buttons on a screen.

Charged Up!

Designing

Preference Testing

As part of the design process, I conducted some preference testing with 20 users to determine which layouts were preferable for my target audience. Testing was conducted for each of the main 6 screens for the design with user preferences marked with a blue arrow.

Charged Up!

Lo-Fi Wireframe Sketches

Lo-Fi Wireframe Sketches

Based on user research and a thorough round of preference testing I was able to sketch some initial wireframes on paper. Here are those ideas.

Charged Up!

Lo-Fi Wireframe

Digital Lo-Fi Wireframes

Here is what the initial lo-fi wireframe looks like.

Lo-Fi Clickable Prototype

Charged Up!

Clickable Testing

Usability Testing

I ran some usability testing with the lo-fi clickable prototype that was created based on research and user preference. I tested with 5 individuals and 3 chose to leave useful feedback.

Charged Up!

Things Users Liked - The Glows

Charged Up!

Things Users Disliked - The Grows

Charged Up!

Modified Home Page

Home Page Multiple Paths

A home page update based on the first few rounds of user testing. Users indicated they would like a bigger button in the middle and thought a darker border would help things stand out.

Charged Up!

Charging Page Update

Charging Page Multiple Paths

This is an update to the charging page based on multiple rounds of user testing. Users indicated they would like a more interactive map.

Charged Up!

Charged Up Mood Board

Mood Board

I aimed for a color scheme that would adequately convey the concept and excitement of electricity. The sky blue can indicate excitement and the app is electric. Set against a dark mode, it creates a contrast pleasing to the eye. Futuristic images represent a high tech electric feel for the design.

Charged Up!

Style Guide Model

Style Guide/Design System

A style guide helps with consistency across a design team and will be added to as you run through multiple versions of your design. It allows for a great level of consistency in the design. This is the documentation of my thought process on Charged Up with representations of iconography, color palettes, UI elements, typography, accessibility, and others. For accessibility I aimed for an intuitive design with elements that were easily perceptible and required low physical effort. A contrast check was done along with a color blindness test to ensure AAA compatibility. The logo, brand, and color scheme conveys excitement and electricity.

Charged Up!

Testing an App

Usability Testing Hi-Fi

I created a fully-functional, hi-fidelity prototype of the new flows in Figma which I tested by utilizing Maze. At the same time, I started recruiting subjects for the test who fit the necessary criteria. I conducted 4 usability tests in the first round and 2 more after iterating on the few issues that were identified. Below are those examples.

Issue 1:

Users clicking on the warranty option instead of the charging option when comparing charging information for electric vehicles versus combustion vehicles.

Solution 1:

I removed the warranty section and kept that strictly in the electric vehicle car picker section. The result was a 100% success rate upon 2nd testing for this task.

Charged Up!

Before and After Testing

Charged Up!

User Testing

Usability Testing

Issue 2:

The main menu was deemed to be misplaced and redundant.

Solution 2:

I changed the location of the menu and made each menu icon to reflect each main page of the design.

Charged Up!

Before and After

Charged Up!

Home Screen

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message, which is: “charged up”. Also, I checked out the competition and took a close look at all of my library ideas to come up with a working prototype. The result was a superb dark mode prototype for the mobile environment. Please find the updated screenshots and prototype below.

Charged Up!

Hi-Fi Prototype

Hi-Fi Prototype

Here is the hi-fi prototype after rounds of testing.

Charged Up!

Refine the Design

Next steps

My goal moving forward is to refine the design through additional rounds of testing once the product is placed on the IOS platform. Also, my goal will be to update the information each year as electric vehicle research is constantly changing with the new technologies that emerge.

Charged Up!

A Bright, Electric Future!

Learnings

I learned that the more you interview, the more refined your approach continues to be. I was also able to come away with a greater knowledge of what Maze can do in terms of product testing. I intend to work more on this in the future. It is pretty robust in terms of offerings.

Challenges

An additional challenge moving forward will be to place this onto the mobile platform. Coding is a challenge for me thus far but I fully intend to rise to this challenge. I want to learn Java and CSS to start with, which will greatly aid me in my design offerings. In fact, I just started some course work in these.

Failures

I initially attempted some 3-D logo work as well, but failed at it initially. I also sought to do live account tracking but did not see how it could tie in for now.

Successes

I formed a few more professional relationships through this project. This was a joy to develop and I learned a great deal about electric vehicles. I also want to thank my developer for helping me out with some of the heavier, coding elements. We ended up with a superb , intuitive product that meets the needs of the user.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.