UI/UX Design | Design System | B2B | Shipped Product

Commercial Robot Vacuum System Design

Optimizing product user flows and converting new features to the new touch screen on the device.
PROJECT OVERVIEW

Rebuilding the Touchscreen for Commercial Robot Vacuum - Mio!

Mio is a commercial robot vacuum with wet and dry cleaning modules. Besides cleaning, several functions are designated for business use. For example, Map scanning and drawing functions help businesses create cleaning and restricted areas efficiently. The template feature allows businesses to customize variables to optimize cleaning. The scheduler and tasking setting functions let Mio start the cleaning routine automatically.

For this project, the design team needs to migrate all functions that are used to be controlled by computer to Mio itself. Moreover, we revamp the user flows to resolve pain points that we discovered from the last product and make new features easier to learn and use.
User
Cleaning companies, businesses, and janitors
Challenges
Complicated user flows and touch screen design
Metric
Predicted 43% efficiency gain through a user-friendly touchscreen interface.
Duration
4 months: 2023 Oct - 2024 Jan
My Role
UX Desginer
Team of 10: 4 Designers, 5 Engineers, 1 Director
Methdology & Tools
Figma, Agile Development, Interview, Competitor Analysis
BACKGROUND

Deploying a New Touchscreen Robot Vacuum.

Established in 2011 by young robotics engineers, UniRing focuses on automating commercial floor cleaning and security robots equipped with innovative navigation technology.

Their latest model, MIO v1, addresses usability concerns with a more intuitive 10-inch tablet interface. Their initial robot, prioritized functionality over user experience, resulting in a complex navigation system.
Our Mission

Addressing users' pain points from the previous system and integrating new functionalities by touch controls.

Click to touch interaction
The operation system of the robot switch from remote website to 10 inches tablet on the robot to improve setting convenience.
Address user issues
The old system had several usability issues that needed to be addressed, such as a cluttered interface and confusing navigation.
Design new user flow
The transition from mouse clicks to touch controls required a new user flow to be designed for the new system.
Key Featrues

Say hello to Mio v2, Updated Cleaning Robot.

My primary focus is to create user flow and UX design for Template Management, Semi-Auto Mode, and User Management.

Template Management

- Provide intuitive user flow to create and edit templates.
- Use icons to minimize words.
Solution Highlight - Main Page
‍- The main page briefly overviews templates
- Easy to access actions to manage templates
Solution Highlight - Template Setting
- Icon variants to show levels
- Different designs for types and modes
- Toggle for switching Advance Setting
- Drop-down for more levels

Semi-Auto Setting

- Design for janitors, especially non-tech-savvy people.
- Aimed for intuitive design, easy to learn and use.
Solution Highlight - Semi-Auto Mode
Simple Setting
‍- Big button design to increase accessibility

Advance Setting
‍- Slider for easy adjustment
- Pop-up setting level for easy reading

User Management and Device Log-in

- Utilize group accounts to avoid managing individually and database maintenance.
- Different password settings and keyboards for different levels.
Solution Highlight -  Device Log-in
‍- Easy to switch between user groups
- Numeric keyboard for the most used group
Solution Highlight -  User Management
‍- Group management
- Allow customized groups' name
- Higher level can overwrite passwords of lower

Design System

Shifting from laptop to tablet touchscreen, our UI library prioritizes:
- RWD (Responsive web design) for optimal viewing
- Multilingual support for future expansion
- Touch-centric interactions with scrolling and dragging
Color Palette and Fonts
Component Library
UX Research

How did we define pain points and problems - UX Research

To kickstart our final solution, we initiated user research to uncover any overlooked issues. Our approach involved employing two methods aimed at gaining insights into user pain points:
Usability Test on MIO v1
We conducted a remote usability test via Zoom with two participants to pinpoint user experience (UX) issues and pain points within MIO v1.of a div block.
Competitor Analysis
Next, we conducted a competitor analysis to compare our products with other brands. This allowed us to glean insights from their strengths and address weaknesses we have.
Challenges
As a globally distributed remote team, we could not personally witness the robots' performance and we didn't have physical prototypes to use by ourselves.
Metigations
- Remote Control
We used a remote access platform to manage the robots and utilized a Zoom meeting to observe their interactions with testers.

-Virture Machine
To delve deeper into the robot's existing user interface, we utilized virtual hosting, enabling us to observe its functionality and conduct usability testing with participants.

Key Findings:

Complicated User flows
We found that the user flows are very intertwined and non-intuitive.

To complete a task, for example, creating a map, users have to jump between different pages for different functions which causes confusion, inconvenience, and a high learning curve.
Complicated Info Architecture
Next, we found that information architecture is messy.

There are too many buttons, lists, and labels on a page which makes users difficulty find things they need.
There is no permission system
Finally, we discovered that there is no distinction in functions when users with varying roles access the server.
‍
There are no restrictions or confirmations for high-level functions like scanning maps, editing maps, and system setting. Janitors might inadvertently delete important maps or alter settings.
USER FLOW REvamp

Firstly, we addressed the User Flows.

To resolve the major problem, complicated user flows, we visualized the current user flows and then deep dive into them. We broke down user flows and then ideated opportunities to mingle, merge, and optimize. Eventually, we categorized existing functions into four user flows, Map Management, Template Management, Task Management, and Task Scheduler. For these functions, we design a step by step workflow, so users can complete entire task at once, instead of navigating between pages for different functions.

In this reframed process, we regularly discussed to ensure the new user flow aligned with the project's vision and exceeded expectations. The regular discussion between design and development was vital to creating a user flow that was technically feasible, efficient, and aligned with business goals.
Old User Flow
New User Flow

So, what's the key game changer?

