Role
UX/UI Designer
Duration
5 Months
Team
1 Product Manager
3 developers
Time
2021
Context
Electric vehicle (including E-Bike) fires are a growing safety issue in China, with 2,000 incidents annually—mostly during charging. Over 90% of fatal cases occur in high-rise hallways, prompting 2021 regulations that banned indoor charging. However, many communities still lack outdoor stations that meet fire safety standards.
To address this gap, our company developed a dedicated E-Bike charging network specifically for high-rise residents, with all stations fully compliant with government fire safety regulations.
Goals
Discover
Access
Pay
Problems
1
No available charging slots during peak times.
2
No clear charging progress indicator, making it hard to estimate when charging will finish.
3
Equipment malfunctions that prevent charging leading to user’s frustration and dissatisfaction.
4
Paying with bank cards involves a complicated process and carries certain risks.
Solution
Map shows nearby stations and real-time availability
With our map feature, people can easily find where they are and the location/distribution of the charging station, allowing them to make well-informed decisions.
Charging progress and timer help users estimate remaining time with ease
With our special designed charing progress page, it’s easy to find how much your vehicle has been charged and how long it need to be fully charged.
24/7 Customer support available throughout charging and ordering
Users can easily access customer service during key steps of the charging process and on the order page—making it simple to get help whenever equipment malfunctions occur.
Flexible payment options via WeChat or in-app wallet
Users can choose to pay through WeChat or a built-in wallet that supports top-ups from their bank account—offering convenient and flexible ways to complete transactions.
Final Design
Research
I began by conducting comprehensive competitive research, exploring existing charging applications and similar services. I analyzed user feedback and comments on social media platforms, which provided valuable insights into users' pain points and expectations for such applications. This preliminary investigation helped me develop an initial conceptual framework for the product design.
Figure 1.0 - competitive research
User Interview
To gain a deeper understanding of the problem details, I conducted user interviews with four current charging station application users about their charging experiences. Here’s what I find:
Priority
Based on user research and the current state of our charging stations, we've identified the following as our top priorities:
Provide safe and accessible charging option for our user
Offer responsive and easily accessible customer support in the app.
Display real-time charging progress to keep users informed and in control.
Help users locate nearby charging stations with available slots to reduce wait times and improve efficiency.
User Flow
Objective: Efficiently Find and Use a Charging Station
To start, I developed a simplified user task flow outlining the basic steps for charging. Then I created user flow for the charging process.
Figure 2.0 - main task flow
Figure 2.2 - User Flow
Wireframe
User Testing
Based on the wireframe, I created a simple prototype and asked 3 potential users to test it. After several rounds of interation, I finally came up with a workable prototype.
1
This screen is the charging selection screen, displayed immediately after the user scans the QR code. It allows the user to choose the charging port and type for their session.
Before
After
The app was updated to address issues with unclear or missing charging port information by adding a "Scan" button for quick identification and displaying the station's address to confirm location accuracy..
2
This is the "Charging In Progress" screen, displayed once charging begins. It notifies the user that charging has started, and users can click "View Order" to access detailed order information.
Before
After
The updates enhance user experience by adding a progress indicator and charging animation to clearly display charging progress, integrating customer support for prompt issue resolution, and introducing an "End Charging" button for greater control and flexibility over the charging session.
3
This is the Charging Order page, where users can view a comprehensive list of all orders. By clicking on an order, users can access detailed information about that specific order.
Before
After
Charging orders are now reclassified for easier identification of issues, with a built-in refund request feature on the same page, streamlining the resolution process without redirecting to customer support.
Visual Design
Safe
Care
Minimalistic
Color
In this project, I have adopted a high-saturation green as the primary color to highlight the environmental friendliness and energy efficiency of charging. For secondary colors, I have chosen deep blue and light gray to establish a sense of stability and reliability. Red is used as accent colors for coupons, alarm, and key information.
Font
苹
Regular / Semibold / Bold
PingFang SC
12pt / 14pt / 16pt / 18pt / 20pt
Final Design
Map
Find nearby charging stations and check their availability.
Charging
Scan QR code on the charging station to get started and select your preferred charging method. Experience fast and smooth charging and payment processes. All done in 3 steps.
Order
Access your order history to view complete details about your charging order.
Customer Service and Refund
Report any issue with your order quickly and easily. Simply go to your order page, submit a report, and get the help you need.
Impact
Learnings
1
Make Key Features Easily Accessible
In a mobile application, screen space is limited, so essential functions must be highly visible and intuitive. Users should be able to navigate and complete key actions effortlessly, without unnecessary cognitive load. Clear onboarding and guidance are crucial to ensuring a seamless experience.
2
Provide a Clear Feedback Channel for Issues
Whether before, during, or after a charging session, users must have an easy way to report issues. This not only helps resolve their problems efficiently but also builds trust. Additionally, it allows us to address issues promptly, preventing them from affecting more users.
3
Early Involvement is Crucial
Engaging in the project as early as possible provides better insight into decision-making processes and constraints. This ensures that design considerations align with project limitations, leading to more effective and well-informed solutions.