A talk from the Creator Track at AWE USA 2019 - the World's #1 XR Conference & Expo in Santa Clara, California May 29-31, 2019. Rokid: Design a seamless solution for AR glasses Qi Xiong | Rokid Paris Fan | Rokid Nan Wang | Rokid Gonglue Jiang | Rokid In this talk, we will discuss how Rokid creates a seamless AR experience from two aspects: ergonomic design(hardware) and systematic UI/UX design(software). The presentation will also share the insights of the entire product development cycle of Rokid Glass: from crafting product appearance with strict constraints, deploying user interfaces on a new and unique AR device, to the case studies and progressive design of real implementations. The talk offers a glimpse of the future AR design methodology by demonstrating the superpower enabled by design thinking. Rokid Glass is an AI-enabled, all-in-one AR glasses already in mass production, with seamless user experience which widely adopted by the industry. https://awexr.com

1. www.company.com
1
Do only
what you
love.
There are many variations of passages of
Big Daddy available, but the majority have
suffered alteration in some form, by injected
humour, or randomised words which don't
look even slightly believable. If you are going
to use a passage of Big Daddy.
AIDA
Design a seamless
solution for AR glasses

2. www.rokid.com
GONGLUE JIANG
Chief Designer

3. About Rokid
Established in July 2014, Rokid is based in
Hangzhou, China, with research centers in
Beijing and San Francisco. We are an
innovative technology company specializing
in Robotics, AI and AR. We aim to provide
superior user experience powered by AI
technology.

4. www.rokid.com
AI HCIx
Human-Computer Interaction

5. www.rokid.com
Command line

6. www.rokid.com
GUI

7. www.rokid.com
GUI + Touch

8. Voice

9. www.rokid.com
Vision

10. www.rokid.com
AI HCIx

11. www.rokid.com
Start from HCI

12. www.rokid.com
See what you see

13. www.rokid.com
Listen
Speak
See
Mixed Reality Sound
Effortless VUI
Ubiquitous GUI
Best position
for HCI

14. Face Recognition Voice Recognition

15. www.rokid.com
Head gazeTouchpad
XUI

16. www.rokid.com
We do AR is not because of AR.
We do AR because it’s the best carrier for
AI x HCI technology.

17. www.rokid.com
Industrial Design

18. www.rokid.com
Design DNA

19. www.rokid.com
Optics Design

20. www.rokid.com
Prototype

21. Streamlined

22. Slim

23. Sunglasses look

25. www.rokid.com
Unobtrusive

26. www.rokid.com
PARIS FAN
UX Researcher/Designer

27. Humongous hardware
Personalized wearables
No industrial standards or existing guidelines
www.rokid.com
Why Ergonomics

28. 579g
514g
345g
20-30g
Hololens
Pimax
MagicLeap
Sunglasses
370 gram (plus can) =
Weight.

29. VR/AR Faces
Significant red marks shown on forehead and both side of the noses
www.rokid.com
Image Source: https://twitter.com/jldtweets/status/734772296884183041
Image Source: https://www.kitguru.net/tech-news/featured-announcement/jon-
martindale/oculus-rift-virtual-reality-headset-full-review/5/

30. Understanding glasses
Understanding heads and faces
Combine
www.rokid.com
How to Solve it.

31. D
E
B. Angle between temple and rim
C. Temple length before curve
D. Back of the ear curvature
E. Temple arm end
A. Nosepad
A
B
C
Weight
Pressure
Points.

32. Cross-cultural Study
Captured both asian and caucasian heads
www.rokid.com

33. www.rokid.com
Asian
Caucasian
Head Shapes
Head shape varies between Asians and Caucasians
Image Source：https://www.sciencedirect.com/science/article/pii/S0003687010000335

34. Pupil
Nose vs
Pupil
Nose
Angle
Caucasian nose root the same /above pupils Measurement base for distance between
lenses and eyes
High nose root position
Nose
Bridge

