Overview
My Role
UX Designer / UX Engineer
Core Team
1 UX Designer, 1 Front-end Developer, 1 Project Manager
Project Duration
2023.08 - 2023.10
Project Context
This project involved developing a new design system for EFAS Technology future design and enhancing the Generate Work Orders interface with multi-selection and improved information display.
System Overview
GAILL is an advanced AI water leak detection SaaS platform powered by EFAS Technology. It monitors pipeline system through map to detect pipeline anomally and generate the most up to date report for work order generation and repairing guide. The platform scored 100% accuracy in locating abnormal location and saved millions for customers by early intervention.
Design Task
Generate Work Order function in GAILL is to filter fetched leakage data in order to help workers to generate work order. My work is to refine the selection interface and enhance the readability through reforming design system.
Design System
My first task is to synthesize and unify the color and components from previous design. I created the universal design strategy for different status and function and unified the buttons reusable components design.
Multi-Selection
In previous version, users need to manually input related data(except DMA) to filter out the abnormal location for future repair work. 5 usablity tests were conducted to exam the proposed pain points and all the participants mentioned it is hard to manually input correct information in a short time or without the external guidance. The average finish time is 79s. The team proposed to use multi-selection to replace current methods.
Iteration One: Drop Down Menu + Multi-Selection
To make the input information more accurate, I nested the multi-selection under the drop down menu for each individual blank. When users click the button, they can view and select targeted information they need. A demo was created by collaborating with the development team and I did A/B tests with a new group of participants, and they mentioned the drop down menu shortened the finish time with an average of 47s. However, for the numbers, it could be tricky to find.
Iteration Two: Drop Down Menu + Slide Bar
In the first iteration, I applied multi-selection for all the drop down menu, however, the length range and diameter range selection involves wide range of number, it is time consuming to browser all the options. In this two selection, I used a slider bar to filter the range and enabled number input function to locate the accurate range. Demo was created as well, and the new group of participants were invited for A/B testing, the average finish time changed from 47s to 39s compared with iteration one.
Comfirmation
The original version use a box to show all the information for each single leakage report, which increased user cogintive load since the title and the data were structured alternatively. The different anormally data were coded by different color, it distracted users reading other information logically as well according to the participants who joined the usability test. During the usability test, I found there is no place on the confirmation page to update the variables or sort the data, users needed to go backwards to make modification, which caused redundent user flows.
Iteration One: Sort Function + Horizontal Spread Layout
Update One: Sort Function
To enhance current user flow, the "sort" function was added on the top of the chart, where users can easily find when they explore the chart in sequence. Users can modify all the data input and work order sequence here if they change their mind.
A/B testing was conducted to measure the usability of the new function, feedback from participants showed the color use for selected item is not obvious enough, they had trouble to know if they selected the correct item.
Update Two: Horizontal Spread Layout
The box layout for each record has been changed to horizontal layout, each record only shows in one row. Users can find more information by move the slide bar at the bottom.
A/B testing was conducted to understand if current layout is user-friendly enough for users to read the records. Users mentioned current layout is not as distracted as before, and each section title has clearly aligned. However, it could be better if the slide bar works individually on each record.
Iteration Two: Color Schema + Horizontal Box
Update One: Color Schema
To enhance the readability issue, I change the text color as well as background color of the selected item, which make it pop out from the context.
After test, users are pleased with the modification which helps them better locating their target option.
Update Two: Horizontal Box
Instead of using a slide bar to control the whole box, I nested each record into one small box with its own slide bar. Users can check details individually.
A/B testing was conducted to further understand if the update helps users better read the data, and 80% percent of the participants mentioned this new change helped them with managing individual record.
Next & Reflection
The overall design solution was tested for feasiblity during design process, final design was updated to GAILL in Oct, 2023
