BP App
Forage
I designed an app UI for BP that allows users the ability to locate nearby charging stations.
Overview
Enrolled in a program offered by Forage, I crafted a BP app UI for locating nearby electric vehicle charging stations. The interface showcases a map of charging points, enabling users to find the closest stations effortlessly. Featuring filters for charging types, users can navigate efficiently based on their needs. This design prioritizes convenience, promoting eco-friendly travel for BP users.
Goals
- Create a user persona based on the EV market.
- Design a user interface to help the user find the closest EV charging station.
- Creating a UI that is easy to navigate and interact with, reducing complexity and cognitive load for the persona.
Persona - Carrie Beed
First iteration
The persona I established is Carrie Bead. Before I did research, I made the persona based on assumptions about the market.
To summarize, this Carrie is someone who is constantly on the road and wishes to invest in EV. Unfortunately, her neighborhood does not support charging stations, making that endeavor difficult to actualize. She needs an app that lets her locate the closest charging station in her area.
Final iteration
The final version of my persona Carrie shares a similar bio and core needs, but her goals and behavior is also highlighted, as seen in the graphic. It explains her motivations for wanting to invest in electric vehicles and an app with such features.
I made the persona by finding commonalities observed from a multitude of EV market articles, gathering both pain points and common reasons for investing in EVs. Blastpoint.com was a good help when it came to understanding the market. It covers people who don't have the garages to charge EV, low battery life, and a plethora of other user concerns.
I made the persona by finding commonalities observed from a multitude of EV market articles, gathering both pain points and common reasons for investing in EVs. Blastpoint.com was a good help when it came to understanding the market. It covers people who don't have the garages to charge EV, low battery life, and a plethora of other user concerns.
Needs
- A consistent source of energy to stay on the road.
- An app with GPS tracking to help Carrie plan her charging sessions.
- Filter charging stations based on her car's specifications.
Pain Points
- EV stations could malfunction at any given moment. An app with GPS tracking allows her to find alternative stations.
- EV Charging is not supported in her neighborhood.
- It could take 15 minutes to several hours to fully charge her vehicle.
Wireframe
After I created my persona, I began creating a wireframe based on Carrie B's needs.
Here is how I catered to them:
Here is how I catered to them:
- Home page includes nearby charging stations, making stations accessible and easy to find.
- Map feature to precisely scout out nearby charging locations.
- Information on individual charging stations, including photos and user reviews.
- Station filtering options
Carrie Beed is always on the road, so my thought process for the wireframe was to include as many ways to locate charging stations as possible. A rule I adhered to is that the more ways to reach a certain screen or feature, the more accessible said feature is. Offering multiple pathways to access that information ensures that users can find what they need quickly and easily, no matter their preferences or circumstances. This makes room for efficient planning on the go!
Final Prototype
The user can view all of the final realized features in this prototype and charge their chosen vehicle.
Initially, when designing the Start Charge button in the Station Info tab, I imagined that a charge would immediately be sent to the user’s account as soon as the button is tapped, but the problem with that design is that the app wouldn’t know which port the customer is using, assuming that there are more than two charging ports in a given station.
After brainstorming, I decided on a button that instead opens the camera roll, prompting the user to scan a QR code that would be found on the machine. Once the QR code is scanned, the app would recognize the corresponding port and then begin charging when prompted by the user.
After brainstorming, I decided on a button that instead opens the camera roll, prompting the user to scan a QR code that would be found on the machine. Once the QR code is scanned, the app would recognize the corresponding port and then begin charging when prompted by the user.
Conclusion
I crafted user personas, designed wireframes, and created prototypes for an electric vehicle industry app, prioritizing Carrie's need to quickly find stations on the go. By incorporating multiple pathways to reach the map menu, I focused on accessibility to enhance navigation and engagement. This project reflects my commitment to delivering the best experiences for the user. Carrie Beed will never worry about keeping her vehicle charged ever again!
For a deeper look at my design decisions click the button below!
For a deeper look at my design decisions click the button below!