Overview
The Toyota EV app is designed to optimize the Toyota Electric Vehicle experience. It includes essential features that utilizes high-tech functions to personalize your car through a simple tap on the screen.
This is a design-based UI project made for Toyota's 2022 WeHack Prompt.
Background
Problem
Toyota wants to expand their market in Electrical Vehicles. They need an EV app that can market, incentivize, and improve their new line of high-tech automobiles.
Goal
Create a Toyota EV app with features that have never been seen before and a design that is attractive yet stays true to the Toyota brand.
Software
Figma, Procreate
Timeline
24-hours at WeHack 2022
Role
I was a team member who led in brainstorming, low-fidelity prototyping, and creating high-fidelity prototypes on Figma.
Understanding Our User
Before we can begin the design process, we made a lightweight user persona by asking Toyota mentors at WeHack for their typical user demographic. By understanding how familiar our user is with technology, their goals, ambitions, and obstacles, we can design a more user-friendly interface.
.png)
Low-fidelity Prototype
Based on our brief research, we began to brainstorm features that are convenient and efficient for users.
Using Procreate, I drew a rough layout of key features and screens the app would have. My team and I took into consideration of things that may have never been used seen in the industry, such as:
A map that shows nearby charging stations and dealerships.
The option to lock/unlock and turn on/off lights in the car through the app.
An interactive tire pressure diagram that displays how much air is needed in your tire.
A display that indicates when the vehicle needs to be charged, so the user knows how soon to reach a charging station.
Design Decisions
We based the overall color palette from Toyota's original brand--with the addition of using Serif fonts for better user readability. The font and color choice makes the app appear modern, sleek, and clean.
We chose blue as a secondary color because it complements the red and it is a color often associated with calmness and sophistication.
Wireframes
We flesh out the low-fidelity prototype from Procreate onto Figma. Some changes we had to make along the way included adjusting button placements, adding security measures for users, and adding other key features.
Key Features
Menu
Ability to check EV battery percentage and time until charging is needed.
Icons that allow you to lock/unlock and turn on/off lights when you're away from the car.
Thumbnail of GPS
Weather display
Toyota news display
Find A Dealer Near You
Input address in "Enter Your Address"
Choose from a selection of Toyota dealers near your address.
Have the option to call or set up an appointment with selected dealer.
Tire Pressure
Check which tire needs air in a 3D interactive model.
Option to schedule any other maintenance needed on vehicle.
Interactive Map
Users are able to click between different views of the map in order to show charging stations and dealerships.
Green was shown for charging station icons because the color is often associated with "life", hence the EV is gaining "life" through charging.
Yellow was shown for dealership icons instead of red so that it doesn't distract the user's eyes. Too much red on a screen leads to confusion, which is why only the user's vehicle is colored red. In addition, yellow, complements the yellow road lines and green icons.
.png)
%201.png)
Takeaways
Results
Overall, this app will allow users to reach the information they need for their vehicle quite efficiently. The design stays true to the Toyota brand and every feature serves a useful purpose for EV.
We placed fifth in the Toyota prompt division, and second in the WeHack "Innovations of the Future" division.
Future Scope
If we had more than 24 hours to expand on this project, I believe there could be a lot more research done on EV itself and the users. More features could be introduced, such as machine learning and AI integrated between the vehicle system and app.
What I Learned
By working with a team of more experienced designers, I learned how to design a coherent, working prototype. I also learned how to utilize my time wisely by omitting designs that may not serve a useful purpose within a constrained time frame.