INDEPENDENT PROJECT
Figma XR Mode
Oct - Dec 2023
A redesign of Figma. Streamlines XR UI/UX design, prototyping, and testing processes using both new and existing Figma features.
Topic
Redesign
UI/UX
XR
Role
Researcher
UI/UX Designer
Tools Used
Figma
Illustrator
Photoshop
OVERVIEW
Background
In the past couple of years, I’ve had the privilege of working on XR projects for Fidelity Investments, NASA SUITS, Seerslab, and Mondo XR. For me, this experience not only revealed the potential of the XR industry, but also significant shortcomings in current XR design processes. Recognizing these gaps, I took the initiative to develop a UX strategy project aimed at addressing these challenges.
Design Preview
Build 3D environments without extensive modeling experience.
Take your Figma components with you into the XR world.
View and test your XR prototypes in XR.
RESEARCH
Stakeholder Interviews
PAIN POINT 1
No Industry Standard
UIUX design in the XR industry hasn't been explored enought for there to be an industry standard.
PAIN POINT 2
Inefficient Prototyping
Current designing + protoyping tools for XR environments are not sufficient for XR UIUX designers to use.
PAIN POINT 3
Lack of Experts
There aren't many UIUX designers who specialize in the emerging tech industry right now.
User Interviews
PAIN POINT 1
Inefficient Tools
2D design software are not suitable for 3D environments, and game engines are overwhelming to use just for design.
PAIN POINT 2
Inefficient User Testing
2D prototypes are difficult to test with, and functional prototypes take too long to build + deploy
PAIN POINT 3
Design + Dev Communication
There is a big gap between the design and development processes.
INSIGHTS
User Stories
XR Companies
As
Leaders in the XR industry
we need
Industry-standard design tools for XR UIUX designers
so that we can
Improve our products + prove the potential of our industry.
XR UIUX Designers
As
XR UIUX designers
we need
Industry-standard design tools for prototyping and testing in 3D
so that we can
Streamline communication with development and get faster feedback from users.
How might we...
Create an industry-standard XR design tool for XR UI/UX designers?
Strategy
Design Principles
DESIGN PRINCIPLE 1
Familiar
DESIGN PRINCIPLE 2
Versatile
DESIGN PRINCIPLE 3
Compatible
FINAL PRODUCT
Design Solution: Figma XR Mode
3D Background
Build 3D environments without extensive modeling experience.
Convert regular 3D images into spherical panoramas to view them in 3D space.
3D Tools
Create simple 3D shapes for blocking.
Model simple 3D forms to block out 3D asset placement.
Import UI
Import flat UI components…
Bring your UI design components into 3D view.
Transform UI
Then transform them in the 3D space!
Change the tilt angle and curvature of your flat UI designs.
3D Tools
See your XR prototypes… in XR!
Check and test your 3D designs on your phone in cardboard VR.
TESTING
User Testing
TAKEAWAYS
This project is particularly dear to me because it sprang from my personal pain points working as a UIUX designer in XR. It was really great to see that other designers in this space felt the need for a standardized XR design tool too!
Special thanks to:
Ben Spear
INDEPENDENT PROJECT
Figma XR Mode
Oct - Dec 2023
A redesign of Figma. Streamlines XR UI/UX design, prototyping, and testing processes using both new and existing Figma features.
Topic
Redesign
UI/UX
XR
Role
Researcher
UI/UX Designer
Tools Used
Figma
Illustrator
Photoshop
OVERVIEW
Background
In the past couple of years, I’ve had the privilege of working on XR projects for Fidelity Investments, NASA SUITS, Seerslab, and Mondo XR. For me, this experience not only revealed the potential of the XR industry, but also significant shortcomings in current XR design processes. Recognizing these gaps, I took the initiative to develop a UX strategy project aimed at addressing these challenges.
Design Preview
Build 3D environments without extensive modeling experience.
Take your Figma components with you into the XR world.
View and test your XR prototypes in XR.
RESEARCH
Stakeholder Interviews
PAIN POINT 1
No Industry Standard
UIUX design in the XR industry hasn't been explored enought for there to be an industry standard.
PAIN POINT 2
Inefficient Prototyping
Current designing + protoyping tools for XR environments are not sufficient for XR UIUX designers to use.
PAIN POINT 3
Lack of Experts
There aren't many UIUX designers who specialize in the emerging tech industry right now.
User Interviews
PAIN POINT 1
Inefficient Tools
2D design software are not suitable for 3D environments, and game engines are overwhelming to use just for design.
PAIN POINT 2
Inefficient User Testing
2D prototypes are difficult to test with, and functional prototypes take too long to build + deploy
PAIN POINT 3
Design + Dev Communication
There is a big gap between the design and development processes.
INSIGHTS
User Stories
XR Companies
As
Leaders in the XR industry
we need
Industry-standard design tools for XR UIUX designers
so that we can
Improve our products + prove the potential of our industry.
XR UIUX Designers
As
XR UIUX designers
we need
Industry-standard design tools for prototyping and testing in 3D
so that we can
Streamline communication with development and get faster feedback from users.
How might we...
Create an industry-standard XR design tool for XR UI/UX designers?
Strategy
Design Principles
DESIGN PRINCIPLE 1
Familiar
DESIGN PRINCIPLE 2
Versatile
DESIGN PRINCIPLE 3
Compatible
FINAL PRODUCT
Design Solution: Figma XR Mode
3D Background
Build 3D environments without extensive modeling experience.
Convert regular 3D images into spherical panoramas to view them in 3D space.
3D Tools
Create simple 3D shapes for blocking.
Model simple 3D forms to block out 3D asset placement.
Import UI
Import flat UI components…
Bring your UI design components into 3D view.
Transform UI
Then transform them in the 3D space!
Change the tilt angle and curvature of your flat UI designs.
3D Tools
See your XR prototypes… in XR!
Check and test your 3D designs on your phone in cardboard VR.
TESTING
User Testing
TAKEAWAYS
This project is particularly dear to me because it sprang from my personal pain points working as a UIUX designer in XR. It was really great to see that other designers in this space felt the need for a standardized XR design tool too!
Special thanks to:
Ben Spear
INDEPENDENT PROJECT
Figma XR Mode
Oct - Dec 2023
A redesign of Figma. Streamlines XR UI/UX design, prototyping, and testing processes using both new and existing Figma features.
Topic
Redesign
UI/UX
XR
Role
Researcher
UI/UX Designer
Tools Used
Figma
Illustrator
Photoshop
OVERVIEW
Background
In the past couple of years, I’ve had the privilege of working on XR projects for Fidelity Investments, NASA SUITS, Seerslab, and Mondo XR. For me, this experience not only revealed the potential of the XR industry, but also significant shortcomings in current XR design processes. Recognizing these gaps, I took the initiative to develop a UX strategy project aimed at addressing these challenges.
Design Preview
Build 3D environments without extensive modeling experience.
Take your Figma components with you into the XR world.
View and test your XR prototypes in XR.
RESEARCH
Stakeholder Interviews
PAIN POINT 1
No Industry Standard
UIUX design in the XR industry hasn't been explored enought for there to be an industry standard.
PAIN POINT 2
Inefficient Prototyping
Current designing + protoyping tools for XR environments are not sufficient for XR UIUX designers to use.
PAIN POINT 3
Lack of Experts
There aren't many UIUX designers who specialize in the emerging tech industry right now.
User Interviews
PAIN POINT 1
Inefficient Tools
2D design software are not suitable for 3D environments, and game engines are overwhelming to use just for design.
PAIN POINT 2
Inefficient User Testing
2D prototypes are difficult to test with, and functional prototypes take too long to build + deploy
PAIN POINT 3
Design + Dev Communication
There is a big gap between the design and development processes.
INSIGHTS
User Stories
XR Companies
As
Leaders in the XR industry
we need
Industry-standard design tools for XR UIUX designers
so that we can
Improve our products + prove the potential of our industry.
XR UIUX Designers
As
XR UIUX designers
we need
Industry-standard design tools for prototyping and testing in 3D
so that we can
Streamline communication with development and get faster feedback from users.
How might we...
Create an industry-standard XR design tool for XR UI/UX designers?
Strategy
Design Principles
PRINCIPLE 1
Familiar
PRINCIPLE 2
Versatile
PRINCIPLE 3
Compatible
FINAL PRODUCT
Design Solution: Figma XR Mode
3D Background
Build 3D environments without extensive modeling experience.
Convert regular 3D images into spherical panoramas to view them in 3D space.
3D Tools
Create simple 3D shapes for blocking.
Model simple 3D forms to block out 3D asset placement.
Import UI
Import flat UI components…
Bring your UI design components into 3D view.
Transform UI
Then transform them in the 3D space!
Change the tilt angle and curvature of your flat UI designs.
3D Tools
See your XR prototypes… in XR!
Check and test your 3D designs on your phone in cardboard VR.
TESTING
User Testing
TAKEAWAYS
This project is particularly dear to me because it sprang from my personal pain points working as a UIUX designer in XR. It was really great to see that other designers in this space felt the need for a standardized XR design tool too!
Special thanks to:
Ben Spear
Check out more projects!
Check out more projects!
© Sunjoo Park 2024
© Sunjoo Park 2024
© Sunjoo Park 2024