ReCharged | Interactive Interface for an Electric Vehicle Charging Station

With the advancement of innovative technologies and environmental awareness, interest in Electric Vehicles (EV) has skyrocketed worldwide. But how can EV proponents facilitate this leap towards clean personal transportation when the infrastructure to support it is sorely lacking, and comes at a high price for consumers?

01_Project Overview

The Opportunity

ReCharged is one company that aims to solve this problem, by providing communities with no-cost EV charging stations that are entirely funded through advertisements. They were founded in 2016 in Vancouver, and their hope is that, by eliminating charging costs and increasing the visibility of EV charging stations, users would be encouraged to see EVs as a more realistic option for themselves.

ReCharged is currently in discussion with multiple cities in Greater Vancouver to run pilot projects on their interactive charging stations.

Project Goal

Within our 3-week timeframe, we were to design an interface and generate sample content for ReCharged’s interactive charging stations. As UX Designers, we aimed to uncover users’ greatest needs, and design based on their biggest pain points.

Design Team

Brian and I were the UX Designers for this unique project.

I found that the biggest challenge we faced was limiting our scope, as the sky was the limit for us in terms of ideating features. Conducting user research through interviews and a survey helped us gain insight that was so valuable and helped us feel confident in the features we decided to focus on.

Business Goals & KPIs

No matter how user-centric our design turned out, there would be no opportunity for these charging stations to be shared with the public without approval from the city. The design we would come up with had potential to influence whether city officials would approve pilot projects for their cities. Therefore, we needed to show that these stations could offer unique, positive value to the surrounding community.

As well, advertisements would be a key component in keeping the charging stations free for consumers. Therefore, we needed to find a way to incorporate advertising in the interface without distracting from its main functionality and deterring users.

We also aimed to educate users on EV usage and their impact on the environment.

From the above goals, we created Key Performance Indicators (KPI) to track our success. A successful design, to us, meant:

  • Users are able to extract valuable information from the display easily and efficiently
  • Users are able to interact with advertisements within the display
  • Users understand that the display is also an EV charging station, and leave with greater awareness of rising EV popularity in the city

02_Research

Research was a key element in helping us get to know our users, and to better understand what was happening within the EV industry already.

Domain Research

First, we did some research on current EV trends in Canada. According to fleetcarma’s 2017 Q2 statistics, EV sales throughout Canada have increased rapidly, with Quebec, Ontario, and British Columbia showing the most significant growth.

EVs are the future.
British Columbia saw the highest number of EVs sold in that province in Q2 of 2017. 850 new plug-in electric car sales in BC represents a 38% increase over the Q1 of 2017 and a 74% increase over Q2 of 2016.

In a 2014 Conference regarding Canada’s EV Policies, Electric Mobility Canada (EMC), stated that 2 key elements needed for Canada to reach its goal of half a million EVs by 2018 are: (1) government policies that incentivize the switch from gas to EV (subsidies), paired with (2) new infrastructure built to support this change.

Although there are already quite a few charging stations in greater Vancouver (see below image), most are hidden within parking garages and have an associated parking cost. ReCharged’s solution to speeding up a process dependent on slow-moving policy change is both creative and practical.

Map view of charging stations from plugshare.com

Competitive & Comparative Analysis

We also looked to one of ReCharged’s direct competitors, Volta Charging, to gain more insight on their business model.

Analyzing Volta VS ReCharged

Aside from operating in the United States, a key difference with Volta Charging is that they have chosen to set up their charging stations outside retail centres. Therefore their users would encounter the charging stations in a very specific context: driving to and parking at a shopping centre. One user stated on Yelp:

“Now shopping at the mall is less painful and getting a free charge for my plug-in is a bonus … Very nice bonus to ease the shopping pain and making it more attractive to spend my money.”

The key difference with ReCharged’s business model is their aim to have charging stations located by bus stops and near places with a lot of foot traffic (AKA, where most users would encounter it by accident). We realized that having the charging stations be useful to everyone, not just EV users, would be a key factor in garnering support from the community for these stations, as well as differentiating them from all the existing EV charging stations in the city. This is why we decided against only interviewing current EV users, as we knew that they would already find value in these charging stations. Our priority became finding out how others would find value in them as well.

Research — Indirect Competitor

In order for the general public to find value in this interactive kiosk, we needed to contend with a major competitor: mobile phones.

Nowadays, everyone has a mobile phone, so it was definitely a challenge finding how our interactive kiosk could help users in ways that their mobile phones and data plans could not.

I’ll speak more to this in the section below.

Interviews & Survey

We conducted 11 in-person user interviews to find out what users needed most in their day-to-day lives. We asked questions such as:

  • “How often are you online, and what proportion of that time is spent on a desktop versus on your mobile phone?”
  • “What are strengths you see within the local community? What weaknesses?”
  • “What would you like to see more of in your community?”

