Pilot in Space
UIUX DESIGNER & RESEARCHER • VR & MOBILE & WEB
Pre-record the pilot to guide
users around your VR space
ROLE
Researcher
UI Designer
SKILLS
User Research
Product thinking
Prototype
Interaction design
Visual design
TOOLS
Figma
HTML/CSS
TIMELINE
09/2022 - 10/2022
2 month
Overview
Pilot is a function for VR Maker users to have primary guide around meta space in the LiveTour. On the editor platform, the LiveTour owner can record pilot for different routes, highlighting exhibition content, and demonstrate all the pilot created by different guiders. Ultimately, by guiding the visitors the main content and giving them a brief introduction of the LiveTour, the host is able to increase visitor stay time in a more efficient way.
Design Process
The design process of this project can be illustrated in the following graph. As the researcher and solid designer, I worked closely with one particular front-end engineer and worked from the demand / challenges chase to develop phase.
Design Process of Pilot Improvement
User Research
1. Past using experience
To have a complete user feedback of the pilot feature, we sent surveys to users, and interviewed 7 of our most senior PS/CS who have educated our clients to use pilot.
In the part of “Overall User Experience”, we know our users are not familiar with the pilot feature since few of them have used it. The proportion of users who sometimes use it is over half of all.
As to the satisfication of pilot, we measure with a score from 0 to 5, and several index of good UX such as system speed, system stability, quality of content provided on screen, interface design of the system, and features of the product. The result shows that we have to improve system stability and quality of content on the editor side, while in the viewer side we can manage to start from interface design.
Pie chart of using frequency
Histogram of overall user experience
2. Feature prioritization
Next, as for client user background, we asked “What do our clients find best about our pilot?” to find out what’s our feature highlight and what to be improved. Obviously, most of our users are impressed by the features provided, however, the ease of use and user interface are not friendly enough for them to fully enjoy the content.
Histogram of feature highlights
IDEAS TO ACTION
1. Wireframe
Based on the information archirecture and the flowcharts, low-fedelity wireframes are created to make sure we solve the previous frustration of the UI. Since we have to show complete pilot routes and guides in the menu, the interface has to be big enough but closable to get back to the virtual environment. Most importantly, while playing the pilot, user has to be fully immerged and not disturbed by the playlist. Mobile and web wireframes show a little bit difference in the interaction rules due to limited space for components on the mobile.
Wireframe of Pilot viewer
2. UI & Prototype
Basically the UI is the screen-by-screen pixel-perfect visualization of the wireframes in detail. Pilot user flows are demonstrated with prototypes made by Figma.
UI of pilot v.1 (mobile)
Usability Testing
After publishing our prototype of the improved pilot v.1, we asked for feedback about the hint of pilot since we wanted to make sure our users are notified of the improved feature and further increase usage of the feature. The result turns out pretty well: 57.1% of the users strongly agree, and 42.9% of the users agree with the hint.
Pie chart of the notification of piot hint
For the improved RWD mobile version of pilot, I created an interactable prototype for the users and asked them about the readability of mobile viewer, such as ease of reading characters and opinion about organization of info on the screen. The pie charts below show some users’ difficulties reading words and confusion about the info sourcing.
Pie chart of the attitude of reading characters
Pie chart of the attitude of organization of info
To gain a deeper insight of the negative attitude towards readability and organization of the characters and info, I further interviewed the users who have commented “hard” or “confusing” on the two measures. After that, we categorized the usability problems as follows:
1. There is no clear notification that there is scrollable content in the playlist page. Besides, the down-arrow button looks unfolded but not scrollable.
2. The wording and component of the “Chapter” in the playlist page are confusing since users do not get the relation between the chapter and the media play bar.
3. The components of guide and routes are mostly round and do not demonstrate clear difference of info types when users are overwhelmed by the info on the playlist page.
4. The pilot menu button seemed disabled and users wouldn’t even know the page exists since the hint is mistaken as the button.
5. The wording of “Guide” is not clear enough to explain its full meaning “users can choose specific guide to see his/her routes.
Usability problems from usability testing
Iteration
From the results of usability testing, I first changed the down arrow button of scrollable content to a fixed CTA button, which shows “View full content” and auto scrolls to the bottom page when clicked. With the unclear demonstration of chapter, I then added texts “Route chapters” and guided users to choose specific chapter they would like to listen to. The brief and basic wording “guide” was also changed to “choose tour routes by guiders”, showing stronger instruction of what users can do in this page. Most importantly, I refined the components of routes and guides by categorizing them into rectangles and rounds, with play/pause button on the route cards to show its functionality clearer. I differentiated their function traits in order to help users quickly distinguish which can do what from tons of information in the first sight. Lastly, there is a pilot menu button on the playlist page as a faster and clearer way to view full content.
The iterated version of pilot
Final Prototype
Basically the UI is the screen-by-screen pixel-perfect visualization of the wireframes in detail. Pilot user flows are demonstrated with prototypes made by Figma.
UI of each flow (web)
UI of each flow (mobile)
Final Mockups
Pilot mockup in web
Pilot mockup in mobile
Takeaways
1. Don’t be afraid of being criticized
In this project, I had opportunity to interview to our end users in person. They gave me insightful feedback, while sometimes their honest comments may hurt. For example, one of the user said, “The function is so confusing that I don’t even wanna use it.” in person. It was hurt in the beginning, but then I asked her what part makes her feel frustrated with the design and what are the elements that she did not like. Then she pointed out the parts which have greatly help us iterate the final design. I found the way to figure out the best solution is to be open to judgement, admitting that you might be wrong.
2. Avoid being subjective during the interview
When I conducted usability testing via questionnaires and interviews, I found out some instructive questions might lead users to not answering what they actually think. Just as people might consider opposite opinion to jeopardize their dignity and independency, they would become defensive when being questioned. Instead, people are more willing to share when they know there’s no right / wrong answers. Therefore I spent less time on explaining how the feature works, but spending more on listening, and I found the results turned out pretty surprising.