Lionsbot - Drain Tank Flow
About The Project
LionsBot International, a Singapore-based company, develops advanced cleaning robots for commercial and industrial spaces. Their key products include the LionsCloud Dashboard, LionsClean mobile app, Global Command Center for centralized control, and an intuitive touchscreen interface for user interactions.
Project Overview
The Omega robot introduces a new and improved water flow system. While previous models also had two tanks — a clean water tank and a wastewater tank — they relied on a slow and inefficient front spray mechanism for draining. The Omega robot now incorporates a pump system that efficiently transfers clean water to the waste tank, significantly reducing drainage time.
What We Designed
To support this upgraded system, I designed a user-friendly interface that guides users through the water transfer process, improving operational efficiency and providing better control over the robot’s functions.
My Team
1 x Product Manager
1 x Mechanical Engineer
1 x Software Engineer
1 x Frontend Engineer
My Contribution
User Experience
UX Writing
User Research (Usability Testing, A/B Testing)
Prototyping
Date
Dec 2022 - Jul 2023
Tools
Problem Statement & Goals
Problem 🤔
The current water flow system involves a spray at the front of the robot to release clean water. However, this process takes a significant amount of time to drain all the water from the clean tank, leading to inefficiency and delays during operation.
⚡️ The Challenge : Aligning user goals with technical feasibility
Goals 🎯
To reduce the time it takes to drain clean water from the tank and simplify the process for improved efficiency and ease of use.
My Impact ✨
I worked on this project as a solo designer, collaborating with an engineer and under the supervision of a product manager and UX lead.
My responsibilities included handling all discovery and design deliverables. I focused on the user experience by conducting user research on the current flow. I analyzed the time it took for water to move from the clean tank to the waste tank and to drain completely from the hose. Additionally, I conducted usability testing and A/B testing to ensure the new design improved efficiency and usability.
Research & Discovery
I conducted user research and interviews to understand the current drain tank flow, measuring the time it took to fully drain the tank and identifying user challenges. These insights revealed inefficiencies and frustrations, guiding the design of a more effective and user-friendly solution.
We kicked things off by gathering insights from our users including technician and mechanical engineers. I asked questions such as:
Can you walk me through the current steps you take to drain the tank?
How long does it typically take to transfer water from the clean tank to the waste tank?
What challenges or frustrations do you face during this process?
How do you know when the tank has fully drained?
What improvements would make this process faster or easier for you?
Research Findings and Insights
Before
Current Drain Time
The current process takes 1 hour to fully drain the clean tank
After
Improved Drain Tank
Transferring water from the clean tank to the waste tank will take up to 15 minutes
Insights
Inefficient water flow:
The current system sprays clean water from the front of the robot, but the process is slow and ineffective
Lengthy drainage time
The current system sprays clean water from the front of the robot, but the process is slow and ineffective
Reduced productivity
The current system sprays clean water from the front of the robot, but the process is slow and ineffective
Ideation & Wireframing
High-Fidelity Prototyping
First Version
I created 3 different options based on my findings to test with users, each offering a unique approach to displaying the water level during the process. These options were designed to evaluate different ways of showing the interaction between draining wastewater and transferring clean water, using either a GIF or numbers for the water level display.
Option 1
Step 1: Drain the wastewater first.
Step 2: Transfer water from the clean tank to the waste tank, displaying the clean tank's water capacity using a GIF.
Option 2
Step 1: Drain the wastewater first.
Step 2: Transfer water from the clean tank to the waste tank, displaying the clean tank's water capacity with a progress bar.
Option 3
Step 1: Drain the wastewater while simultaneously transferring clean water to the waste tank.
Step 2: Display the clean tank's water capacity and waste tank's water capacity using a GIF.
Testing & Iteration
Multivarite Testing
I conducted multivariate testing with 4 users to determine the most user-friendly approach for managing the water transfer process. Three options were evaluated, and I designed different variations for key screens, focusing on how users interact with the water drainage process. These options were:
Instruction with "Proceed" button for manual drainage.
Percentage of waste water once waste tank is empty
Percentage of remaining clean water to drain.
Findings
I documented the results in an Excel sheet for the four users. The sheet included user feedback, observations, and performance data for each of the tested options. This helped in identifying trends and preferences, allowing me to make data-driven decisions for the final design.
A/B Testing
While conducting usability testing, I also performed A/B testing with two options:
Option 1: Drain the clean water only after the wastewater is drained.
Option 2: Drain both clean water and wastewater concurrently.
Findings
After testing, most users preferred Option 1: Drain the wastewater first, then transfer clean water, with the water level shown using a GIF.
I have decided to go with Option 1: drain the wastewater first, then transfer clean water, with the water level displayed using a GIF.
Designing for edge cases
I also designed for various edge cases, including scenarios where the robot was stopped by user action or encountered errors. Clear and concise UX writing was implemented to guide users through these situations effectively.
Iterations
Before moving to the iteration, I discussed with the dev team to understand the technical aspects and align the user goals with business requirements.
Iteration 1 : Initially, used four grid pictures and used counter to illustrate the process.
Problem: Users found the detailed visuals unnecessary, leading to confusion and a cluttered experience. Users misunderstood when the countdown would start, assuming it would only begin once the hose was uncapped.
Solution: Simplified the visuals to two-step pictures, providing clear, concise instructions without overwhelming the users.
Iteration 2 : Initially, Used a progress bar and percentage and to show the remaining clean water level.
Problem: Technical difficulties arose when trying to calculate progress accurately.
Solution: Simplified the flow by using a live water level indicator with a GIF, eliminating the need for a progress bar.
Outcome
After multiple iterations based on feedback, I successfully finalized the drain tank design and handed it off to the development team for implementation.
Reflection
Challenges
Understanding the current flow inefficiencies and finding a solution to reduce draining time without affecting the robot's performance. Coordinating with engineers for technical feasibility and conducting usability testing to meet user needs were also significant challenges.
Lesson Learned
Lesson 1: Aligning User Goals with Technical Feasibility
Involving developers early in the design process ensures that technical constraints are identified and addressed, leading to practical and implementable design solutions.
Lesson 2: The Importance of UX Writing
Clear and concise wording is key—minimal text paired with intuitive visuals creates a seamless user experience, making information easier to understand and act upon.