UX Design -
June . 2024
Ensuring a seamless and consistent brand experience across both the digital interfaces and the physical charging stations while meeting user expectations for speed, clarity, and simplicity.
Provides a strategic opportunity to revolutionize the EV charging experience by unifying digital and physical touchpoints under a cohesive, user-centric design that strengthens brand identity and increases user satisfaction.
Jun. 2024 - Now
User Experience Design
User Interface Design
UX Research
Sketching
Prototyping
3D Modeling
SwiftUI
Figma
Keynote
From June 2024 to the present, I have worked as a freelance UX designer with XYDF on an end-to-end project focused on enhancing the B2C experience for their electric vehicle charging solutions. My primary responsibilities involved creating an intuitive user journey—both in the WeChat Mini Program and the dedicated application interface—and ensuring that every interaction aligned with XYDF’s brand identity. Additionally, I contributed to the industrial design of the “Huangshan” and “Great Wall” series charging stations, bridging the gap between digital and physical touchpoints.
Research
Synthesis
Ideation
Final Designs
Reflection
Identifying Problems
Market analysis
Competitive product analysis
User Surveys
Business pain points
Product opportunities
Developing a Solution
Interaction flow
Style and component definitions
High Fidelity
Customization
Next Steps
Conclusion
As the electric vehicle market rapidly expands, the demand for efficient charging solutions grows exponentially. Since June 2024, I have been collaborating with XYDF as a freelance UX designer to enhance their B2C charging experience across both a WeChat Mini Program and a dedicated application. I also contributed to the industrial design of the “Huangshan” and “Great Wall” charging stations, ensuring a seamless connection between digital and physical touchpoints. Through market research and user interviews, we identified issues such as weak brand identity, convoluted user flows, and limited contextual experiences—underscoring the need for a unified, streamlined EV charging solution.
At present, the automobile charging market shows a rapid growth trend. The popularity of charging piles comes from the rapid growth of the domestic new energy vehicle market and the backward number of charging piles and construction speed.
According to market research data, electric vehicle users' demands for charging are mainly concentrated on charging speed, charging safety, charging convenience, etc. At the same time, the government has also given strong support to the promotion of new energy vehicles, providing policy guarantees for the development of the car charging market. Therefore, the car charging platform has a broad market prospect.
B-side customers
public parking lots, vehicle operating companies, government departments, etc.
Features
high frequency, rigid demand, large scale. Mixed use of mini programs & charging pile screens. Some companies have customized needs.
C-end customers
Ordinary electric car owners, Public parking lot entry, online car-hailing drivers, etc.
Features
Generally for personal home use, one person per pile, car owners build charging piles in their own parking spaces, mainly based on mini programs.
During the research, we conducted an in-depth study and analysis of the major car charging platforms on the market. These platforms have their own characteristics in terms of functional design, and some of the highlights are worth learning from and thinking about. Currently, the charging service operators on the market include [charging operators], [car company charging operators] and [third-party charging service providers]:
Directly serving the user end charging service, while also responsible for the investment, construction, operation and maintenance of the charging pile business, is a relatively mature business model in the market. We searched for the keyword "car charging" in the app store and selected the following competing products for specific functional analysis based on download volume and relevance:
· Charging big data analysis
· Electricity price forecast & discount recommendation
· Timed reservation, operation position guidance
· Plug and play guidance
· Targeted value-added service delivery
· Customer service feedback diversion
· Car-machine interconnection synchronization
· Nearby station recommendations
· Platform/user reward Q&
· ACharging map user co-construction
Build charging piles by yourself or cooperate with third parties; integrate the service point information of charging operators to provide users with more convenient charging services.
· Recommended stations for the same model
· Recent usage by car owners
· Booking ground locks & preferred pile groups
· Brand ecosystem building
· Common customer service questions and answers
· Time slot reservation
· Car-machine interconnection synchronization
· Nearby station recommendations
· Platform/user reward Q&
· ACharging map user co-construction
Relying on its strong industrial resource integration capabilities, it connects the charging piles of different charging operators to the third-party charging network and provides them to C-end users.
· Charging map user co-construction
· Information bounty Q&
· ACharging data ranking
· Third-party operation activities
· Route intelligent planning
· One-click payment & sharing & collection
· Customer service feedback diversion & FAQ
· Electricity price forecast&Time slot reservation
· Community content diversion
In order to better understand user needs, we conducted a data survey on electric vehicle users and gained insights into the obvious pain points of different users when using charging apps/applets:
The user charging experience satisfaction survey data shows that users have made the following suggestions:
1. Clear Fees: Users want the charging platform to clearly show any parking charges to avoid unexpected costs.
2. Timely Maintenance: Some users report aging chargers; they suggest timely repairs or replacements to ensure normal operation.
3. Transparent Charger Status: Users desire a real-time display of charger conditions to help them choose reliable equipment.
4. Parking Spot Occupation: In some areas, non-EV vehicles occupy charging spots, reducing availability. Users recommend measures to address this issue and improve charging efficiency.
Through early competitive product analysis and user research, we found the following problems:
.png){kind=small}
· Parking spaces are seriously occupied
· Fault problems cannot be solved in time
· Charging pile information does not match the vehicle model
· Actual charging speed is slow
· Parking spaces have vehicle size restrictions
· The fee standards are unclear and opaque.
· Additional parking fees cannot be predicted in advance.
· The fee details are inaccurate.
· Poor platform interoperability
· Inaccurate and incomplete information
· Troublesome multi-platform jumps
After conducting an in-depth product analysis of the car charging platform, we discovered some core pain points and design opportunities that can be transformed into optimization of the charging platform’s functional design and user experience.
Based on our research insights and the target users of the XYDF series of charging pile products (including B-end large customers and C-end individual users), and combined with XYDF's brand characteristics, we developed the following design strategy for this project:
· The overall design strategy weakens the corporate brand characteristics (positioning as a charging pile supplier)
· Can be customized according to the needs of different customers
· The platform uses mini programs instead of APP
· Multi-device use (mobile phones and other handheld products/charging piles)
Key functions like "My Orders," "Coupons," and "Invoices" are placed on the homepage for quick access, reducing user effort.
Important details—availability, charging speed, and pricing—are prioritized based on user needs, ensuring easy navigation.
Users can filter stations by price, distance, and availability, making it easier to find suitable options efficiently.
Spatial Awareness：Provides a clear geographical distribution of stations, not just a linear list.
Route Optimization：Helps users plan efficient routes and integrate with navigation.
Different User Scenarios：Users without a fixed destination can explore nearby options more easily.
Prioritizing Essential InformationDisplay the number of available chargers upfront to enable quick decision-making.Show real-time charging costs prominently to help users compare and plan accordingly.
Hierarchical InformationStructurePrimary Information (Immediate Decision-Making)Available chargers,
Real-time pricing, Charger type & power outputSecondary Information (Additional Considerations)Parking fees，Nearby amenities (restaurants, rest areas, shopping)
Enhancing Usability with Clear UI ElementsColor-coded availability indicators (e.g., green for Fast charging，blue for Slow charging).
Real-Time MonitoringDisplay charging status (kWh), elapsed time, and real-time cost for full transparency.Integrated Fault Reporting.Clear Visual FeedbackProgress bar & charging indicators for easy tracking.Notifications for milestones (e.g., 80% charge, estimated completion).
Can directly view real-time orders/historical orders, which is convenient for invoicing and viewing historical consumption.
A "Report Issue" button for quick problem submission.Predefined issue categories (e.g., charging failure, slow speed).Option to upload photos and descriptions for better troubleshooting.
The direct scan button at the bottom facilitates user operation, reduces user burden, and allows quick start of charging.
Due to XYDF's market positioning and business needs, we customized the mini program. XYDF's customers can use QR code/GPS to customize the mini program according to their needs. Different color styles can be displayed at different customer locations.
My key takeaways
First, we need to clarify the product positioning and business needs.
It is always important to know who your target audience is.
The user's pain points are not necessarily what the product we design needs to solve.
Next steps
Conduct a second round of user interviews and surveys
Test and improve experience features
Designing througha different lens.