Digital Fleets

A design tool for engineers to integrate Zero-Emission Vehicle (ZEV) solutions into blueprints and estimate construction costs.

BACKGROUND

Zero-emission vehicles (ZEVs) aim to replace gas-powered cars and reduce environmental impact.

Digital Fleets, a SaaS platform by EquiCharge, one of North America's largest electric vehicle fleet operators, leverages data analytics and AI to streamline ZEV planning, design, and operation, facilitating a faster and more efficient transition to electric vehicles.

I helped to develop and design features for the Digital Fleets platform, enabling engineers to convert Zero-Emission Vehicle (ZEV) transition solutions into construction-ready blueprints and estimate costs.

MY ROLE

As a lead product designer I created a technical drafting tool with AI-assisted features for the Digital Fleets platform, enabling engineers to manage EV transition scenarios, create construction-ready blueprints, and estimate costs. I collaborated with a team of 5 designers, including 2 peers, on this project.

OUTCOMES

40% reduction in costs 👉 More junior staff, faster work processes, and the integrated scenario planning and design features. 

3x faster work 👉 Automated design generation process and centralized knowledge repositories. 

50 % client increase 👉 providing value to design engineering firms, opening up a new client base on top of fleet operators.

PROBLEM SPACE

The Design and Estimation Process Was Expensive, Time Consuming, and Prone to Errors

Designing a typical Zero-Emission facility and preparing it for construction is complicated. Engineers have to switch between different design, optimization, and cost analysis tools, making the process expensive, time-consuming, and prone to mistakes.

Goals

Developing a new module named Design within the Digital Fleets platform to

  • Make the design process more efficient, quicker, consistent and reliable.

  • Enable junior design engineers to upskill themselves through utilizing the AI recommendations.

UX PLAN

Developing an AI-assisted Design Workspace

At the beginning of this journey the leadership directed us to introduce an all-new feature known as the AI Design Workspace. It is a place for design engineers to create blueprints for their EV transition solutions. This feature will allow engineers to run a cost analysis on their design and also has integrated AI suggestions to make their designs more efficient.

Based on our findings, we identified the following key needs:

  • Making the design module by collecting some design, optimization, and cost analysis tools into one module to make the design process more efficient.

  • Allowing multiple engineers to create, import and edit designs together in real-time to make the design process quicker and more consistent.

  • Base the design tools on AutoCAD to ensure the final design is consistent and all human resources already know how to use it.

  • Design an AI generate checklist that identifies the errors of design to help junior design engineers proceed the design process successfully and error free.

  • Create a step-by-step guidance modal for junior design engineers to follow regional, national, and international regulations.

  • Implement tools for engineers to validate designs and exchange feedback to make the final reliable and consistent.

  • Design a cost report dashboard to make the design process more efficient.

02 TECHNICAL EXPLORATION

Collaborated to Design the User Flow

After defining the UX plan, we followed these steps as part of our technical exploration:

  • Held meetings with engineering to define the AI design workspace workflow.

  • Conducted workshops to define core flows for creating and importing designs.

  • Collaborated with engineering and product management to optimize user experience flows, guiding the design process.

Initial flow

Optimized flow

03 SKETCH

Visualized the Ideas via sketching

At this stage, we divided the tasks, and I took charge of the All Files, Create, and Costs pages. Based on the requirements, optimized flow, and initial inputs, I quickly sketched these three pages with diverse iterations to visualize the rough structure of them.

04 MID FIDELITY WIREFRAME

Designed The Medium Fidelity Wireframes Iterations

After sketching the rough ideas and having a general vision about what each page may look like, I created medium-fidelity wireframes to present the UX experience and the technical aspects of the platform in more detail. To save time and effort, I mostly used existing Digital Fleet assets and designed a few from scratch.

All Files Page

Here are some iterations of the All Files page, where users can access all EV transition scenarios. After group discussions with the client and testing, the middle iteration was selected for its:

  • Ability to display multiple scenarios at a glance.

  • Clear visibility of scenario details and images.

  • Enhanced usability, supporting informed decision-making.

Create Page

Here are three design concepts for the Create page, an AI-driven design workspace for engineers to blueprint EV transition solutions. The second design was selected for its:

  • Intuitive access to the Suggestions and Regulation & Standards checklist.

  • Streamlined commenting feature for efficient collaboration.

  • Enhanced compatibility with the All Files page, ensuring a cohesive user experience.

Costs Page

I developed different concepts for the Costs page, where users can estimate the cost of their designs. The middle design was chosen for its:

  • Easy access to scenarios via a built-in Scenario list.

  • A combination of the cards and table views makes cost analysis more straightforward.

05 PROTOTYPE & TEST

Created high Fidelity Designs and Tested them

After finalizing the mid-fidelity design, I proceeded to create the high-fidelity designs and the prototype. I then conducted a user interview with 5 fleet design engineers to identify any UX pain points in the Design modules.

While all users were able to successfully complete the tasks, I found out the suggestions drawer needed these enhancements:

  • Error Count Tags: Each suggestion now includes a tag showing the number of related errors, giving users immediate visibility of issues.

  • Interactive Error Icon: Clicking the orange error icon highlights the corresponding item in the drawer with an orange hover effect, making it easier to locate and address errors.

Expanding the Component and Assets Library

In the meantime, to meet the Design module's requirements, I created the new components and assets and added to the DigitalFleets’s library, and edited some of them based on the feedback I received in user test.

SOLUTION

📁 All Files Page

The "All Files" page allows users to manage their design projects efficiently. Users can continue working on previously started designs, create new designs or import existing ones.

  • Continuing a Previous Design: Users can effortlessly pick up where they left off by selecting a scenario marked with a pencil icon or choosing from the Recent Designs section.

  • Creating a New Design or Importing an Existing One: Users can start fresh or import a design by selecting a scenario from the Scenarios panel. On the right side, a preview and details of the chosen scenario will appear, providing all the necessary information before proceeding.

✏️ Create Page

The Design page enhances designs with valuable suggestions and regulatory policy guides, helping junior and senior resources work efficiently.

  • Suggestions Panel: A checklist of platform-generated suggestions marked by orange triangles. Hovering reveals their location on the design. Users can check off implemented suggestions by turning the triangle green.

  • Regulations and Standards Panel: A checklist of standards and regulations with links to relevant documents for compliance.

  • Energy Asset Icons: Display suggested locations of energy assets for imported designs.

  • Comment Feature: Allows users to leave comments on the design, accessible through the "Collaborate" button.

💰 Costs Page

The Cost Report section enables users to generate and review comprehensive cost reports for their design projects.

  • Dashboard Overview: Displays the total cost, scenario details, a cost breakdown into four categories, and a donut chart of cost distribution to provide users with a clear and quick view of costs.

  • Detailed Cost Table: Offers an in-depth look at each cost category.

Lessons Learned

I will write a sentence here

  • This was a very technical tool and relied on the capabilities of the software platform.

  • I leaned on my engineering lead as a partner to help me define how we could realistically build these features.

  • I learned how important it is to bring engineering into a project as early as possible.