Crafting an Intuitive and Simplified User Interface
Reimagining the Mobile Application for My Automated Vacuum
Roboto
Project Brief
Summary
Redesigning the app for my robot vacuum was both challenging and rewarding. From the initial concept to the final product, my goal was to create an experience as seamless and efficient as the robot itself cleans our floors.
Role
Product Designer
User Flows, Information Architecure, Wireframing, UI Design, Prototyping, User Testing
Cleaning Modes
User can easily navigate cleaning modes.
Interaction Design
Overlays make it intuitive and quick to select and start your cleaning mode or access things like menus and notifications.
Dynamic HUDs
Easily view important information, such as the robot’s battery level, dustbin capacity, cleaning status, and cleaning history, all in one place.
Typography
Satashio
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1 2 3 4 5 6 7 8 9 0
Fonts
Color
Primary
Black
Primary
Black
Alerts
Map
Icons
Components
Problems and Solutions
Problems
Key Features Buried in Submenus: Essential functions were difficult to access, hidden within multiple layers of navigation, leading to user frustration.
Complex and Challenging Interface: The existing user interface was overly complicated, making it hard for users to perform basic tasks quickly and efficiently.
Lack of Information Hierarchy: Important information and controls were not prioritized, creating confusion and a disorganized user experience.
Solutions
Streamlined Navigation: Simplified the app’s structure by bringing key features to the forefront, reducing the number of steps needed to access essential functions.
Intuitive Interface Design: Redesigned the user interface to be more user-friendly, ensuring clear pathways and minimizing complexity for seamless interaction.
Improved Information Hierarchy: Established a clear hierarchy that prioritizes important information and controls, making it easy for users to locate and understand essential features at a glance.
Start Cleaning: User Flow Diagram
Map Editor: Information Architecture
Information Architecture
With all the features and details in an app for controlling a robot, understanding the information layout was essential. The map editor, in particular, was cluttered and confusing. To design a more user-friendly editor, I needed to break down all the information and features, ensuring each element was organized in a way that made it intuitive and easy to use.
Wireframes
The start cleaning flow was simplified to be more intuitive and easy to navigate, allowing users to initiate and customize the cleaning process with minimal effort.
Start Cleaning: Wireframes
Due to the detailed nature of product design case studies, I recommend viewing them on a larger display for the best experience.
You can still view the working prototype and design here.
Due to the detailed nature of product design case studies, I recommend viewing them on a larger display for the best experience.
You can still view the working prototype and design here.
Due to the detailed nature of product design case studies, I recommend viewing them on a larger display for the best experience.
You can still view the working prototype and design below.