|
| 1 | +--- |
| 2 | +title: "V Gather – HKUST COMP4461 Project" |
| 3 | +date: 2020-11-19T09:18:25+08:00 |
| 4 | +draft: false |
| 5 | +categories: |
| 6 | + - HCI |
| 7 | + - coursework |
| 8 | +featured_image: v-gather.jpg |
| 9 | +summary: "This article is also an assigned self-reflection on HCI course project (COMP4461) at HKUST. A social VR product prototype that kindles ice-breaking events with liveliness." |
| 10 | +--- |
| 11 | + |
| 12 | +This article is also an assigned self-reflection on HCI course project (COMP4461) at HKUST. |
| 13 | + |
| 14 | +A social VR product prototype that kindles ice-breaking events with liveliness. |
| 15 | + |
| 16 | +{{< figure src="v-gather.jpg" alt="V Gather Artwork" >}} |
| 17 | + |
| 18 | +## Project Info |
| 19 | + |
| 20 | +This is the third project of COMP4461: Human-Computer Interaction at the Hong Kong University of Science and Technology. Previously in this course, we are required to [Mozilla Hubs](https://hubs.mozilla.com/) to hold meetings for all of our course projects. And for this project, we are assigned the theme of Social VR. We need to reflect on our experiences with Mozilla Hubs and focus on one of the three topics: |
| 21 | + |
| 22 | +1. Improving Social VR experiences for future group collaborations |
| 23 | +2. Designing Social VR experiences for some other future scenario |
| 24 | +3. Proposing a better alternative solution to Social VR for a given scenario |
| 25 | + |
| 26 | +Looking at the third topic, we end up with V Gather, our Social VR solution for online ice-breaking and gathering events that maximizes liveliness and minimize awkwardness. |
| 27 | + |
| 28 | +## Qualitative Analysis |
| 29 | + |
| 30 | +We collected and analyzed qualitative data to find out the pros and cons of the general functionalities of Mozilla Hubs and its feasibility in different scenarios. |
| 31 | + |
| 32 | +### Heuristic Test |
| 33 | + |
| 34 | +We have concluded a lot of pros and cons of the functionalities of Mozilla Hubs via heuristic tests. Below is an extract. |
| 35 | + |
| 36 | +* User Interface |
| 37 | + * 😄Internal consistency among the icon buttons in the toolbar. |
| 38 | + * 😄Intuitive visual implications of the button icons. |
| 39 | + * External inconsistency in the screen sharing icon compared to other products. |
| 40 | + * 😥No labels for button icons unless the mouse is pointed at them. This introduces difficulty in interpreting the meanings of the icon. |
| 41 | +* Features |
| 42 | + * 😄The countdown of the camera. |
| 43 | + * 😥No assistance in placing objects. |
| 44 | + * 😥Cannot batch-edit objects in the room. |
| 45 | + * 😥Poor server quality, characters and objects not showing over bad Internet and no messages shown for such errors. |
| 46 | + * 😥Poor pen tool experience |
| 47 | +* Support |
| 48 | + * 😄Documentation to help beginners. |
| 49 | + * 😥No FAQ to solve ad-hoc problems. |
| 50 | + |
| 51 | +{{< figure src="heuristic-test.png" alt="Heuristic Test Result" >}} |
| 52 | + |
| 53 | +### Usability Test |
| 54 | + |
| 55 | +We conducted usability tests to see the capability of Mozilla Hubs to support group collaborations and meetings, especially concerning our COMP4461 course projects. The usability follows the design and process below. |
| 56 | + |
| 57 | +Task Design: |
| 58 | +- Goal: To discuss and hopefully come up with available ideas for course projects in COMP4461. |
| 59 | +- Look for: How well does the brainstorming task flow work? |
| 60 | +- Context of use: The users are expected to be under pressure as the timeline is short, non-interrupted as they are having the meeting. They are also expected to be at home with available microphone and speaker to interact in the task. |
| 61 | + |
| 62 | +Evaluation Metrics: |
| 63 | +- Realization: What does the users want to do during the brainstorm, and whether the users identify relevant function to satisfy such needs? |
| 64 | +- Issue: Identify issue and its severity, if any. |
| 65 | +- Self-reported feedback on user experiences |
| 66 | + |
| 67 | +Recording method: |
| 68 | +- Video recording |
| 69 | + |
| 70 | +Users: |
| 71 | +- Target user profile: Users that expect Mozilla Hub as a place for virtual meeting to discuss issues and conduct brainstorming. |
| 72 | +- Who: 5 college students from HKUST, with age from 19 to 22. They would discuss about the course project ideation in the Hub, which is expected to be a match for the target user. |
| 73 | + |
| 74 | +Experiment findings: |
| 75 | +- Users encounter severe Internet connection issue during the experiment. The majority of the users spent over 15 minutes simply for entering the room. Some teammates can’t hear other voices with no hardware and software problem in their own devices. |
| 76 | +- Users attempted to communicate with each other to start the meeting, but the aforementioned problem hindered meeting from getting started. |
| 77 | +- The imitated effect of distance to voice volume interrupted the meeting for several times because members can’t hear each other clearly. |
| 78 | +- Users attempted to share notes but found no available effective functions in the Hub. Pen function is impracticable for taking notes. |
| 79 | +- Users were not aware of the screen sharing supported in the Hub. |
| 80 | + |
| 81 | +Feedback: |
| 82 | +- The overall experience is negative due to Internet issues and poor function realization. |
| 83 | +- There are no outstanding and irreplaceable functions found for holding brainstorming session in Mozilla Hub. |
| 84 | +- The advantage of imitating real-life interaction is not utilized in this scenario. |
| 85 | + |
| 86 | + |
| 87 | +### Choice of our topic |
| 88 | + |
| 89 | +We want to design a Social VR product for online informal gatherings such as ice-breaking sessions. We see the huge potential of Social VR in mitigating the awkwardness of "Zoom gatherings" by putting characters in a simulated environment instead of grid view panels. VR rooms also allows for private conversations an richer means of communication, which is perfectly suitable for gatherings events. |
| 90 | + |
| 91 | +## Ideation |
| 92 | + |
| 93 | +### POV Model |
| 94 | + |
| 95 | +We constructed two POV models. The first one is a college freshman who need to familiarize herself with the communities and the campus. |
| 96 | + |
| 97 | +{{< figure src="persona1.jpg" alt="Persona: college freshman.jpg" >}} |
| 98 | + |
| 99 | +The second one is a product manager who need to organize online gatherings and have people socialize and build a strong team spirit. |
| 100 | + |
| 101 | +{{< figure src="persona2.jpg" alt="Persona: product manager.jpg" >}} |
| 102 | + |
| 103 | +### Brainstorming |
| 104 | + |
| 105 | +According to the two POV models and the problems these two personas face, we conducted a brainstorm session to discover the solutions and the features in detail. |
| 106 | + |
| 107 | +{{< figure src="mindmap.png" alt="Brainstorm Mind Map" >}} |
| 108 | + |
| 109 | +### Storyboard |
| 110 | + |
| 111 | +Below is a storyboard we drew, where a team leader succeeded in familiarizing the team members with each other using the product we design. |
| 112 | + |
| 113 | +{{< figure src="storyboard.jpg" alt="Storyboard" >}} |
| 114 | + |
| 115 | +### Finalizing Design |
| 116 | + |
| 117 | +We eventually came up with our design of V Gather to solve the problems in online ice-breaking events. The participants can customize their appearance in the room, and we also empathize on three main features to make it capable. |
| 118 | + |
| 119 | +The first is the *speech feature*. The host can invite participants to a designated room and deliver a speech, e.g. an opening speech. The room consists of a set-up stage and audience seats, and enables real-time interactions. |
| 120 | + |
| 121 | +The second is the *chit-chat feature*. The participants can take a step closer to each other and have private conversations with facial expressions and body languages. The facial expression and body languages will be detected via face recognition cameras and Kinect cameras. |
| 122 | + |
| 123 | +The third feature is *ice-breaking games support*. Participants can join in various ice-breakings games to have a more enjoyable experience. |
| 124 | + |
| 125 | +### Speed Dating |
| 126 | + |
| 127 | +After viewing our design, the interviewees expressed their interest in both the customization of the appearance and our additional features. They believed the imitation of the real world environments greatly attracts them to use the platform for future gatherings. |
| 128 | + |
| 129 | +The interviewees also pointed out something we can improve. A third person's view can be added to have the participants more aware of of their own characters. Voice adjustments are also useful for some participants. The gaming part can be further polished, for different people may want games of different topics and difficulties. |
| 130 | + |
| 131 | +## Video Prototype |
| 132 | + |
| 133 | +{{< youtube 1Vcpl_dP3iU >}} |
| 134 | + |
| 135 | +## Personal Reflections |
| 136 | + |
| 137 | +Personally, I have taken part in the ideation stage and the in-class presentation, including making the slides. It is inspiring to have collected all the parts of the work done by our group mates and sort them out. Since we are required to use Mozilla Hubs to hold group meetings for the entire semester, it is quite easy for us to conduct heuristic studies and propose many ideas at the beginning. (Of course we also swore a lot about the bad experience of the Hubs LOL.) We realized that it is important to analyze the core and irreplaceable features of a product before we target to, or use it in, a specific scenario. Up till today, VR is not the solution to everything, but its huge potential is undeniable. Therefore, we have gone through careful discussions on how the attributes of VR technology can benefit an online gathering event, and such a thinking process is very important in designing a product. |
0 commit comments