1 year, May 2018
The Lead Designer
Sketch C4D AE
Gonglue Jiang, Padi, Qi Xiong, Xin Fan
Established in July 2014, Rokid is an innovative technology company specializing in AR and AI.
In this project, I led a small team to build Halo XUI design system. It's a product can create a more streamlined, predictable process that reduces design and engineering time. It helps deliver consistency and predictability in the interface, and to raise the quality of experience overall when designers and engineers are freed up to think about higher-order task.
In this project, I've been thinking about how to provide an intuitive AR experience for users and exploring the convergence of different interactions. Considering the long project duration. I want to choose our 2 challenges to discuss this project:
What kind of visual experience works for AR scenarios?
The design reform from 2D planar interface to 3D spatial interface.
How to cope with the visual impact of optical distortion?
Except for hardware calibration, how to reduce distortions by design methods?
When we started developing Rokid Glass, we thought that a new medium brings new design possibilities, methods, and experiences. Base on this, we try to explore more while testing and accumulating the design. For the above 2 design challenges, we've made some attempts:
Whenever we designed posters, websites, or app screens, we put contents into a defined frame (artboard) was a constant for every problem. Content is external to us. But such a design approach didn't work well on our Glass. AR Glass eliminates the frame, so you are within the content space, looking and walking through the content from inside-out.
We need to take more into consideration when designing 3D interface due to its special properties different from 2D interface, including:
The integration between information and environment
In the process of experimenting with design styles, we formulated a set of design specifications in line with Rokid Glass to summarize the problems we met, namely, Halo Design Guidelines.
Three most important design principles are:
I .Don’t block users’ view.
In our tests, we found that large-area color blocks or large-sized components would block user's view, making users very inconvenient on the move.
Given this, we designed an outline design style that allows user can seethrough contents. HALO, it's a light effect of the element comes from the element itself. Halo is always used to highlight selected items or emphasis important information.
Halo allows users to observe the environment around them while interacting with the Glass and enable information to communicate more effectively.
HALO Style Assets
Icons & Buttons
HALO Style Apply on Interface
II. Increase Z-Axis Space to create immersion experience
Unlike other devices, contents on AR interface are likely to "cross over the screen" and integrate with the real world.
In the AR game 'ASSAULT' we emphasized the z-axis depth and volumetric elements so that the virtual interface can be more integrated into the real environment.
Assault is a multiplayer, room-scale game. It was designed in the way of demonstrating the products' capabilities of tracking, display, and interaction with minimal user input.
III. Objects light themselves
Different from 2D interface, AR interface is affected by ambient light sources. If adopting a unified light source, the virtual light source will conflict with the real-world light source. To solve this problem, we avoid using a single light source on UI, and all elements light themselves up.
AR Web (Unity)
AR Web is a web-based solution for building augmented reality experiences on Rokid Vision device. User can seamlessly move from 2D web to web-based AR experience.
AR Web (Video Recording)
The AR Web showcases the company's product line and allows the viewer to look around, read, and play with the products in AR.
When designing website and apps, designers need to consider the screen density and size ratio. But for the optical lens display, designers should also consider the optical color distortion, the color difference between the design prototype (on the computer screen) and the glass display, the effect of fusion of the virtual and real environment, and the ambient brightness.
RGB pixel arrangement
RGB pixel arrangement
Optical chromatic aberration is a ubiquitous issue for the majority of AR glasses. Rokid Glass used oled+Free Form optical solution. It has three unevenly distributed RGB sub-pixels and specifically emphasized blue sub-pixel.
Display Color Evaluation
In our tests, we found two problems that were caused by the way of pixel arrangement:
a. On the glass, the color will look lighter than it should be.
b. Color cast exists at certain angles, especially in red and green.
To solve this problem, we designed a color system suitable for Glass display and also created "the sense of unrealism" - Retro-futurism color system.
Generally, colors of optical display are brighter and tending toward white. Thus, to create clearer colors, we selected 6 colors with hue of 0, 60, 120, 180, 240, 300, 360 in HSV color model. All 6 colors have full saturation and full value.
Next, we use these 6 key colors to generate color palette. To reduce color cast, 2 colors with 120 degrees' interval were paired mixed to create 5 theme gradients and theme lightings.
Here, I take Theme 2 as an example to show how to generate theme colors and lightings.
5 Theme Colors and Lightings.
In the fierce industry competition, Rokid Glass has a good reputation in AR industry. Rokid ranked 11th on Digi-Capital’s smart glass ranking list.
Sale and Partnership
Rokid Glass is in mass production and it has been sold to enterprise clients and partners in the industry such as medical, aircraft，manufacturers, mining, security, etc.
While developing the products, we actively exchanged the design concepts and experiences of Rokid in the design field. Online, we announced the online version of the AR design guideline. Offline, we participated in international exhibitions and conferences such as CES, AWE, IxDC.