© 2018 Designed by PIYUSH CHAUHAN

 

ChargeItSpot

Redesign of ChargeItSpot mobile application

Project Overview

Project Type:         Individual
My Role:                 Product Designer
Project Duration:   4 Months
Platform:      Mobile Application
Tools:            Sketch, Invision, Ilustrator
Project for:   ChargeItSpot

Problem

On October 2015, when the ChargeItSpot mobile app was introduced to the world to direct the user to nearby charging Kiosk by ChargeItSpot., users have privately and publicly expressed negative opinions about the ChargeItSpot mobile app. These views suggest that it’s hard to find the nearest charging Kiosk when the battery is low and leaving users in a problem state when there is no nearby charging Kiosk. It is not completely solving a user problem when user’s battery gets low. So it imposes a poor experience on customers. This can be the main reason why the users are uninstalling the ChargeItSpot mobile application. Over the years, several versions have been made to have a better finding for the nearby kiosk but new features have not been added to make it a complete battery saving application.

Goal

 

  • Conduct a User Research to identify the pain points faced by the potential app users.

  • Analyze the data collected from the user research and ideate possible design solution to the problems discovered.

  • Designing work flow, wireframes and mockups to articulate the design solution.

  • Create a working prototype to illustrate and validate the designs with users.

  • Conduct a Usability testing to gather feedback from the user and make further improvements.

Current app overview

  • Arrow key seems like a button which I can tap to go to the next screen.

 

  • Although circles at the bottom helps direct user to next screen.

 

  • Copy and Circles are too close to each other.

 

  • When the user taps on any station, it doesn't move the screen to the center.

 

  • We can make position and shape of the Locate me icon consistent with Google map.

Splash Screen
  • Huge amount of space dedicated for a link to Insta photos.

 

  • Header blackout whenever user opens an application for the first time.

 

  • Bottom banner looks like an ad.

 

  • Instead of miles, we can show distance in ft or time + distance.

Station Screen
Station Selected Screen
Stations list screen

Competitive Analysis

​​​Brightbox Application

  • Homescreen lands to map

 

  • No separate filter for list

 

  • Clear info on how to use

 

  • Search icon for Search

  • Only focus on nearby charging locations

  • No direction for Maps

  • Show miles for distance

​​​Ankerbox Application

 

  • Clear icon for “locate me”

 

  • Icon for showing nearby location in a list

 

  • Hamburger menu has lot of options

 

  • It has more security with User Account

 

  • User has to turn on the Bluetooth to use this application

 

  • Bottom image looks like an Ad

Other similar apps to lookout for

Car Station
Next Charge
Indego
Realtor

User Research

 

  • The goal of user research was to empathize with the users, their goals, expectations and frustations. In order to accomplish this, we gathered relevant data by conducting interviews of 15 users.

  • Among the 15 participants we interviewed, there were 7 females and 8 males.

  • 5 of the total number participants had used the ChargeItSpot charging station before while the rest 10 participants had never used the station or mobile application.

Short clip of User Interviews

User Personas

Brainstorming

Features on scale 1-5

Participants rated the below features on the scale of 1-5 on being asked in the interview.

Initial Workflow

Wireframes

Final Design

Find a charging station

Users can open the app and can choose the type of option they are looking for.

If the users are looking specifically for phone charging kiosks, the first option will redirect the users to the map screen.

If the users are just looking to save their battery, the second option will direct the users to the battery tips screen.

Informative map screen

The amount of Markers filled tells the user how

many lockers are unoccupied and available for

them to use. The more the better.

 

Once the user taps on any of the markers, a pop up will tell the user how many lockers are available and with that user can connect the visual marker with the number of lockers availability.

 

It helps the user to see on the first go that how many lockers are available(free to use).

 

List icon at the top right shows the nearby charging station to the current location of the user.

Meaningful list screen

The app shows walking icon directions to the user on the station detail screen if the nearby charging station is less than a mile.

 

Similarly, if it is greater than a mile it will show users driving direction and time accordingly.

 

This condition has been mentioned in the product requirement and has been verified too.

 

Arrows on the list screen represent the compass which quickly tells the users about the charging station direction. It's a subtle animation as the user moves, it will move according to the location. It avoids one interaction of moving to the next screen.

Customized alerts

User can personalize the low power mode according to their need. In iPhone, the user gets a by default notification on 10% & 20% but you cannot set the battery percentage.

 

Chargeitspot application's main feature gets an improved experience where the user gets a notification if there's phone battery is low and any station is nearby.

 

Now user can also turn off the repeating notifications and can also set the distance.

Play with Prototype

Design iterations after user testing

confused map screen

issue: Users weren’t sure what the transparent, semi transparent, and full markers meant?

sol: Numbers are showing to each marker which represents how many lockers are available.

issueAlso, if you see the menu, memory option has been removed from the navigation due to some change in the business requirements. It can come in the phase 2 as it is not aligning with the business requirement

previous map screen
new map screen

new pop-up windows

The green color in the background tells the user that's it's open.

The red color is for the closed station.

when station is open
when station is closed

list screen found clumsy

issueUsers struggled with our list screen because they got confused with the arrow icon which represent compass. 

issueUsers mentioned that there is too much of information and colors on one screen.

solAnimated compass removed to get more space. Also, station hours shifted towards the right so that the user don't get confused with the number of lockers.

sol: Unnecessary colors are removed and made it more cleaner. Now user can see lockers availability and station is open or closed easily.

previous list screen
new list screen

This is an ongoing project.

For more information on this project, contact me!

Thanks for looking! Interested in more?