Noodoe & Siemens
Challenge & Solution
Noodoe* faced potential financial losses and partner attrition due to an outdated, error-prone website. To secure funding, the company pivoted from EV chargers to a white-label SaaS model, allowing partners like Siemens and ABM to resell its products to increase market share. Also, during this shift, they introduced AI-driven pricing predictions, enhancing customer value and strengthening partnerships.
My Role
Design Lead: As the sole end-to-end product designer lead, I collaborated closely with cross-functional, multinational teams to successfully develop this complex feature from the ground up. Within 8 months, this effort secured significant next-round funding from enterprise clients.
Impact
Secured multi-million USD in next-round funding from enterprise clients (NPS 75%).
Reduced maintenance cost ~50%
Won the Amazon Web Services Global AI Case Study
Clients
ABM, Audi, Siemens, Volvo, and more
Team
1 Product Designer, 1 Visual Designer, 1 PM, 1 UXW, 5 SWEs, 1 QA, 2 Customer Supports, and 2 Sales
Timeline & Status
4 months
Launched in April 2024
*Remark: Noodoe boasts Taiwan's densest electric vehicle charging network and is available in 15 countries.
Urgent Shift from Internal Tool to Enterprise SaaS
Before
Internal Usage Tool
Goal
Enterprise SaaS Product
We were so panicked like an ant wandering in a hot pot.
Noodoe, a 5-year startup facing financial challenges, aimed to secure major funding by delivering high-quality features on time. Shifting its strategy from selling EV charger hardware, Noodoe focused on creating a comprehensive B2B2C software solution. By investing in a white-label SaaS model, Charge Point Operators (CPOs) like Siemens and ABM could resell Noodoe products, allowing Noodoe to earn revenue shares. Also, clients are gaining greater autonomy in managing their electric vehicle sites and expanding their businesses.
The poor user experience of the SaaS platform led to customer loss and increased maintenance costs.
The previous version of the website was originally built by engineers for internal staff to assist Noodoe's customers with their configurations. However, it was difficult to use, leading to frequent data setup errors, which caused financial losses and reduced customer satisfaction. More concerning, some partners chose to develop their own systems or even ended their contracts with us.
Below are the previous designs:
Success Metrics
Customer Satisfaction: Ensuring our current customers are happy with the final delivery is crucial for them to renew their subscriptions.
Operational Efficiency: Streamline the process for users to quickly create and manage EV sites and chargers.
Customization Ease: Minimize the resources and time needed for Noodoe to customize the product with the clients' brand colors.
My design goals: streamline SaaS architecture, drive reselling features, and lead AI integration for financial solutions to boost Noodoe’s edge.
After confirming the business vision for the project, I guided the owner through the entire end-to-end design process. I was fully responsible for designing the website for the new Site and Station software, and I also collaborated with my team to plan and propose the long-term information architecture.
Process
I thrived in the dynamic workflow, a process that involves actively seeking resources for user studies, fostering cross-functional collaboration, and managing extensive stakeholder relationships.
As a senior product designer at a startup, I had to align expectations across teams and rapidly meet seasonal goals to keep the company survive. I took on a dual role, splitting my time between defining feature scope, addressing client requests, and ensuring pixel-perfect design handovers.
Key Step ① Exploratory User Research:
Worked closely with experienced technicians and EV professionals to fully understand all key functions of the older internal panels, and reorganized these functions using card sorting.
We carried out an expert review and content audit to identify key features of the current platform for integration into the upcoming upgraded SaaS EVOS. Based on insights from the expert review and competitor research, we then curated content for a card sorting session. Next, we recruited 30 users, including clients and our operators, to participate in moderated card sorting sessions. We analyzed both the quantitative and qualitative data, resulting in the creation of 11 distinct categories for the information architecture of the EV OS.
After a series of discussions with stakeholders based on the card sorting report, we delivered a 3-year information architecture guideline (Animated image below), covering over 50 functions, on time and meeting the product team's quality standards. Additionally, I guided the product team in drafting a list of essential functions for the new Site and Station Management software. We decided to group these into two major categories:
Site Directory (Site Management): site creation, site movement, site tax, site tree structure, site pricing & payment settings, access code, discount code, EV OS revenue fee, and Stripe onboarding.
Station Management: Station movement, station pre-commissioning, station API configuration, and station provisioning to EV OS.
Key Step ② Market Research:
Analyze competitors' common patterns and adopt a forward-thinking approach to differentiate yourself more effectively in the market.
To make the team understand more about the market trend and find opportunities to be more competitive, I analyzed a great amount of competitors to guide the team. Here are are the findings I got:
The common patterns for EV charger and site management.
Identify the best practices in the markets.
The opportunities for increasing our product competence in the ToB market.
Then, I identified three key findings from this competitor analysis:
Common Patterns (Key features to implement): Site Table, Filter/Search, Detail Settings, Activity, and Site Map.
Pro Features (Valuable additions to enhance market competitiveness): Firmware, Remote Control, OCPP Log, Station Map, etc.
Differentiation Opportunities (Strong points to stand out from competitors): Site nesting structure, and the ability to bulk edit inherited data.
Key Step ③ Evaluative User Research:
Built rapid prototyping, workshops, and wireframe in the early stages to guide clients' users, engineers, and PMs to provide solid feedback and measure feasibility.
I've often noticed that creativity-driven product managers sometimes struggle to articulate product requirement details clearly. After aligning on the product vision, I tended to quickly draft wireframes and prototypes in grayscale to discuss with them. Interestingly, once they saw their vision translated from words into visuals, they began providing more structured input and could complete the product requirement documents (PRD) with greater clarity. That's why I enjoy demoing wireframes alongside competitor references—it helps the product team think more deeply about what they want, why they want it, and which features should be prioritized when I collaborate with a more intuitive product owner.
At the same time, I involve senior engineers early in product development to assess the feasibility of my design ideas. This allows me to see how engaged they are with the product and how willing they are to collaborate on changes. During these discussions, the wireframes and prototypes serve as important tools to guide their thinking. I remain open to every suggestion (and sometimes criticism) to understand which design directions are more feasible for the engineers and more promising for the product managers.
Key Step ④ Design Handover & Design System:
Craft a well-documented design wireflow to the RD team, bridging the gap between design and development to effectively implement an excellent user experience.
I value collaborating with the engineering team because I'm excited to launch the feature in production while staying true to the design vision. In addition to the usual handover materials that I’ll provide to R&D, I believe it’s crucial to approach collaboration with empathy. Specifically, I want to ensure that even if my colleagues are unfamiliar with the feature, they can easily grasp the design vision through the documentation.
User flows: Shows how users complete tasks and verifies element connections and edge cases.
UI specs: Pixel-perfect design details for developers to ensure the product matches the design.
Assets and animations: Provides pixel-perfect images or JSON files for implementation, depending on the workflow.
Wireflows: Combines wireframes and flowcharts to visualize user navigation and screen transitions.
Design system components: Reusable elements such as buttons, forms, and icons ensure design consistency and simplify development. More design-engineering collaborations are documented in the Storybook here.
The key finding of the user study I summarized is: 'Setting up all the sites and stations is time-consuming, and the configurations are often incorrect.'
An EV station enables drivers to charge their vehicles, while a "charging site" denotes a location featuring one or more stations. Noodoe’s new SaaS platform oversees essential site settings, such as revenue, taxes, payment methods, and the remote management of EV chargers. The primary users of this SaaS are Operation Specialists, who spend most of their time assisting clients with configuring settings and managing site and station information online.
However, clients often manage hundreds or even thousands of sites globally. Frequent changes in tax regulations or payment settings require operators to regularly update these settings across all locations. This repetitive task of making hundreds of updates can become very frustrating for operators. Additionally, EV charging stations may unexpectedly shut down, requiring operators to quickly contact maintenance and investigate the cause. They also need to follow up to ensure the issue is fully resolved. Sadly, the monotony of these tasks causes some operators to leave their jobs.
We've prioritized the use cases and developed the feature lists accordingly, taking into account user needs, market trends, feasibility, and profitability.
User Case 01: Create a Site in SaaS
As an operator, I want to easily input information for creating a site or other types of entries, so that all necessary details are accessible and accurate.
→ Features: Site nesting view table, inherit data settings, financial-related setting, and guidance example etc.
User Case 02: Examine Nesting Structure & Info for Sites
As an operator, I want to quickly view the entry site list to understand entry relationships and details, so that I can examine the status effortlessly.
→ Features: Site nesting view table, drawer (slide-in window) etc.
User Case 03: Revise Info for the Existing Sites
As an operator, I want to efficiently update EV site information to ensure accuracy and increase the likelihood of sustained revenue growth.
→ Features: Site nesting view table, filter/search, inherit data setting, alert diagnosis, AI pricing prediction, etc.
User Case 04: Review Station Information
As an operator, I will need to know the station basic information so that I can use this information for maintenance and communication.
→ Features: Site nesting view table, detailed information, etc.
User Case 05: Resolve EV Station Issues
As a operator, I want to remotely control the station (access via mobile web, maintenance mode, and perform remote resets), so that I can manage station functionality and address issues without needing to be physically present, enhancing operational efficiency and responsiveness.
→ Features: Remote commands for Reset/Refresh/Maintenance Mode, and mobile link for on-site maintenance staff.
User Case 06: Relocate Stations to Different Sites
As a operator, I want to move a station to the correct site, so that I can maintain accurate site management and ensure that each station's data and operations are associated with the proper location.
→ Features: Site nesting view table, search/filter/, relocating status etc.
Final Delivery
1. Easy to Create Sites in SaaS
The design allows users to simply click toggles to automatically inherit data from their parent entries, particularly for financial functions. This streamlines the process by eliminating the need for manual selection or text input, ensuring that users correctly enter information in the appropriate sections. Additionally, it reduces the effort required to repeatedly configure the site with identical settings.
Additionally, I collaborated closely with TPMs and writers to develop clear and accessible help texts, along with example image upload guidelines, to make it easier for users to understand what information they need to enter into the system.
2. Easy to Examine Nesting Structure & Info for Sites
Users can easily navigate through different rows while the drawer displays additional details about each site in the nested structure. This makes it simpler for users to quickly locate and edit the desired site or station.
Easy to Modify Info for the Existing Sites
Users can conveniently filter out issued site entries and view the status of each entry in the Alert Cases column. This allows them to update or complete the necessary information directly, without needing to access the settings page.
Users often struggle to track and analyze long-term pricing changes accurately, making it difficult to adjust site-specific pricing for maximum profit. Our AI-driven prediction tool simplifies this process by leveraging historical big data to recommend optimal pricing configurations for different types of EV chargers.
If users want to check the status of a station for specific entries, they can start by accessing the Site Directory and clicking on the station column to navigate to the station's page. Once on the Station page, they can view the charger status and other details through the table and slide-in drawer, also with a tree view available on the side for easy navigation.
5. Easy to Resolve EV Station Issues
We collaborated with the hardware team to understand the scenarios for remotely controlling EV chargers and the associated technical constraints. Based on this, we redesigned the interface to allow users to perform various actions on the chargers, such as resetting or switching to maintenance mode. Users can then monitor the station status to verify whether the issue has been resolved. While not all issues can be addressed remotely, this feature significantly reduces the time and cost of on-site visits, improving both efficiency and responsiveness.
Easy to Relocate Stations to Different Sites
Some stations may be physically relocated from one site to another due to commercial considerations. To help operators manage the data and status of relocated stations more efficiently, users can now easily select a station and quickly identify the new location path for its transfer.
Impact
Secured multi-million USD in next-round funding from enterprise clients (NPS 75%).
Thanks to the exceptional teamwork, we’ve achieved high client satisfaction by delivering our products on time and with great quality. Additionally, the client has now agreed to pay for monthly reviews of upcoming features leading by me.
Reduced maintenance cost ~50%
Previously, operators had to spend 7 to 30 days to complete a site entry in the internal system. With the new design upgrade, they now only need 1 to 3 days to finish site creation in the SaaS platform.
Developed the nesting site tree framework to support the new business model, implementing it across more than 10 functions.
The Site Directory, which organizes the client's EV site into a hierarchical structure, has become central to the EV OS SaaS platform’s functionality. For instance, account management and log history management rely on the site directory for setting permissions and configuring data.
Streamlined design-engineering collaboration and white-label customization with a scalable design system.
I worked with other designers and front-end engineer to develop a design system with over 50 components. It improves team collaboration and streamlines Noodoe's product customization by adjusting color tokens to match clients' brand colors, saving time and resources.
Takeaway
Before satisfying users, sometimes I need to satisfy stakeholders first.
As designers, we all strive to create brilliant user experiences, but building a product or feature requires collective team effort. I’ve learned that not everyone in the organization is solely focused on creating a great product; many have their own personal goals and achievements in mind. To align with this, I make it a point to have one-on-one coffee chats with various stakeholders to understand their objectives, preferred communication styles, and any potential issues that could lead to dissatisfaction. This helps foster collaboration and ensure smoother teamwork.
Product success metric need to be aligned ASAP with stakeholders.
Confirming success metrics ensures a shared, unified vision of success. In B2B, these metrics often span long-term goals like client subscription renewals. To make progress more measurable, I work with the team to focus on indicators like NPS scores, efficiency to build a site, or clients' willingness to pay for design customization. Thankfully, my team and I achieved our goals!
Testimonial
Jeter played a crucial role in the initial stages of product development with his UX planning and UI design, guiding the project execution effectively.
He always does thorough research and shares case studies and common design trends in the market with the team at the right time, providing us with a wealth of reference resources. Our communication was seamless, and when development schedules were tight, he would comprehensively consider the integrity of the project and the most critical pain points for users. He insisted on the necessary features while offering flexibility to engineers and PMs for adjustments, helping the team deliver products that not only satisfied but often exceeded customer expectations within limited time frames.