VR Webinar
UIUX DESIGNER & LEAD RESEARCHER • VR & WEB
Real-time webinar inside an
immersive VR environment
ROLE
Lead Researcher
Sole Designer
SKILLS
User Research
Product thinking
Prototype
Interaction design
Visual design
TOOLS
Figma
HTML/CSS
TIMELINE
03/2022 - 04/2022
2 month
Overview
Webinar is an attached feature in the VR LiveTour space that help people start their online meeting. People can browse the attendance members, public / private chat and send files in the chat room, all in an immersive environment.
As the lead researcher and sole designers of the project, to optimize the Webinar function, I conducted the interview to make personas and empathy maps, building wireframes and UIs with the approval of stakeholders and clients. Finally, the results are tested by usability test including cognitive walkthrough and Heuristic Evaluation.
Planning
The first and most important task is to locate the user demand of our Webinar. It turned out that most of our users do not familiar with Webinar and are often confused by TourRing and Webinar with their obscure position and UI. The previous version had mixed up the two functions with unclear hierarchy and misleading wordings.
Secondly, our users have tons of unsatisfied demands that Webinar had lacked for a long time without improvement. Therefore, many of them had turned to those tools which have already equipped with handy functions including video call, sharing screen, and chatting, such as Google Meet, Zoom, and Webex by Cisco.
To solve the above mentioned pain points, I joined every product roadmaps to collect market insights, collecting demand from both users, stakeholders and clients, and categorized the needed functions of our Webinar. Then I finally came up with our optimization plans, with the approval of stakeholders and clients, and sufficient discussion with the developers.
User Research
Several interviews were conducted to create personas and empathy maps, representing 4 types of users, including editor from marketing corps, editor from large exhibition corps, editor from large seminar organizations, and regular attending visitors. An empathy map is made for each of them, categorized by what the user say, think, feel and do. After that, a persona is built based on each type of the users, with using behaviors, motives, pain points, goals / interests, and meeting software brands they use were thoroughly investigated and described.
Personas
Empathy Maps
Wireframe & UI
Based on the problems defined, low fidelity wireframes are created to make sure we solve the previous frustration of the Webinar. On the viewer side, user is able to check online members and chat with them by typing during the video call. User can change their background image and web cam effect by simply clicking buttons on the pop-up without interrupting the meeting. On the editor side, user is able to schedule a meeting within 3 minutes, start a meeting directly, and reserve the meeting chat log and detailed records.
Wireframe of web and mobile
UI & interaction design (Viewer)
UI design (editor side)
Usability Testing
1. Cognitive Walkthrough
Before conducting cognitive walkthrough by giving user tasks, we selected adequate samples by their using identity, and designed user scenarios for each of them. Each task was assigned with a complete prototype on the device that our user is familiar with, thus the user can have using experience closer to their real life. In addition, a task checklist was offered to assure the user were not suffered from the overwhelming task information.
User task design
The whole usability test has included 5 users from different industry segments, and each of them completed the tasks with the prototypes built according to their using scenarios. The journey maps below show their mood and break points during the tasks, which help us define the user frustration and develop a version of iterated Webinar.
Cognitive walkthrough (user journey map)
2. Heuristic Evaluation
Aside from cognitive walkthrough, we need Heuristic Evaluation to gain a deeper insight of the usability and the problems overlooked by us of Webinar. According to Interaction Design Foundation, Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. Here I hired an UI / UX expert in Taiwan who has almost 10 years of experience in Saas software industry, to use the Nielsen-Molich’s 10 principles to evaluate our usability. The scores of severity is scoped from 0 to 4, while 0 means no problem, 1 means superficial problems which should be fixed if time is available, 2 means subordinate problems, 3 means primary problems, and 4 means catastrophic problems and required to be fixed immediately. We have collected both violations and recommendations from the expert, and further iterated several versions.
Heuristic Evaluation form
Takeaways
1. Insights from team work
Before this project, most of the time I was the only designer and researcher of the launched product. This is a double-edged sword since I had the full autonomy to decide the project vision and direction, nevertheless, I have no one to bounce off ideas of solutions before the usability test in the real world. In this project, I got to work with the 2 other amazing UI / UX designers and several interns in our team. This makes collecting feedbacks more common and I found the ideas inspiring. I’m very thankful of them for working as a team and sharing their thoughts with me.
2. The importance of usability testing
Adapting cognitive walkthrough is a way to map out the user journey and find out where the problem is with effectiveness and efficiency. Furthermore, Heuristic Evaluation is arguably an useful tool to let other professionals to evaluate your work from their perspectives. Our team has collected many valuable suggestions from the usability test and thus created our final version of VR Webinar. Therefore, no matter what kind of usability test method you take, make sure to always test your product in the real world, and you may be surprised by how much you overlooked from your own view.