Digital Fleets

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

PROJECT OVERVIEW

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, uses 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 product manager, designer and developers.

OUTCOMES

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

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

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

PROBLEM SPACE

The Design and Cost Estimation of Zero-Emission facility 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

Develop 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.

01 DISCOVER

Research Methods

At the beginning of this journey the leadership directed us to introduce an all-new feature known as the AI Design Workspace. I conducted UX research to ensure that this feature would address real user needs, streamline their workflows, and enhance the design process. The following methodologies guided my research:

User Interviews

Conducted 10 interviews with fleet engineers and project managers to understand their workflows, tool preferences, and frustrations with existing solutions.

Contextual Inquiry

Observed 5 engineers in their remote working environments to see how they interacted with current tools.

Competitor Analysis

Reviewed 3 competing platforms used in engineering design to identify gaps that Digital Fleets could address.

Research Outcomes

Here are the research outcomes for Digital Fleets, including three personas representing senior, mid-level, and junior engineering designers, a competitive benchmark analyzing similar platforms, and an empathy map that highlights the shared experiences and challenges across all engineering levels. These outcomes provide valuable insights into user needs, pain points, and motivations to inform the platform's design.

Personas

I developed three personas representing senior, mid-level, and junior design engineers’ Goals, motivations, needs and pain points.

Competitive Benchmark

I conducted a competitive benchmark comparing AutoCAD, Arcadia, and OpenRoads to identify these platforms' essential features, strengths, and weaknesses, which inspired the design of Digital Fleets.

Empathy Map

I also created an empathy map to paint a clear picture of the users and understand their thoughts, feelings, and challenges throughout the design process.

02 UX PLAN

Developing an AI-assisted Design Workspace

Based on the research findings, I defined the users’ key needs and developed the following UX plan:

  • 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 IDEATE

Collaboration to Design the User Flow

After defining the key features, I 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.

Visualizing 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

Designing 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

Examples of the Features Designed by me

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.

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

Lessons Learned

The following are the lessons I learned when I designed Digital Fleets:

  • 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.