An electric vehicle charging app that emphasizes the user's electric vehicle status and its compatibility with nearby charging stations.
1. Project Overview
This case study was prepared for Forage's BP Design and UX Job Simulation Certificate. Design Challenge Prompt: Design an app for an EV charging station finder, sponsored by BP (British Petroleum).
Duration: December 2, 2023 - December 7, 2024.
Role: Visual Designer, UI Designer, UX Designer, Researcher.
Tools: Figma, Fig Jam, Adobe Photoshop.
Client: BP (British Petroleum)
2. User Needs
Through research, I was able to find key elements that the design would need to follow, including what the design must have, should have, could have, and won't have.
3. User Persona
Using the research I gathered, a user persona was created to help me better empathize with users, as well as narrow the focus on the main pain-points I should address.
4. User flow
User flow created to help plan necessary pages in the app design.
5. Low fidelity Prototype
6. Visual Design Considerations
It was decided that the design of the app should communicate a surge of energy. Combining BP's established sunflower and Helios imagery with electricity informed my decisions for visual considerations throughout the creation of the final High-Fidelity design.
7. Welcome Screen
The goal was to provide a different introduction to the user with each opening of the application. These images and messages will grant a different visual experience with each entry, allowing the application to communicate images of charging, travel, and the acquisition of energy.
The color palette includes a swatch of electric yellow sunlight transforming into a deep electric blue. This highlights the prompt's goal in moving towards the electric future, while keeping BP's sunflower motif in the users. A glowing BP Logo emphasizes this, and technological patterns sprinkled throughout the design reinforce BP's entrance into the electric vehicle age.
8. Sign in and Sign up
The sign in page was made to established UI / UX design standards in order to create the least amount of confusion for users. The sign in page would include silhouettes and design elements of electric power generation, to reinforce the aesthetic and feeling of an electric charge.
9. Finding Charging Stations
It was important that users were always able to approach finding a station in many different ways. As a result, buttons to immediately find nearby stations. Users should also always be able to find their nearest stations, favorite stations, recent stations, and very importantly, available and compatible stations. Available stations are labeled with a green tag that says "available", and unavailable stations are labeled with a grey tag.
10. Vehicle Charge Process
Considerations were made in designing the vehicle charge process. The ultimate idea took inspiration from Chargepoint's current design, and Yue.Dai's concepts for an EV charging application. The goal of this phase in the application was to have
11. FIGMA Prototype
Below is the high fidelity Figma prototype I created for the project. Click on the expand icon on the top right of the window for the best viewing experience.