Before - Disjointed Workflow
The original system scattered important steps all over, even though they should have been in a logical order. This made it hard to find what you needed and made things confusing for users.
After - Streamlined the Steps
We optimized the workflow by putting all the steps in one clear order. This made it easier for users to understand and helped things run smoother and faster.

Next, I focused on the User flow and UI of Template Management

Once we finished revamping overall user flows, we split the main tasks among different designers. Daily meetings helped us give feedback and improve the design together. My area of focus was Template Management, Semi-Auto Mode, and User (Access) management
Template Management

Template Management - Crafting Intuitive Designs

The main goal of the Template Management is to design a user-friendly flow and interface. This helps users easily create and edit action templates for various scenarios.
Target user for Template Management - Cleaning Staff
Provide the flexibility to customize templates according to specific needs, such as wet cleaning, dry cleaning, and standby.
Design Concept:
Levels by Icons
Utilizing icons to represent various settings, enabling users to quickly grasp levels and categories for easy adjustment.
‍NOT APPLICABLE
Initial iteration:
- General layout for wet and dry template.
- Number of icons for level representation.
Validation:
- Separate pages are needed for wet and dry cleaning due to their distinct cleaning modules.
‍- Excessive icons cause visual clutter.
- Gaps between each level are too big (33% | 66% | 100%).
Final solution:
- Distinct layouts for different types of template.
- Icon variables to represent different levels.
- Simple and advance settings for enhanced customization.
Validation:
- Different layouts help people distinguish template types and minimizing confusion
‍- Icon variables enhance UI clarity and visual appeal.
- Advanced settings offer 10 levels for precise adjustments.

Building on Template Management, I designed Semi-Auto Mode.

In Mio v1, a hardware switch was used to activate and adjust Semi-Auto Mode. Transitioning to Mio v2, all hardware controls need to be transferred to the digital UI. Additionally, Mio V2 introduces a new wet cleaning module, requiring a solution to adapt this hardware change.
Semi-Auto mode

Semi-Auto Mode - Designed for zero learning curve.

Semi-Auto Mode aims to make it easy for older, less tech-savvy janitors to use intuitively, reducing the learning curve.
Target user for Semi-Auto Mode - Janitor
As stakeholders said, normally, janitors are not non-tech-savvy people, so the design must be as easy as possible.
Design Concept:
Click and Slide
Leveraging touchscreen advantages for a user-friendly interface to easily adjust all robot vacuum settings.
‍NOT APPLICABLE
Initial iteration:
- Column design to separate functions.
- Slide bar for easy operation.
Validation:
- The text and buttons are too small for older janitors with vision problems.
‍- Slider without markings makes it challenging for the development team to determine the exact level.
- Semi-Auto Mode doesn't need robot speed since users will push the robot to move forward.
Final solution:
- Simplify operation by only using buttons.
- Add big icons for simple identification.
- Add a Reset button for convenience.
Validation:
- All-button design makes operation consistent.
‍- Big icons make types of setting more perceivable

Lastly, I address User Management and Device Log-in togeter

As we finalize the functionalities for Mio V2, our last challenge is implementing a user hierarchy system and access protection.‍
Semi-Auto mode

User Management & Device Log-in - enhance device security and integrity.

Firstly, In public places such as offices, malls, and factories where Mio is used for cleaning, it's crucial to keep unauthorized individuals from accessing and disrupting Mio's operations, ensuring smooth cleaning tasks without interruptions.

Additionally, We also want to make sure that employees only access functions relevant to their roles. For example, janitors shouldn't be able to create or edit maps, as this could lead to unintended changes or deletions of important information.
Target user for User Management & Device Log-in - Everyone
Ensure only authorized personnel can access the system and limit administrative functions to manager-level users.
Design Concept:
User Group
Create user groups with distinct access levels to avoid the need for individual eimployee account management and simplify database development.
‍NOT APPLICABLE
Initial iteration:
- Employees have their own account.
- Add/Delete users into the corresponding group of their roles.
Validation:
- This design will require significant investment in database development and ongoing maintenance.
- Employees' accounts need to be preconfigured on the server.
‍- The initial setup time for each account will be extensive.
- Log-in in will take longer as users need to input both their username and password.
Final solution:
- Replace individual accounts with four user groups for simplicity.
- Users only need to enter their password to log in.
- Users with the same role share one password, and those at higher levels can change it directly.
- Allow group names to be edited.
Validation:
- General user group design saves huge effort to manage individual user accounts and maintain a database.
- Omit the process of adding employees into the system
‍- Reduce development time and cost.
CURRENT STATUS & METRICS

The solution and design are delivered to the engineers with detailed annotations.

2025 Q1
Development is ongoing and the product is expected to hit the market by then.
200+
Robots have entered into an agreement with Lotte Korea, facilitated by the new interface.
43%
Predicted an increase in efficiency compared with the Mio V1, resulting from the new interface.
KEY TAKEAWAYS

What I have learned from this project

Navigating technical constraints while considering design aspects.
Acknowledged critical technical limitations and time constraints. Although immediate solutions weren't feasible for some issues, we documented them for future prioritization. Emphasizing minor adjustments enabled a quicker market launch.
Leveraging user insights within time limitations.
Due to time constraints and our role as a contractor, we had limited user access. We addressed this by collaborating with customer service representatives, who have extensive user interaction, to gather feedback.
Enhancing efficiency through collaboration across departments.
Daily design reviews and stand-up meetings helped our design team collaborate with third-party engineers. Effective time and project management ensured alignment, resulting in a two-week project completion advantage and more time for usability testing and modifications.

Thank you for reading!
Here are more works.

Atmosfy Usablilty Test
Bus Feature Redesgin
Process Optimization and Data Automation
© Mickey Chen 2023