35. Head
Width
Forehead vs
Pupil
Temple
Length
Glass width Pronounced forehead Between pupils and ear root

36. Bottom to Top View
Side View Combined
ergo
with
ID design

37. Glass Weight Measured
Imprint
in progress
Imprint 3D
Scanned
Nosepad Area
Captured
Step 1 Step 2 Step 3 Step 4
How much of the nose pads is really touching your nose?
www.rokid.com
Nosepad
Imprint.

38. Conclusion.

40. www.rokid.com
QI XIONG
Prototyper(AR/MR)

42. www.rokid.com
UranusUranus
/ˈuːʀanʊs/
A toolkit
to bring automate to the ergonomics for head-mounted wearable design:
•Average Face Generator
•Face Structure Analysis
•Section Analysis
•Data Organization

43. The Average Face
Image credits: Jeroen van der Most

44. www.rokid.com
SCANNING RESULT STRUCTURAL ANALYSIS RECONSTRUCTION

45. www.rokid.com
SCANNING RESULT STRUCTURAL ANALYSIS RECONSTRUCTION

46. www.rokid.com

47. www.rokid.com
Pupillary Distance
Head Width
Pupil to Forehead
Pupil to Nose
Layer 1-1
Layer 2-2
MAPPING FROM 2D TO 3D

48. www.rokid.com
SCANNING RESULT STRUCTURAL ANALYSIS RECONSTRUCTION

49. Raw Data Structure Intersection Regression Result

50. Raw Data Structure Intersection Regression Result

51. www.rokid.com
SCANNING RESULT STRUCTURAL ANALYSIS RECONSTRUCTION

52. www.rokid.com

53. www.rokid.com

54. www.rokid.com

55. www.rokid.com
CHUQING SHAO
UX Designer
NAN WANG
Senior UX Designer

56. XUI X HALO Guidelines

57. www.rokid.com
A Platform.

58. Interaction FeedbackUser InputPhysical Space

59. Floor
Tabletops
Lights
Physical Space

60. Voice Commands
Controller
Gesture
Gaze
Phone
User Input

61. 3D Elements
3D Icon
3D Character
3D Environment
3D Video
2D Elements
2D Icon
Text
Image
Video
Sound
Guide tone
Feedback tone
Dialog
Music
Interaction Feedback

62. Table of Elements.
Interaction FeedbackUser InputPhysical Space
Lights
Tabletops
Controller
Gesture
Floor Gaze
Voice Commands
Phone
3D Elements
3D Icon
3D Character
3D Environment
3D Video
2D Elements
2D Icon
Text
Image
Video
Sound
Guide tone
Feedback tone
Dialog
Music
www.rokid.com

63. Concept Interaction UISpatial Design
www.rokid.com
Interaction FeedbackUser InputPhysical Space

64. Launcher
Brainstorming
Launcher
Version 1
Launcher
Version 2
www.rokid.com
Launcher
Version 3

65. www.rokid.com
Halo XUI
Launcher
Brainstorming
Launcher
Version 1
Launcher
Version 2
Launcher
Version 3

67. Design principle

68. Exploration

69. Design Principle
Large area of solid color is not allowed
www.rokid.com

70. Design Principle
The light of the element comes from the element itself
www.rokid.com

71. Apply Halo to UI

73. Color System
The retrofuturism color style

74. Color Distortion
www.rokid.com

75. Color Choices
www.rokid.com

76. Color Choices
www.rokid.com

77. Color Choices
www.rokid.com

78. Color Choices
Two high-contrast colors
One color is approximately 120º of another
color on the color wheel
Color 1
Color 2
www.rokid.com

79. www.rokid.com
Recommended color theme 1- Mojito

80. www.rokid.com
Recommended color theme 1- Mojito

81. www.rokid.com
Recommended color themes
Color theme 1- Mojito
Color theme 2- Dolly
Color theme 3- Twilight
Color theme 4- Lemonade
Color theme 5- Sunset

82. Retrofuturism
Halo XUI