VR Viewer Optimization
UIUX DESIGNER & RESEARCHER • VR & MOBILE & WEB
Richer Experience of Virtual Exhibitions & Showrooms
ROLE
Researcher
UI Designer
SKILLS
User Research
Product thinking
Prototype
Interaction design
Visual design
TOOLS
Figma
HTML/CSS
TIMELINE
10/2021-11/2021
1 month
Overview
VR Maker Viewer is the main project I optimized in October while I was in iStaging. As the largest SAS platform to combine virtual world and reality environment, and served mostly for VEx (virtual exhibitions) , real estate and showrooms, VR Maker Viewer requires a lot of audacious future technology design elements, and also eclectic consideration for business networking and luxury industries. Hence, I did research about metaverse UI trend and common actions in the interface as a researcher, tried to practice them in several versions of wireframe as a sole designer, and finally conducted usability test to iterate and develop.
Design Process
The design process of this project can be illustrated in the following graph. I carried the user research of common gestures, establishment of fundamental UI styles, UI guideline of component library, designing and prototyping. As the researcher and solid designer, I worked closely with one particular front-end engineer to get the design deliverables and iteration as well.
Research phase
Since our feature is to build hybrid events online and virtual, accessible on devices including web, mobile and VR headset, I need to take several devices into consideration. Firstly, the literature research was conducted to gather the background information. The context of use was explored from the perspective of history, devices and users, how the interaction between them.
History of HCI device development
Obviously, touchscreens have already influenced people’s life in and out and the market penetration will just keep increasing. Think about how you collaborate with a touchscreen screen today. There are various examples that we have all developed to understand, for example, swiping, squeezing to zoom, and long tapping to raise more choices. These are altogether contemplation's that ought to be made in VR also. As more creators come into the VR field, there will be more personalities to make and vet new UI designs, helping the business to push ahead. Aside from the existing touch screen gestures and web clicking actions, the common gestures used in augmented reality and mixed reality cannot be overlooked as well, since we had to reserve some space for future iteration as a web-based platform.
Common touch screen gestures
An interface is the set of elements that users interact with to navigate an environment and control their experience. To be positioned along two axes according to the complexity of "environment" and "interface", our VR Viewer would be put in the top-right quadrant, which includes both complexity of the environment and the interfaces.
Therefore we have to consider several fundamental questions to design the user experience of such a product with the above features:
-
How do people get started?
-
When the interaction with the environment is prior to that with the interface, how to create a minimalist interface that won't overload the users with too many choices?
Quadrant Diagram of VR by Sourabh Purwar
The discussion probed into two modern interface styles, Glassmorphism and Minimalism. An initial user test showed that the Glassmorphism interface is too frivolous while the Minimalism interface is flimsy in its usability. Additionally, stakeholders were satisfied with neither of the existing interfaces and are searching for a new way of interaction with the quality of simplicity, functionality and novelty.
This result led to the design goal to “design an interface style for touch-enabled mobile devices, aesthetic web-based platform and futuristic VR headset”.
UI style discussion report
UI and Visual Design
In the wireframes and UI phase, all discussed features were translated into screen-by-screen solutions with a logical flow that interlinks each other. In this stage, the effort in the iterations was made to check if all the discussed features are included and figure out if the flow makes sense to users.
Basically the visual design is the screen-by-screen pixel-perfect visualization of the wireframes in detail. iStaging pink was chosen as the main color because it represents iStaging's brand. The windows and pop-ups were made by 90% transparent and 20% background blur after several tests and iterations. The icons were kept light and refreshing to balance the modern, steady and minimal topics.
VR Viewer UI ( Web )
VR Viewer UI ( Mobile )
Usability Testing
After publishing our prototype of the improved VR Viewer, we planned to ask for feedback about the overall user experience and what can be improved in the second version iteration. Most ethnographic research strategies are open within VR, such as Client Interviews, Fly-on-the-Wall, Usability Testing, Touchstone Tours, Simulation Exercises, Shadowing, Participant Observation, Heuristic Evaluation, Focus Groups, Eye Tracking, Exploratory Research, and Diary Studies.
Due to the developing schedule, project scope, and resource available, I only had 2 weeks to complete the usability testing and summarize the results. The final version of VR Maker Viewer needs to be corroborated as useful, therefore a small user test was conducted within a group of users from our company who are not familiar with our product. The usability test includes 5 main process, briefing the process and the team's expectation, testing scenario with background information, 2 user tasks to be completed, interview, and finally feedbacks from users. In brief, users have commented on problems of character size, misunderstanding of the feature button, and what they would actually do to manage the tasks.
Usability Test Report
Design Deliverables
The core features MVP includes browsing and switching panoramas. The interaction design of the panorama list is inspired by Netflix, which has their film lists hovered and shown in a bigger size. The blooming circle represents the panorama you are in, and the white strokes show when you hover the panorama you want to go to.
Before
After
Final Mockup
Display Mockup
Takeaways
1. Build reconciling product
This project has taken much communication back and forth to reach consensus ultimately. Due to the discrepancy of our clients including art museum, commercial exhibitors of varies of industries, luxury brands and real estate industries, etc, the UI style has to be with sense of technology but not too frivolous, beautiful but not quixotic, serious but not banal. Thus, the expedient is minimalism, which embodies the above-mentioned characteristics.
2. The importance of usability testing
This was actually the first UX research and usability testing I carried on my own. By conducting the usability testing, I got to see the user problems including character size, icon interpretation, UI style, layout on different devices and etc. From the interview I gathered precious suggestion, first-hand feedback, and most importantly, their actual using scenario and reaction while interacting with my prototype. I found out it is nothing more efficient than just sharing your work with others to seek for user difficulties initially.