Unified Interface System Design
For MilliporeSigma Millicell®
Due to NDA restrictions, this portfolio presents two case studies demonstrating the design approach and problem-solving without revealing actual work.
A comprehensive interface ecosystem developed at MilliporeSigma, designed for both immediate implementation and future-proofing. The project provides consistent user experiences across desktop, mobile, and lab instruments, with key components already implemented in the current Millicell® Cloud platform.
Platform Ecosystem Overview
The unified interface system spans three interconnected platforms—desktop, mobile, and instrument—each optimized for distinct interaction methods while maintaining consistent functionality and seamless workflow transitions across the laboratory environment.
Note: The remote real-time control is a concept function outside near-future scope, added to push for more innovative unified UI solutions.
Desktop
Primary platform providing full functional depth and advanced capabilities
Mobile
Touch-optimized interface carrying most desktop functionality while serving as a bridge for remote instrument monitoring and control.
Instrument
Physical laboratory devices with integrated digital interfaces accessible through mobile platform connectivity for real-time operations.
Case 1 :
Unified Design Language for Connected Laboratory Ecosystem
The design aims to maintain functional parity between desktop and mobile platforms while establishing visual language consistency across all three ecosystem components.
Mobile serves as the central bridge, translating desktop functionality into touch-optimized interactions while developing visual design patterns and interactions that extend to physical instrument interfaces.
From Web UI to touch-based UI
The desktop interface featured a three-column layout with navigation on the left, main content in the center, and device selector on the right. This design made good use of screen space while keeping functions clear for mouse interaction.
Challenge #1
Translating complex desktop interface to mobile while preserving existing information architecture for current user base
Challenge #2
Need to optimize for laboratory environment usage patterns and touch interaction
Interface Architecture Adaptation
Web Information Hierarchy
The desktop interface offers a parallel information structure that lets users access multiple layers of information at the same time: they can switch tasks, filter device data, and change content views independently. This helps users stay focused on a task while still accessing relevant device information and different content formats. The constant navigation and device selector serve as always-available information anchors that users can refer to without losing track of their current content.
Mobile Information Restructuring
The mobile interface transforms the parallel information access into a sequential information hierarchy organized into three distinct levels:
- Information Level: Bottom-tier content presentation that reflects the combined impact of navigation choices and control inputs
- Navigation Level: Top-tier information access determining the primary task domain and available functions
- Control Level: Mid-tier information filtering that shapes what data is displayed and how it’s presented (device selection, content actions, and display formatting)
Sequential Information Access: Transformed from simultaneous multi-layer interaction to step-by-step refinement with logically grouped controls and progressive disclosure
Maintained Information Depth: All desktop information remains accessible through clearer hierarchical relationships
Interface Layout Adaptation
Two distinct scenarios that shaped the entire interface approach and decides the design criteria:
Scientists carry the device as moving between workstation.
Scientists place devices on desktop during focused tasks rather than holding them handheld.
Upon internal evaluation, compact form smaller than letter paper is perfered
Interface must preserve desktop functionality and similar experience.
Interface should be finger-touch-friendly.
Adaptable to different handedness and cramped lab spaces.
Outcome Highlight
Familiar Touch Optimization
Mobile interface maintains desktop’s visual language, layout, and information architecture while optimizing for touch interaction, minimizing learning cost for existing users.
Modular Floating System
Interface features collapsible floating components for navigation and controls positioned on one display side, enabling easy handedness switching and modular development approach.
Context-Aware Control Panel
Floating control bar organizes functions by priority (controls from top, actions from bottom) with distinctive active/inactive visual states to enhance touch interaction clarity.
Content Switch Widget
Eliminates scrolling conflicts by slicing multi-section web pages into discrete portals accessible through a floating top switch, preventing interference with data visualization interactions.
Page under construction and case 2 is upcoming. And I’m happy to share the casestudy details anytime upon request.
Kuangming Qin 