Project 2
Charging Station Detail Page Redesign
Time length: 2 Days
This is a design challenge I finished in Oct 2020. Since the projects I worked on in Ford are under NDA. To better demonstrate my design strategy, I put this case study here as an example.
Introduction
In this 2-day project, my goal is to design based on the existing charging station detail page. I started by analyzing the design challenge:
The user searches charging stations in the app, and then the user lands on this page. After reading the details, the user will decide whether or not to head to the station to charge.
Our Story
Every website has a story, and your visitors want to hear yours. This space is a great opportunity to give a full background on who you are, what your team does, and what your site has to offer. Double click on the text box to start editing your content and make sure to add all the relevant details you want site visitors to know.
If you’re a business, talk about how you started and share your professional journey. Explain your core values, your commitment to customers, and how you stand out from the crowd. Add a photo, gallery, or video for even more engagement.
Meet The Team
Our Clients
Research
Who will use this app?
I found that the buyers of electrical vehicles in China are mainly male, aged 26~40 years old. Most of them are interested in new technologies. They are tempted by the low energy cost and still bothered by the anxiety of not being able to charge their car fully on time.
What are the existing solutions and why are those working, or not working?
There are three top public charging stations in China: StarCharge, TELD, and eCharging, which is owned by State Grid Electric Vehicle Service Company. In this step, I analyzed their design to assist the following design and started to build up the user behavior model.
StarCharge
Easy to search
- Filter functions help users target the charging station
- Connect the charging station by QR code scanner
- Quick share with the share button, and no need to screen shoot
TELD
Easy to locate
- The app show pictures of the venue to help with navigation.
- Users can save the charging station and review it afterward.
- Users can reserve Charging Stations on their account page.
- Users are encouraged to report damage by simply scanning the QR code on the Charge Pile.
eCharging
Clear design
- The interface use graphic to show the available space to help users understand.
- Multiple map view modes to choose from, enable a clearer view.
- The app gives hints to users by showing "this station has been used in 3 hours". This is a clever way to show the in-time usability of the station.
Takeaway from competitive products research
StarCharging has more than 32,000 charging stations in 34 cities in China, with more than 50,000 daily active users. The number is astonishing and we can see that the apps have been working hard to fill in as much information as possible. Though those charging stations have shown great popularity among users, the interfaces are too complicated and filled with jargon. To better understand what the users need, I conducted research on the user journey starting with interviewing users.
User Journey
After talking with 5 users about their charging habits, I summarized the journey as below. In each phase, the users interact with different touchpoints, and questions are generated to be solved. In the end, I pointed out the opportunities in each phase as potential design directions.
Some Interview Screenshot
Charging Time Planner
Electric vehicle charging time planner redesign
Time length: 3 Weeks
My role: UX/UI intern working with a senior UI designer, a product manager, a marketing head, and 3 developers.
Introduction
Charging has been a significant part of the user experience for electric car owners. Car owners are facing low battery anxiety on the road. The endurance on a single charge, charging speed, and accessibility to the charging station has been determining elements when customers make a purchase decision. Also, in China, electricity usage is charged under the rule of Peak-valley prices in most cities. Car owners will be able to save lots more money if charging during the valley hours. So, we started the project to design the charging plan interface to enhance the charging experience.
When I joined the team, the first wireframes were finished. I started to redesign the process starting with user testing and competitive analysis. In the end, I finished the first iteration of the high-fidelity charging interfaces.
User Testing & Takeaway
We tested 11 internal users by asking them to finish the charge time plan on two interfaces. After the interview, we got the following results:
-
Users all successfully finished the task.
-
Users were all confused about the location selection process.
-
Low usability on current forms (UX Writing, button forms).
-
Users had a hard time understanding the whole planning process.
The current charging system has been confusing to users because of redundant steps (ex. location setting).
Design Directions & Features
Clarity and Suitability
The current design doesn't show the station's situation, which risks finding unavailable charging stations (stations in residential areas, stations under maintenance or occupied, etc. )
- Simplify the interface and highlight the critical information
- Reservation system
- Usage frequency
Convenience of charging
Match user with the most suitable charging station as fast as possible
- “Save” function
- Personalization: Connect the app with the HMI of the vehicle to provide personalized information and help with decision-making
Analysis
Promote interactivity with users
- Rating system: Encourage users to rate the station with stars
- UIer Activity center: Oncrease the satisfaction of the service
Prototypes
Prototype 1
The current design (on the right) doesn't show the station's situation, which risks finding unavailable charging stations (stations in residential areas, stations under maintenance or occupied, etc. )
- Simplify the interface and highlight the critical information
- Reservation system
- Usage frequency
Iteration
In the following steps, I conducted more research to draft a clear charging planner user mental model. Here is one competitive product research example from Tesla.
Through the research and interview, we compared the current model and user mental model about charging were able to spot the problem in conveying the information. The problem now became how to fit the current model into users' mental models to make the experience smooth. In the next step, I created the clickable demo to demonstrate the process and propose the new components to the design system, to enable clear distance demonstration.
In the end, the design passed the group review and the app is launched in 2021. There’s more to this story. Schedule me for an interview and I’ll tell you more about this project!
Takeaway
Developing products for vehicles are definitely different from digital services. UX design is like dancing in shackles. Especially for physical product-related interfaces with long branding history, we need to consider the limitation of technical feasibility and design system. However, it doesn't mean the process of spotting problems and solving problems should compromise. UX designers' job is to find the middle ground and generate the best solution for the moment.
Except for the charging reservation page, I also designed the user experience for the Charging Log & Report, Wallbox Installation Tracking system, please talk to me for the details.
