2020 – 2024
XR Framework Design & Guidelines
I build infrastructure to support XR creators. I carried out extensive academic research of XR design principles and XR market. Based on the research, I designed open-source spatial user interface and created XR guidelines for people to help them create stunning apps. Also, I created concept of XR product, that would be powered by the interface natively.
#1 Google result for “Smartglasses UI” phrase
Bachelor, Diploma and Dissertation Thesis
Extensive research of XR industry
Design of open-source XR interface
Disciplines
Market & UX Research
Human-Computer Interaction
UX/UI Design
Interaction Design
Emotional Design
Timeline
4 years
2020 – 2024 (ongoing)
Team
Self-directed project (Design, Research, Business)
College supervisors
Platforms
Headset
Disciplines
Market & UX Research
Human-Computer Interaction
UX/UI Design
Interaction Design
Emotional Design
Timeline
4 years
2020 – 2024 (ongoing)
Team
Self-directed project (Design, Research, Business)
College supervisors
Platforms
Headset
Disciplines
Market & UX Research
Human-Computer Interaction
UX/UI Design
Interaction Design
Emotional Design
Timeline
4 years
2020 – 2024 (ongoing)
Team
Self-directed project (Design, Research, Business)
College supervisors
Platforms
Headset
Challenges
Raw XR Interfaces
Most of nowadays 3rd party spatial UIs are not good. They work, but usually lack visual and interaction qualities. Here I see an opportunity to design (and then develop) an interface with high UX qualities. My goal is to build a framework that can help creators design and develop spatial apps.
Raw XR Interfaces
Most of nowadays 3rd party spatial UIs are not good. They work, but usually lack visual and interaction qualities. Here I see an opportunity to design (and then develop) an interface with high UX qualities. My goal is to build a framework that can help creators design and develop spatial apps.
Raw XR Interfaces
Most of nowadays 3rd party spatial UIs are not good. They work, but usually lack visual and interaction qualities. Here I see an opportunity to design (and then develop) an interface with high UX qualities. My goal is to build a framework that can help creators design and develop spatial apps.
Lack of XR Education
Most of current XR manuals are either device specific or non-existing. My goal is to teach designers how to apply their 2D skills in 3D environments.
Lack of XR Education
Most of current XR manuals are either device specific or non-existing. My goal is to teach designers how to apply their 2D skills in 3D environments.
Lack of XR Education
Most of current XR manuals are either device specific or non-existing. My goal is to teach designers how to apply their 2D skills in 3D environments.
Thesis Topic
I combined my study duties with my interest in XR field. For my Bachelor thesis in economy, I focused on market research of XR field. For my Diploma in design, I focused on XR design and development. Now, I focus on education and the design principles in detail for my Dissertation.
Thesis Topic
I combined my study duties with my interest in XR field. For my Bachelor thesis in economy, I focused on market research of XR field. For my Diploma in design, I focused on XR design and development. Now, I focus on education and the design principles in detail for my Dissertation.
Thesis Topic
I combined my study duties with my interest in XR field. For my Bachelor thesis in economy, I focused on market research of XR field. For my Diploma in design, I focused on XR design and development. Now, I focus on education and the design principles in detail for my Dissertation.
Research of XR Industry
Map of XR Devices
I analysed 40+ XR devices and their manufacturers. As a result, I created summary of their approaches to hardware and software (I provide details in the following sections).
Based on specific criteria I selected relevant devices for further research. Based on availability I selected devices for hands-on experience and some of them for following purchase.
Map of XR Devices
I analysed 40+ XR devices and their manufacturers. As a result, I created summary of their approaches to hardware and software (I provide details in the following sections).
Based on specific criteria I selected relevant devices for further research. Based on availability I selected devices for hands-on experience and some of them for following purchase.
Map of XR Devices
I analysed 40+ XR devices and their manufacturers. As a result, I created summary of their approaches to hardware and software (I provide details in the following sections).
Based on specific criteria I selected relevant devices for further research. Based on availability I selected devices for hands-on experience and some of them for following purchase.
Hardware Possibilities
I described interaction possibilities of the XR devices. Due to my focus on UI, I analysed mostly input and output methods. The outcomes helped me for the following UI design. To evaluate graphic possibilities of displays, I created a colour palette to observe in headset.
Hardware Possibilities
I described interaction possibilities of the XR devices. Due to my focus on UI, I analysed mostly input and output methods. The outcomes helped me for the following UI design. To evaluate graphic possibilities of displays, I created a colour palette to observe in headset.
Hardware Possibilities
I described interaction possibilities of the XR devices. Due to my focus on UI, I analysed mostly input and output methods. The outcomes helped me for the following UI design. To evaluate graphic possibilities of displays, I created a colour palette to observe in headset.
Software Features
I mapped functions and apps available on the XR devices. The outcomes helped estimate user needs, define list of default functions, and uncover design approaches of the apps nested in OS.
Software Features
I mapped functions and apps available on the XR devices. The outcomes helped estimate user needs, define list of default functions, and uncover design approaches of the apps nested in OS.
Software Features
I mapped functions and apps available on the XR devices. The outcomes helped estimate user needs, define list of default functions, and uncover design approaches of the apps nested in OS.
Target Audience
Through desk research, I analysed XR creators’ most used XR tools, UI components and asset stores and through primary research I experienced XR development. It helped me understand behaviour of XR creators and define target audiences, their workflow, and properly deliver my upcoming outcomes.
Target Audience
Through desk research, I analysed XR creators’ most used XR tools, UI components and asset stores and through primary research I experienced XR development. It helped me understand behaviour of XR creators and define target audiences, their workflow, and properly deliver my upcoming outcomes.
Target Audience
Through desk research, I analysed XR creators’ most used XR tools, UI components and asset stores and through primary research I experienced XR development. It helped me understand behaviour of XR creators and define target audiences, their workflow, and properly deliver my upcoming outcomes.
Asset for display testing
Test of device interactions
Frequent UI components
XR development in Unity
UX Research
History of Interfaces
When I design for future I prefer to learn from past. I have hypothesis, that the key is to understand evolution of user experience across devices.
Therefore, I analysed core UI principles of PCs, Phones and Watches. I focused on their Information architecture, Input methods and Default apps. The outcomes helped me determine the principles that should be maintained in XR UI.
History of Interfaces
When I design for future I prefer to learn from past. I have hypothesis, that the key is to understand evolution of user experience across devices.
Therefore, I analysed core UI principles of PCs, Phones and Watches. I focused on their Information architecture, Input methods and Default apps. The outcomes helped me determine the principles that should be maintained in XR UI.
History of Interfaces
When I design for future I prefer to learn from past. I have hypothesis, that the key is to understand evolution of user experience across devices.
Therefore, I analysed core UI principles of PCs, Phones and Watches. I focused on their Information architecture, Input methods and Default apps. The outcomes helped me determine the principles that should be maintained in XR UI.
Nowadays User Needs
One day, XR devices might be worn like eyeglasses. Until then, their closest relatives would be Phones and Watches. Through primary and secondary research, I analysed their most used features. The outcomes helped me to estimate future features of XR devices, that might replace our current Phones or (more likely) Watches.
Nowadays User Needs
One day, XR devices might be worn like eyeglasses. Until then, their closest relatives would be Phones and Watches. Through primary and secondary research, I analysed their most used features. The outcomes helped me to estimate future features of XR devices, that might replace our current Phones or (more likely) Watches.
Nowadays User Needs
One day, XR devices might be worn like eyeglasses. Until then, their closest relatives would be Phones and Watches. Through primary and secondary research, I analysed their most used features. The outcomes helped me to estimate future features of XR devices, that might replace our current Phones or (more likely) Watches.
Design Principles
To acquire proper knowledge of XR design principles I studied several theses and XR corporate manuals (Microsoft, Magic Leap, etc.). I continuously summarized my findings and created 100 pages PDF of short design tips. The outcomes helped me to understand UX design principles for XR.
Design Principles
To acquire proper knowledge of XR design principles I studied several theses and XR corporate manuals (Microsoft, Magic Leap, etc.). I continuously summarized my findings and created 100 pages PDF of short design tips. The outcomes helped me to understand UX design principles for XR.
Design Principles
To acquire proper knowledge of XR design principles I studied several theses and XR corporate manuals (Microsoft, Magic Leap, etc.). I continuously summarized my findings and created 100 pages PDF of short design tips. The outcomes helped me to understand UX design principles for XR.
UI Approaches
Through desk research and device testing, I studied UIs of the XR devices. I focused on visual design, interaction design and overall UX. The outcomes supplemented the previous research, exposed quality of UIs in XR, and helped me in the following UX design.
I also analysed the Skeuomorphic theory, which once helped users to adapt a new technology.
UI Approaches
Through desk research and device testing, I studied UIs of the XR devices. I focused on visual design, interaction design and overall UX. The outcomes supplemented the previous research, exposed quality of UIs in XR, and helped me in the following UX design.
I also analysed the Skeuomorphic theory, which once helped users to adapt a new technology.
UI Approaches
Through desk research and device testing, I studied UIs of the XR devices. I focused on visual design, interaction design and overall UX. The outcomes supplemented the previous research, exposed quality of UIs in XR, and helped me in the following UX design.
I also analysed the Skeuomorphic theory, which once helped users to adapt a new technology.
Vision Testing
To supplement my desk research, I carried out an experiment to test users’ view zones. I built special eyeglasses and marked several spots at each of the lenses, that I observed. Through this experiment I tested monocular and binocular vision, focus distance, and visibility in peripheral areas. The outcomes helped me set up a map of accessible areas for an eye.
Vision Testing
To supplement my desk research, I carried out an experiment to test users’ view zones. I built special eyeglasses and marked several spots at each of the lenses, that I observed. Through this experiment I tested monocular and binocular vision, focus distance, and visibility in peripheral areas. The outcomes helped me set up a map of accessible areas for an eye.
Vision Testing
To supplement my desk research, I carried out an experiment to test users’ view zones. I built special eyeglasses and marked several spots at each of the lenses, that I observed. Through this experiment I tested monocular and binocular vision, focus distance, and visibility in peripheral areas. The outcomes helped me set up a map of accessible areas for an eye.
Custom eyeglasses for the experiment
A pick of results from the vision experiment
Summary of interactions
Interface Design
Strategy
Based on my research, I decided to create open-source XR Design System, that is going to power the XR Framework. Although I have significant interface design knowledge, I created the first iteration very simple and visual.
I created the Design System as free interactive prototype in Figma, that is available as free UI Kit for rapid prototyping. Also, I created simplified version of the UI for light XR devices.
Strategy
Based on my research, I decided to create open-source XR Design System, that is going to power the XR Framework. Although I have significant interface design knowledge, I created the first iteration very simple and visual.
I created the Design System as free interactive prototype in Figma, that is available as free UI Kit for rapid prototyping. Also, I created simplified version of the UI for light XR devices.
Strategy
Based on my research, I decided to create open-source XR Design System, that is going to power the XR Framework. Although I have significant interface design knowledge, I created the first iteration very simple and visual.
I created the Design System as free interactive prototype in Figma, that is available as free UI Kit for rapid prototyping. Also, I created simplified version of the UI for light XR devices.
Foundations
I designed two style sets. Primary for the interface and Secondary for educational purposes (design guidelines). The goal was to crate playful visual style that supports “magic” features of spatial experiences.
The primary set contains various shades of greys, of state colours, and of system colours. Also, it consists of typography, effects, radiuses, etc. The secondary set is similar, but it contains vibrant colour palette, that can merge into holographic gradients.
Foundations
I designed two style sets. Primary for the interface and Secondary for educational purposes (design guidelines). The goal was to crate playful visual style that supports “magic” features of spatial experiences.
The primary set contains various shades of greys, of state colours, and of system colours. Also, it consists of typography, effects, radiuses, etc. The secondary set is similar, but it contains vibrant colour palette, that can merge into holographic gradients.
Foundations
I designed two style sets. Primary for the interface and Secondary for educational purposes (design guidelines). The goal was to crate playful visual style that supports “magic” features of spatial experiences.
The primary set contains various shades of greys, of state colours, and of system colours. Also, it consists of typography, effects, radiuses, etc. The secondary set is similar, but it contains vibrant colour palette, that can merge into holographic gradients.
UI Elements
I defined the most frequent UI elements and designed first iteration of buttons, menus and containers. I focused on application of Jakob’s Law (to maintain familiar principles), and relationship of the UI with the surroundings (to enhance visibility). To support performance, I created the elements flat and utilized depth by elements’ elevation.
UI Elements
I defined the most frequent UI elements and designed first iteration of buttons, menus and containers. I focused on application of Jakob’s Law (to maintain familiar principles), and relationship of the UI with the surroundings (to enhance visibility). To support performance, I created the elements flat and utilized depth by elements’ elevation.
UI Elements
I defined the most frequent UI elements and designed first iteration of buttons, menus and containers. I focused on application of Jakob’s Law (to maintain familiar principles), and relationship of the UI with the surroundings (to enhance visibility). To support performance, I created the elements flat and utilized depth by elements’ elevation.
Interaction Design
For standard UI elements I used classic 2D patterns enhanced with 3D motion and sound. For specific immersive elements, I designed selections by popping (because simulation of bubble popping reduces haptic feedback expectations).
Interaction Design
For standard UI elements I used classic 2D patterns enhanced with 3D motion and sound. For specific immersive elements, I designed selections by popping (because simulation of bubble popping reduces haptic feedback expectations).
Interaction Design
For standard UI elements I used classic 2D patterns enhanced with 3D motion and sound. For specific immersive elements, I designed selections by popping (because simulation of bubble popping reduces haptic feedback expectations).
Lite Version Concept
To support XR devices with less computing power (e.g. AR Smart Glasses) I created a flat version of the UI. The interface uses display to passively show notifications and status information (plain UI projection on glasses’ lens without spatial awareness).
The layout contains two accessible areas (just like the spatial UI). Primary area, that displays status information, and secondary customizable area, that displays selected widgets. Optional interactions are either device-specific or smartphone based (widgets and customizations).
Lite Version Concept
To support XR devices with less computing power (e.g. AR Smart Glasses) I created a flat version of the UI. The interface uses display to passively show notifications and status information (plain UI projection on glasses’ lens without spatial awareness).
The layout contains two accessible areas (just like the spatial UI). Primary area, that displays status information, and secondary customizable area, that displays selected widgets. Optional interactions are either device-specific or smartphone based (widgets and customizations).
Lite Version Concept
To support XR devices with less computing power (e.g. AR Smart Glasses) I created a flat version of the UI. The interface uses display to passively show notifications and status information (plain UI projection on glasses’ lens without spatial awareness).
The layout contains two accessible areas (just like the spatial UI). Primary area, that displays status information, and secondary customizable area, that displays selected widgets. Optional interactions are either device-specific or smartphone based (widgets and customizations).
Foundations
Backplates Concepts
UI Kit for Figma
Visualization of Interactions
Lite Version: Layouts
Lite Version: Visual Concept
Product Design
Definition of Features
I defined a set of features & default apps for a basic XR device. I described possible the features of these apps and their incorporation to device’s ecosystem. They are sorted to apps with XR usage (Maps, Scanner, Meetings, Driving, Weather, etc.) and apps without specific XR usage (Calling, Mail, Music, …).
Definition of Features
I defined a set of features & default apps for a basic XR device. I described possible the features of these apps and their incorporation to device’s ecosystem. They are sorted to apps with XR usage (Maps, Scanner, Meetings, Driving, Weather, etc.) and apps without specific XR usage (Calling, Mail, Music, …).
Definition of Features
I defined a set of features & default apps for a basic XR device. I described possible the features of these apps and their incorporation to device’s ecosystem. They are sorted to apps with XR usage (Maps, Scanner, Meetings, Driving, Weather, etc.) and apps without specific XR usage (Calling, Mail, Music, …).
Definition of Inputs
I defined a suitable set of input methods for a basic XR device (hand gestures, eyes, voice, buttons, controllers, touchpad gestures, etc). I focused on backwards compatibility and natural interaction models. I also defined a Phone Companion app to substitute optional hardware inputs.
Definition of Inputs
I defined a suitable set of input methods for a basic XR device (hand gestures, eyes, voice, buttons, controllers, touchpad gestures, etc). I focused on backwards compatibility and natural interaction models. I also defined a Phone Companion app to substitute optional hardware inputs.
Definition of Inputs
I defined a suitable set of input methods for a basic XR device (hand gestures, eyes, voice, buttons, controllers, touchpad gestures, etc). I focused on backwards compatibility and natural interaction models. I also defined a Phone Companion app to substitute optional hardware inputs.
Device Concept
I created very raw concepts of a basic XR device. I described its hardware features, that enable interaction with the oncoming user interface (cameras, sensors, buttons, etc.).
Then I illustrated a potential look of the device (without focus on feasibility). The visual concept enhances the scheme and responds to various issues from the research (social acceptance, privacy factor, etc.).
Device Concept
I created very raw concepts of a basic XR device. I described its hardware features, that enable interaction with the oncoming user interface (cameras, sensors, buttons, etc.).
Then I illustrated a potential look of the device (without focus on feasibility). The visual concept enhances the scheme and responds to various issues from the research (social acceptance, privacy factor, etc.).
Device Concept
I created very raw concepts of a basic XR device. I described its hardware features, that enable interaction with the oncoming user interface (cameras, sensors, buttons, etc.).
Then I illustrated a potential look of the device (without focus on feasibility). The visual concept enhances the scheme and responds to various issues from the research (social acceptance, privacy factor, etc.).
Information Architecture Concept
I designed the area of wrist and forearm to display status information, settings, and widgets. This on-body placement provides haptic feedback and good accessibility (due to the habit of looking at the watch).
I designed the whole environment to display windows, widgets and immersive experiences. The user can customize each room of his home and set default actions.
Information Architecture Concept
I designed the area of wrist and forearm to display status information, settings, and widgets. This on-body placement provides haptic feedback and good accessibility (due to the habit of looking at the watch).
I designed the whole environment to display windows, widgets and immersive experiences. The user can customize each room of his home and set default actions.
Information Architecture Concept
I designed the area of wrist and forearm to display status information, settings, and widgets. This on-body placement provides haptic feedback and good accessibility (due to the habit of looking at the watch).
I designed the whole environment to display windows, widgets and immersive experiences. The user can customize each room of his home and set default actions.
Scheme of the device
Visual concepts of the device
Control Centre
Guidelines Creation
Research
I analysed learning paths of Designers & Developers using Desk research, Expert interviews and Focus groups. The outcomes helped me create and deliver suitable XR guidelines in form of text-based design tips.
Research
I analysed learning paths of Designers & Developers using Desk research, Expert interviews and Focus groups. The outcomes helped me create and deliver suitable XR guidelines in form of text-based design tips.
Research
I analysed learning paths of Designers & Developers using Desk research, Expert interviews and Focus groups. The outcomes helped me create and deliver suitable XR guidelines in form of text-based design tips.
Beginners’ Guide
To help beginners, I created a small brochure – an introduction to XR industry. It presents XR terms and definitions (e.g. types of realities or devices) and selection of basic XR patterns (e.g. types of content placement).
Beginners’ Guide
To help beginners, I created a small brochure – an introduction to XR industry. It presents XR terms and definitions (e.g. types of realities or devices) and selection of basic XR patterns (e.g. types of content placement).
Beginners’ Guide
To help beginners, I created a small brochure – an introduction to XR industry. It presents XR terms and definitions (e.g. types of realities or devices) and selection of basic XR patterns (e.g. types of content placement).
Professional’s Guide
To help intermediate designers, I created XR Guidelines. They contain all the XR design patterns, I researched, in simplified form. I present them at social networks as short design tips. Also, I created an online knowledgebase to unify them at one special place.
Professional’s Guide
To help intermediate designers, I created XR Guidelines. They contain all the XR design patterns, I researched, in simplified form. I present them at social networks as short design tips. Also, I created an online knowledgebase to unify them at one special place.
Professional’s Guide
To help intermediate designers, I created XR Guidelines. They contain all the XR design patterns, I researched, in simplified form. I present them at social networks as short design tips. Also, I created an online knowledgebase to unify them at one special place.
Beginner's Guide
Professional’s Guide
Website with XR guidelines
Results
Outcomes
I carried out vast academic research of XR industry, that I have utilized for design of XR interface. Based on my research, I have created open-source concept XR device, its features, Design System to power XR devices, Figma UI Kit and XR Guidelines for designers. All these outcomes are the first iterations, that I further develop.
Outcomes
I carried out vast academic research of XR industry, that I have utilized for design of XR interface. Based on my research, I have created open-source concept XR device, its features, Design System to power XR devices, Figma UI Kit and XR Guidelines for designers. All these outcomes are the first iterations, that I further develop.
Outcomes
I carried out vast academic research of XR industry, that I have utilized for design of XR interface. Based on my research, I have created open-source concept XR device, its features, Design System to power XR devices, Figma UI Kit and XR Guidelines for designers. All these outcomes are the first iterations, that I further develop.
Expert Network
I have assembled large network of XR experts. I collaborate with local XR studios (one of them is #2 XR studio in the world). Except central Europe, I maintain good relations with foreign specialists, especially in Tel Aviv, Israel.
Expert Network
I have assembled large network of XR experts. I collaborate with local XR studios (one of them is #2 XR studio in the world). Except central Europe, I maintain good relations with foreign specialists, especially in Tel Aviv, Israel.
Expert Network
I have assembled large network of XR experts. I collaborate with local XR studios (one of them is #2 XR studio in the world). Except central Europe, I maintain good relations with foreign specialists, especially in Tel Aviv, Israel.
University Responses
Apart from my successful defences, my work made an impact at management of the university. They appreciated my thesis, and I represented my university at local or foreign venues. Based on my works, the university purchased dozens of headsets, opened XR lab and established a Virtual gallery.
University Responses
Apart from my successful defences, my work made an impact at management of the university. They appreciated my thesis, and I represented my university at local or foreign venues. Based on my works, the university purchased dozens of headsets, opened XR lab and established a Virtual gallery.
University Responses
Apart from my successful defences, my work made an impact at management of the university. They appreciated my thesis, and I represented my university at local or foreign venues. Based on my works, the university purchased dozens of headsets, opened XR lab and established a Virtual gallery.
Future
Until the end of the year, I am going to finish the UI design, code a prototype of the UI Kit and test it. When the prototype proves its value, I am going to look for an investor and partner to scale this project up.
For now, my goal is to create a framework for building of XR interfaces, but one day I would like to build an XR operating system.
Future
Until the end of the year, I am going to finish the UI design, code a prototype of the UI Kit and test it. When the prototype proves its value, I am going to look for an investor and partner to scale this project up.
For now, my goal is to create a framework for building of XR interfaces, but one day I would like to build an XR operating system.
Future
Until the end of the year, I am going to finish the UI design, code a prototype of the UI Kit and test it. When the prototype proves its value, I am going to look for an investor and partner to scale this project up.
For now, my goal is to create a framework for building of XR interfaces, but one day I would like to build an XR operating system.
Personal Gains
Achievements
Thanks to this project, I got knowledge of XR industry, expanded design skills and learned about my target audiences. Besides I fell in love with XR. I am excited by the unexplored possibilities of design in XR, and I like to create innovations. Work on this project allows me to do both.
Achievements
Thanks to this project, I got knowledge of XR industry, expanded design skills and learned about my target audiences. Besides I fell in love with XR. I am excited by the unexplored possibilities of design in XR, and I like to create innovations. Work on this project allows me to do both.
Achievements
Thanks to this project, I got knowledge of XR industry, expanded design skills and learned about my target audiences. Besides I fell in love with XR. I am excited by the unexplored possibilities of design in XR, and I like to create innovations. Work on this project allows me to do both.
Lessons Learned
In the early phases of the UI design, I underutilized XR capabilities. According to Jakob’s Law, I used to apply classic patterns to spatial layouts. However, XR is totally different platform, and I missed many good innovations this way. Now I allow myself to think out of the box while respecting classic patterns at the specific places.
Lessons Learned
In the early phases of the UI design, I underutilized XR capabilities. According to Jakob’s Law, I used to apply classic patterns to spatial layouts. However, XR is totally different platform, and I missed many good innovations this way. Now I allow myself to think out of the box while respecting classic patterns at the specific places.
Lessons Learned
In the early phases of the UI design, I underutilized XR capabilities. According to Jakob’s Law, I used to apply classic patterns to spatial layouts. However, XR is totally different platform, and I missed many good innovations this way. Now I allow myself to think out of the box while respecting classic patterns at the specific places.
Born in 1996 in Czechia, open minded and communicative. Vintage technology enthusiast. Bachelor of Economics and Master of Arts.
Emerged from graphic design, marketing communications and StartUp leading to find himself in Product Design.
Wanna know more? See the Resume or let’s chat!
Designed & Coded by Robert in Czechia