From the responses we received, we formed an affinity diagram to categorize those responses and infer meaningful patterns.

Some key findings from the interviews were:

  • Users wanted more events in the city
  • Users appreciate the multiculturalism in Vancouver, reflected in variety of foods and events in city
  • Users want more sense of community in the city
  • Users dislike “in your face” advertising

After extracting findings from our affinity diagram, we sent out a survey to confirm / disprove hypotheses we had on users’ needs and motivations. We wanted to be extra sure of our findings.

We received 54 survey responses. Below is a summary of key findings from survey responses.

Key Findings

  1. Users are constantly checking their mobile phones.

2. Locals use their phones to communicate. Tourists use their phones to navigate. Both are social media savvy.

What do you mostly use your phone for? (locally, and while travelling)

Phone usage — local

Phone usage — Travelling

Interestingly, when the same people are placed in different contexts (daily routine vs. travelling/in a new environment) their priorities change.

3. Whether local or tourist, most used app for daily activities was Google Maps.

When asked “Which mobile apps do you find most useful for day-to-day activities?” this is how people responded:

It seems that even for locals, Google Maps is valuable in that it eases their navigation (either while driving, walking, or taking public transit) and helps them estimate time of arrival.

4. Users are frustrated when they can’t access the information on their phones

When we asked users what they felt were the limitations of using a mobile phone, the two most prominent answers were:

It’s evident that users are quite happy with the existing functionalities of their mobile phones, it’s accessing those functionalities that’s become the problem. When small things like a dying battery or lack of data plan get in the way of users’ near-constant mobile communication and wayfinding, it’s understandably frustrating.

5. Users want relevant information

There’s such thing as “too much of a good thing”. With all this information at our fingertips, it’s easy to get lost in internet land, and not find exactly what we want. Paradox of Choice states that, given too many choices, users end up making poor decisions or not making any decision at all. Similarly, information overload in the internet can be stressful for users who are looking to make decisions on where to eat, what to purchase, etc.

6. Users love their outdoor spaces.

Love for the outdoors was a recurring theme in interview and survey results. When asked to complete the following sentence “One thing I feel my city does best is ________” nature and outdoor spaces ruled victorious. This isn’t very surprising, considering users were all from Greater Vancouver, so we’ve all presumably been spoiled rotten with our mountain views.

7. Users want more fun things to do in the city, and are frustrated at limitations in getting around to participate in those fun things

Design Implications

From the findings we received, we made the following design decisions:

  1. Decided to design an interface that would facilitate community building through connecting people to events and happenings going on around the city.
  2. Decided that information would need to be localized (info provided in kiosks related to immediate surroundings) in order to:
  • Combat the information overload users suffer when doing research online for things to do by providing relevant info
  • Provide additional value to users without a data plan or sufficient battery.

03_Planning

Now that we knew potential features we wanted in our kiosk, we needed to map out which features we wanted to prioritize. We constructed an impact / effort chart to help us out:

The boxes coloured orange are the features we decided to include, in order to form a Minimum Viable Product (MVP) that would meet users needs.

User Persona

From the data gathered, we formed a User Persona. In the beginning, our primary persona was a local man, motivated to find new things to do in the city he inhabits. However, when we looked closely at how this interactive kiosk could benefit users, we realized that our secondary persona, The Tourist, had more incentive to use them. It was the tourist who would also be seeking out activities to do in the neighbourhood, who would also benefit from localized information, and who was more likely to not have access to mobile data.

We decided to switch gears and have our tourist be the primary persona:

We still kept “The Local” as a secondary persona, as we knew from research that locals could also benefit from the kiosk.

User Scenario

We created a user scenario to help us better envision how our primary persona, Alisa, would come across the interactive kiosk, and how it would help her.

User Flow

From the above user scenario, we created a user flow to illustrate the steps Alisa would take in this situation in using the interactive kiosk to solve her current problem.

Some things to note:

  • From our research on interaction design, we decided to incorporate a “Hook” as the first part of the user flow. Because our users would not be anticipating using this kiosk and would presumably come across it while walking, we had to find a way to catch users’ attention and have them realize that the interface was interactive. We settled on having the interface use personalized prompts such as “Had your morning coffee yet?” in the morning or “You look cold! Need a place to warm up?” on a cold winter day.
Testing showed that the prompts were effective in catching peoples’ attention
  • We included at the end of the user flow some interaction with the “Play” functionality. We imagined that a user whose immediate need was already met would be curious about the “Play” option, and from there would discover the interactive advertisements and gamified EV learning component included.

Creating a user flow was very helpful to us so we could map out how many screens and interactions we would need to include in our prototype.

Site Map

