UI UX Design | Web Development
Rokid Halo XUI Design Guidelines
A UI/UX design system for AR platform
My Role
- UX Designer
- Web Developer
- Proposed XUI design concepts and samples, involved in the whole process from ideation, research and testing, to definition, developed the reusable HTML, CSS, Js library for the Halo XUI Design guideline website.
Tools
- Sketch
- Illustrator
- Sublime Text
- Browsers
- JavaScripts
Time
- May 2018 - present
Ideation
We started brainstorming from the three perspectives: environment, user input and UI elements.
The design guideline was categorized into 4 sessions which are concept, spatial design, interaction, UI based on the above perspectives.
Exploration and Testing
We explored and created multiple versions of different graphic design style, and had them tested on the Rokid Glass. This was to figure out the best design style for the display capability of the Rokid Glass.
After that, we designed questionnairs and conducted internal survey to collect feedbacks.
The following are examples of the explorations.
Halo Design Principle
Based on the exploration, testing and findings, we ended up with these keywords as inspiration: universe, galaxy, futuristic. We also concluded the following main design principle.
Firstly, outlined style is highly recommended. As the UI elements are overlay with the real world, this design can avoid blocking users' sight. It can also help save power.
Secondly, in order to avoid conflicting with real world light source, we should avoid adding dirctional light source to the design, but let the elements light themselves up instead.
Thirdly, we defined a set of retrofuturism color themes for recommendation.
Web Development
We create this design guidelines for the design and development of Rokid’s AR product, but most importantly, we hope to contribute our research findings to the community and help the designers in AR grow faster. So, I developed a website to document the guideline, which has been published in July 2019. Project URL: http://glass.rokid.com/design-guideline