BenQ Uni UI
BenQ Uni UI redefines collaborative spaces by seamlessly integrating diverse meeting equipment, ensuring a consistent and user-friendly experience while promoting effective communication among participants. This innovative solution establishes a unified language for interaction, harmonizing visual and operational elements on interfaces.
BenQ Uni UI not only breaks down barriers between different devices but also introduces a free and cross-unit control experience, simplifying operations and extending equipment capabilities. The design culminates in a co-creative mode, fostering limitless creative possibilities. This holistic approach transforms traditional meeting setups into dynamic, collaborative spaces, enhancing communication and co-creation for an unparalleled user experience.
Time:
Apr. 2019 - Jun. 2020
(14 months)
Team Size:
8
My Role:
UI/UX Designer
Tools:
Interviews, Quantitative Research, User Interface & flow Design (Figma) Prototyping (Principle)
Explore the full story.
Easy. Co-creat.
Cross-unit.
The Problems
Project Goals
During our routine work, we consistently engage in diverse meetings that involve a range of equipment, such as projectors, monitors, and touch screens. This necessitates a continual process of learning new operational methods for different devices. The challenge of adapting to the operations of various tools recurrently arises, impacting the smoothness of our meetings. This current setup often results in a lack of familiarity with different equipment, hindering our ability to navigate meetings seamlessly.
Uni UI Design System is driven by the mission to cultivate a seamless cross-device user experience and foster enhanced collaboration by connecting equipment with participants to inspire co-creative activities. The project adheres to three core principles:
1
Learning burden of
cross-device:
The individualized user interfaces and distinct required actions for each piece of equipment contribute to an increased learning burden, stemming from an inconsistent user experience across devices.
3
Limited canvas for
co-creation:
The constraint of allowing only a limited number of users per unit restricts the potential for expansive creative brainstorming sessions, limiting the scope for co-creation and collaborative innovation.
2
Operation gap between equipment:
The separate control of each piece of equipment creates an operational gap, making it challenging to establish seamless connections and coordination between devices.
1
Make it easy
and universal.
Harmoniously integrate visual and operational elements, establishing a straightforward and consistent communication language among diverse equipment to creat an intuitive and universally accessible user experience.
3
Unite to get more inspiration.
Extend device functionality to foster a co-creative mode, unlocking limitless creative possibilities, uniting participants and providing a collaborative environment that sparks inspiration for innovative endeavors.
2
Cross-unit
control.
Eliminate barriers between equipment to enable liberated cross-unit control experience, simplifying operations and enhancing overall efficiency in managing multiple devices.
Overview
Meanwhile, equipment independence further leads to a unidirectional flow of communication, primarily characterized by one-way reporting or listening, which can't embody mutual communication among meeting participants. Our research has identified three critical issues that significantly impact the overall meeting experience:
Three critical issues: 1) Learning burden of cross-device; 2) Operation gap between equipment; 3) Limited canvas for co-creation
How Might We
Questions
" How might we ensure the consistency of operational behavior across diverse devices, meanwhile meeting user expectations for each device without compromising their existing operating experience? "
" How might we establish a cohesive visual language applicable to various device usage scenarios while accommodating different operational behaviors? "
" How might we design an information structure that not only aligns with users' needs in diverse scenarios but also enables users to focus on their current tasks without unnecessary distractions? "
What we learn
from users.
Based on science
and real world.
Interview & Persona
Human Factors and Ergonomics
To generate solutions for the identified problems, I conducted a series of interviews, engaging individuals with diverse backgrounds such as project managers, designers, and developers, all of whom frequently utilize conference rooms. This intentional selection aimed to capture insights from individuals with varying levels of familiarity with electronic products, providing a comprehensive understanding that spans both inexperienced and experienced user perspectives. The interviews were instrumental in unraveling user needs and mapping the current user journey, forming a foundation for informed ideation.
In the process of interface design, we meticulously defined touch zones for Interactive Flat Panels (IFPs) based on established human factors principles, including Fitt's law. Recognizing the variability in operational behaviors and distances between users and IFPs, we leveraged these principles to determine the sizes and colors of interface components. This approach ensures not only visual recognition but also ease of operation, accommodating different user scenarios and optimizing information accessibility based on varying distances.
Research & Ideating
User Explaning how the screen size affect his operational experience
Fitts's Law
Applying
Fitts's Law
to ensure interactive
elements are sized and spaced optimally
for efficient interaction, thereby enhancing usability and productivity.
Interaction Distance(Proxemics)
Utilizing
Proxemics theory
to study variations in
user attention and information density relative to distance
from digital interfaces, aiming to optimize interface design and user engagement.
Wireframes
UI flow
Core layout for Uni UI
Reimagined.
Reconstruct.
User Flow & Wireframe
Following a comprehensive process that included interviews, human factors and ergonomics research, as well as the development of personas, usage scenarios, and identification of user pain points, we initiated the design phase by crafting user flows and rapid prototypes. This strategic approach allowed us to synthesize our design concepts, ensuring alignment with user needs and providing a tangible foundation for further iterations.
Design Concept
Make it easy and universal.
Style Guide /
UI Icon Design
To uphold a consistent user experience and design style across diverse meeting equipment, we established a visually distinctive language and defined comprehensive visual guidelines for interface elements.
Uni
color system
Uni color system, designed to embody high visibility and boundless imagination, comprises foundational colors, interactive colors, and main feature colors.
Uni
icon system
Uni icon system is crafted with universally understandable images that swiftly convey meanings to users. This design approach enables seamless task operation as users quickly comprehend and associate icons with their intended functions. The icons prioritize logical coherence, presenting a professional and visually balanced aesthetic.
Uni font
Uni font is a sans-serif typeface meticulously designed with a smooth and modern shape, prioritizing excellent readability across various interfaces. This font choice contributes to a contemporary and cohesive visual language, enhancing the overall user experience.
Foundational Colors.
These are dark, low-contrast neutral colors strategically applied to cover substantial interface areas. Not only do they reduce display power consumption and alleviate eye fatigue, but they also enhance readability while directing visual attention to interactive elements.
Main Function Colors.
These colors serve to make interactive elements the central visual focus, ensuring an intuitive user experience. Drawing inspiration from the universe and planets, we've curated a selection of highly identifiable and saturated colors.
Feature colors.
This color, characterized as "Cosmic Bright Blue," is chosen for its high memorability and identifiability. It establishes a visual connection with operational behavior across varying distances, allowing users to swiftly focus on interactive elements at a glance.
Flexible.
Cross. Unite.
1
Flexible operational behaviors
2
Cross-unit control
3
Unite for inspiration
Uni UI aims to eliminate barriers between different equipment units, introducing a seamless and unrestricted cross-unit control experience. In contemporary meeting setups, individual units often operate independently, requiring a dedicated remote control for each unit during long-distance operations. This siloed approach results in inefficient connection and communication between equipment.
Uni UI offers a range of operational methods to accommodate diverse user needs across various meeting scenarios. Given that users often need to interact with equipment from different positions within a meeting room, Uni UI integrates operational behaviors at varying distances.
Uni UI addresses this challenge by creating a cross-unit control experience, enabling the mouse, remote control cursor, or pointer to move freely between units. This innovative design allows for the operation of multiple equipment units with a single controller, effectively breaking down the physical barriers between each unit and enhancing overall operational efficiency.
Uni UI extends equipment to establish a co-creative mode, unlocking limitless creative possibilities. Uni UI goes beyond the traditional role of displaying briefing content on meeting equipment; it plays a pivotal role for uniting participants in extensive co-creation endeavors.
Users can employ multi-touch interactions up close by standing in front of the equipment, utilize personal devices connected to meeting equipment with touchscreens at a mid-distance, or even operate equipment from a far distance using a remote control. This triad of operational modes empowers users to seamlessly and intuitively switch between operating methods based on their proximity to the equipment.
Leveraging the meeting equipment connecting function, panels seamlessly combine to create an expansive canvas where multiple users can collaboratively work together. The wireless projecting function facilitates the real-time sharing of ideas among various users in the same space, igniting dynamic discussions. This approach liberates creativity from the constraints of panel size, providing an environment where ideas can flourish unbounded.
Cursor of a mouse or remote control or pointer moving seamlessly between units
Interaction Design
Multiple operational behaviors based on user-screen distance
Visual Design
Transforming meetings into dynamic collaborative spaces for unbounded creativity
Define. Refine.
Redefine.
A substantial amount of time was dedicated to refining our design concepts through a thorough process of extensive prototyping and usability testing. This comprehensive testing included evaluations of interface operations across diverse devices and simulations of usage scenarios involving the integration of multiple devices.
These tests provided invaluable insights into the human factors and ergonomic aspects of the interfaces. Leveraging these findings, we strategically optimized the design of Uni UI, ensuring a user-centric and ergonomic experience that aligns seamlessly with the diverse needs of our users.
Prototyping & testing
The influence of users’ height on operational experience can be clearly seen.
Prototyping of multi-device scenarios with IFPs, digital signages and projectors.
What I
learned.
Takeaways
Engaging in this large-scale project has been a rich learning experience, emphasizing the significance of collaboration, open-mindedness, and the proactive sharing of ideas. Effectively managing the project by establishing priorities emerged as a crucial skill, aligning user priorities, project timelines, and business needs to reach consensus efficiently.
Furthermore, gaining insights into the implementation limitations across various platforms and devices has provided a valuable understanding. This knowledge empowers me to craft more feasible designs for future projects.
As Uni UI continues its iterative journey, incorporating new devices and functionalities, the focus remains on preserving the original objectives. The commitment to integrating diverse equipment with consistent operational behavior and a unified visual language underscores our dedication to delivering the smoothest user experience in meetings. Looking ahead, the ongoing evolution of Uni UI anticipates new heights of efficiency and innovation.