In order to organize the information architecture further, we created a site map. As you can see, we decided to keep options limited to “Explore” and “Play” as very general categories that users could choose to delve into further.

04_Design

Sketching & Design Studio

Armed with the knowledge of what content we wanted to have, Brian and I set out to design the interface itself.

We completed a few Design Studio exercises, which involved rapid sketching in 2 minute bursts, presenting our ideas to each other, and sketching again to incorporate the best ideas until we could finalize an initial design.

As you can see with the image on the right, our initial design had too much going on, so we kept iterating until we reached a simplified version that we could test on users.

Design Inspiration

We really liked the idea of having depth being an indicator of information hierarchy. We took inspiration from Pinterest designs that showcased layers that appeared based on interactions with the interface.

05_Testing

After our work researching users needs, ideating features, organizing content, and sketching out wireframes, we still needed to conduct user testing to see how our design would fare in hands of real people.

  1. Low Fidelity Paper Prototype (small)
Testing our paper prototype

We completed 3 user tests with our paper prototype.

User Feedback:

This set of tests helped us fix minor details and interactions that we missed.

One thing we noticed, however, was that users weren’t seeing certain functions, like the “Pin to Map” button, the “See More Detail” button, etc. One tester also mentioned that she wanted important components to be kept at eye level, and that she wasn’t sure that the main “eat — see — do” menu would be easy to reach.

In order to test these functionalities at a more realistic level, we decided to create a large, life-sized paper prototype.

2. Low Fidelity Paper Prototype (to scale)

We conducted 7 user tests with our large paper prototype.

The larger prototype helped us test whether certain visual elements and interactions would be more obvious on a larger scale. We found that users were noticing and using functionalities such as the “See More” and “Pin to Map” buttons that they hadn’t used in the smaller prototype.

Another advantage to creating a larger prototype was that we could test the “hook” feature we had come up with. Were the screen prompts enough to get people intrigued?

We found that the answer was yes. We left our prototype by the kitchen as we worked, and so many people ended up approaching us saying they wanted to know more about this giant interface. When we asked whether they thought the prototype represented an interactive interface, they said yes.

Testing our large paper prototype

3. Mid Fidelity Digital Prototype

Due to time constraints, we ended up testing our large paper prototype and our mid-fidelity digital prototype simultaneously. Here are some of the improvements we made based on user tests we held:

One major change we made after testing our digital prototype was changing the main menu. The original menu we had in mind was similar to what you see below:

What we found with this style of menu was that users had no way of tracking where they were, and were confused about having to guess the full extent of menu items. We had hoped that the inclusion of a “back” arrow would solve this confusion, but it didn’t.

Next, we tried incorporating the below interaction instead, so that when users would click on one of the “eat — see — do” menu items, the subcategories would pop up and users could very clearly see the menu hierarchy.

We found that this still wasn’t intuitive enough for users, especially when their starting point ended up being a sub-menu (due to the “hook”). Users did not know that there were sub-categories within the menu items, and leaving the subcategories up at all times instead of hidden made the interface look cluttered.

The menu that we found worked best clearly showed the hierarchy of menu items, grouping them together effortlessly through reverse coloration and a clean, blue outline.

4. High Fidelity Digital Prototype

Although the scope of our project didn’t require a high-fidelity prototype, we knew that our vision for the interface would be better understood with more visual aid, so we took our prototype to high-fidelity.

Below is a video walkthrough of main user flow within our high-fidelity prototype:


05_Future Considerations

We were happy with how our design turned out, especially given the short amount of time we had. Although we stuck to our MVP, here are some recommendations we would have liked to implement if we had time to further iterate our design:

  • Use of Bluetooth to download map route to phone: Although there are other ways for a user to download their route to their phone (QR code with the use of an app, connecting to Wifi from kiosk, etc.) we found that the easiest way to do so would be for the kiosks to use Bluetooth connection to Airdrop maps directly to users phones. This method is quick, doesn’t require users to connect to the internet, and doesn’t require users to download an app.
  • More emphasis on social services: We found from interviews that users are concerned with lack of action in helping the homeless. We thought of integrating a tool that would allow the homeless to access resources they might not find without internet access. Something similar to BC211’s live shelter list. We didn’t get the chance to fully ideate how this would be implemented, but our client loved the idea.

We also thought it was important to have this kiosk be useful to everyone who comes across it, not just tourists or well-to-do locals.

  • Additional features such as transit delay information, community spotlights, taxi calling capabilities, bus schedule information, etc.
  • Further explore possibilities in the PLAY menu: Although we did incorporate social media sharing in our #beamodel interactive ad, we had so many more ideas for interactive ads that would encourage users to, beyond using the kiosk for informational purposes, have fun. That’s a whole other project though.

Thanks for reading! If you have any comments or questions, don’t hesitate to get in touch :)