Project Name
CSMS Management Platform Optimization
2023/01 - 2023/04
Role
UI/UX Designer
Team
Frontend Engineers*1, Backend Engineers*1, PM*1
Responsibilities
User Flow & Interface Design, Rebuilt design system, Created system training videos
Project Background
CSMS is a backend platform for EV charging operations, integrating site and member management while supporting charger monitoring and maintenance. This project focused on optimizing charger setup workflows and rebuilding the design system to improve product consistency and scalability.
Challenges
The platform involved complex IoT charger configuration workflows, requiring clearer operational guidance and feedback mechanisms. At the same time, the design system needed to be restructured without disrupting existing development schedules, ensuring consistency and supporting future product growth.
Results & Impact
Optimized the core charger setup experience and successfully launched key business features. Rebuilt the design system to improve cross-team collaboration and establish a scalable foundation for future product development.
Business Goals
Support global expansion and channel sales while strengthening the design system. Improve UI consistency, interaction patterns, and operational efficiency across the platform.
Design Process
When the project began, there was no defined design workflow. To improve collaboration, I introduced a structured process between design and development, creating a clearer path from requirement discovery to implementation.
Main Task
One of CSMS's primary goals is to improve the efficiency of managing charging stations and chargers. While Site Management and Member Management had already been established, the charger management experience remained incomplete. This project focused on optimizing the charger setup workflow to fill that gap.
01
Requirement Analysis
Why Optimize the Charger Setup Workflow?
The original workflow was fragmented, requiring engineers to switch between EVUI and CSMS. Manually entering device IDs and copying server URLs increased setup time and the risk of human error.
To simplify the process, all setup tasks were centralized in CSMS. The system automatically generates a unique device ID and provides connection details, creating a one-stop setup experience that reduces effort and errors.
Integrating EVUI into CSMS ：Centralizing charger setup and management in a single platform
Before
EVUI-Led Setup
Aftre
CSMS-Led Setup
Improving Usability: Identifying Workflow Gaps
EVUI required chargers to be fully configured before data could sync to CSMS, causing update delays and reducing management efficiency. The review also revealed several usability issues, which were addressed as part of the new workflow redesign.
Use filters instead of radio buttons for gun selection.
The Charger ID label is unclear.
The layout should support chargers with multiple guns.
Improve the visibility of Onboard Status.
02
Design Proposal & Framework
The PM provided an initial concept and wireframes. I refined the feature architecture, UI flow, and charger status design, while filling workflow gaps to improve usability and traceability.
Add New Features & Table Improvements
Added Add Charger for charger setup and management.
Added Charger ID and Server URL shortcuts for faster configuration.
Reordered table columns and prioritized Charger Status to improve information visibility.
Charger Status Design
Defined color indicators for each charger status and prioritized status visibility based on operational importance.
Technical Limitation!
Due to firmware constraints, detailed error information was unavailable. As a result, only Failed and Rejected statuses could be displayed.
Improving Usability
Added dedicated action buttons for Edit, Delete, and Inspect, and aligned them with design standards for consistency and usability.
The existing table lacked clear actions and interactive feedback.
03
Design Solutions
1.Redesign Table Layout
Reorganized table columns to improve scanning efficiency.
Added CRUD actions for easier management.
Prioritized charger status visibility for faster installation tracking.
Moved ID and URL shortcuts to the front for quicker access.
2.Charger Setup Workflow
Before & After
By restructuring the information architecture and improving visual hierarchy, the interface became easier to scan and manage. The updated table layout, status indicators, and action buttons help users quickly understand charger status, filter data, and perform management tasks.
Before
After
Design Validation & Feedback
Charger Setup Feedback ( Based on interviews with 5 internal stakeholders )
Positive Feedback
Clearer Status Tracking – Easier to identify setup progress.
Smoother Workflow – Quick access to ID and URL improved efficiency.
Better Visual Consistency – A more unified interface design.
Issues Identified
Newly created chargers were difficult to find in the list and required additional filtering.
The URL button appeared in every row, raising questions about whether it should be moved to a global action.
Final Decision
The highest-priority improvement was table sorting. While sorting by status helped identify issues, users were more focused on newly created chargers. The table was updated to sort by creation time, ensuring new devices appear first. Although ID and URL actions are duplicated, they are frequently used together and positioned side by side, so no changes were made.
Product Training Videos
In addition to designing the product workflow, I produced both English and Chinese training videos. These videos help customers get started quickly while also supporting new team members in understanding the platform and its management workflows.
Main Task
After taking over the project, I identified major inconsistencies in UI components, including typography, buttons, input fields, and status colors. The absence of design standards and organized files also impacted collaboration and maintenance.
Incremental Component Improvements
A full redesign was not feasible without disrupting the existing product. Instead, UI component improvements were introduced incrementally across each sprint, gradually improving consistency throughout the product.
Visual & Interface Refinement
Refined the overall visual direction by standardizing typography, colors, and interface patterns, improving consistency across the product.
Rebuilding the Design Guideline
In addition to defining styles and states for each component, I documented usage guidelines to ensure consistency across different scenarios. I also established a more comprehensive design system documentation in Notion, including component usage rules and naming conventions, providing a shared reference for both designers and developers.
Design Outcomes
Improved Usability
Optimized the EV charger setup flow and redesigned the Charger ID and URL configuration process to improve overall usability.
Improved Internal Efficiency
Introduced design guidelines and refined UI components, improving alignment between design and development teams.
Business Validation
The product has been deployed to client environments and entered the commercial implementation phase.
Faster Product Onboarding
Created product tutorial videos to help internal teams and clients understand key workflows more efficiently.
The product is continuously refined based on user feedback and internal testing. It has been deployed to client environments, but specific business data and client information cannot be disclosed due to confidentiality agreements.
Project Reflection
This was my second experience working in the IoT industry. Designing an in-house product gave me a deeper understanding of EV chargers, the OCPP protocol, and the relationship between operational workflows and device logic.
One of the biggest challenges was balancing consistency with flexibility as the product evolved. Looking back, user research could have been conducted earlier and more frequently to better support design decisions.
Collaborating with an experienced development team was one of the most valuable parts of the project. Beyond design work, I also introduced new collaboration processes to improve team efficiency.