TikTokShop Picking Robot Design System
Delivered · HRI · 2024
Optimize the multimodal experience for user interaction with improved sound, lighting, and interface features, and streamline the development process with a standardized design system, creating components more efficiently and with reduced workload.
CLIENT
ByteDance
PROJECT TYPE
# HRI/HMI Design
# Robotic Design system
# Robot Remote Control Design
TEAM
1 Product designer
4 Product manager
2 Developers…
TIMELINE
5 Months
Dec. 2023 - Apr. 2024
Project Background
DESIGN INTEGRATION
Value of the System
Standardize product design guidelines to provide guiding principles for the business; streamline development by combining behavior trees with generative components; and enable business designers to improve efficiency and quickly address the majority of requirements through the system.
Differences with Arco
The Arco design system is comprehensive, but it is more tailored to PC and mobile browser interfaces, making it less suitable for robotic systems and lacking guidelines for Human-Robot Interaction (HRI).
Design Process
Step 1: Abstract Extraction
Organize existing interfaces and distil elements
Based on the applicable scope of the frontend, extract and optimize current atomic components, redesign and create general-purpose business components. Continuously maintain and iterate on them to promote the standardization of the interaction component library, thereby reducing development and design workload for future migration scenarios.
Step 2: Creating Component Set
Generalize and build component variants and component sets.
Summarize the Image, Pageheader, Card, Icon, Alert, Button, Popover, Status, Message, Joystick, Progress components.
Step 3: Optimize the interface
Standardize the existing interface user line to enhance the logistics work experience.
