Gather.Town Redesign

-Envision online campus during pandemic

UI UX Design Project   • Oct 2020 - Dec 2020

Team

Sabrina Chuang

Tools

Figma, Adobe Illustrator, After Effect

Role

User Research, Product Thinking, Visual Design, Prototype Design

Project Overview

Problem: Due to coronavirus, most of the college students lost the privilege to have campus life. Moreover, many of them find meeting new friends and attending club events remotely very difficult. 

My Goal for this Redesign 

  1. Create a platform that allows users to experience campus life again 

  2. Promote safe social activities in this pandemic 

  3. Propose a more engaging study environment for students

Frame 24 (4).png

How might we bring back campus life to college students and encourage safe social interaction during this pandemic  

Friends and Message

Users can discover their classmates through participants list and through meeting their avatar. They can have instant chat within the room and private message outside of the room after added as friends.

Surrounding line shows the talking distance and overlapping line indicates who's joining the conversation chat (break out room)

 

Pin messaged to let important message stay on top of the chat box. Only host can make announcement that will display on the top of the screen.

Note & File

Users can use Note function to take note while listening to a lecture. The note will be saved to Saved File

Events

Users can explore on campus events or search events. When they register to the events, they will be automatically enrolled in the room. 

App Analysis  

What is Gather.Town? 

Gather.Town is an online video chat platform that offers a fluid video chat, the user joins a call with others when stands nearby, to mimick real-life "hallway conversation" which has diminished because of the pandemic.  

 

Gather.Town is popular  for use as:

  • Conference, where small break down group from a large group 

  • Remote Office, where users can work with colleagues alongside 

  • Wedding, party, university campus, hanging out with friends 

                              

Screen Shot 2020-12-06 at 9.17.27 PM.png
Motivation

Why Redesign on Gather.Town? 

Due to pandemic, many events have turned online, and the requirement for online communication platforms has increased. Especially, most of the colleges have decided to cancel in-person classes and turn lectures online. With this decision, many college students lost their opportunity to enjoy campus life and be friends with their classmates.

 

Zoom, the most popular online video chat platform, only supports the basic functions of video chat which discourages students to know each other through online lectures. On the other hand, Gather.Town promotes a more interactive interface that can potentially bring back campus life to the students. However, Gather.Town main focus is not recreating campus life for students, so there are some challenges when users want to use this platform as an online campus. 

User Research 

Identifying User Needs with Survey 

Target Users: College Students (age 18-30)

Survey Highlight: 

       Paint Points

     

Chart One

90% users agree this pandemic has affect their chance to be friends with their classmates and find meeting new people is diffcult. 

Chart Three
Chart Two

60% user agree that they are frustrated the most about unable to recognize who is joining the call.  While 40% user are frustrated with accidentally join others call

​30% users didn't join school club or participate in school events this quarter because of pandemic. 

User Needs

70% users believe they will be more involve in remote school activity if the online is more interactive

80% user will like to know their classmate and be able to message them even if the video chat room close.

Users show the need of having a place to organize saved files and important message in the chat room. 

Gather.Town.jpg

Define Painpoints and Problems

Pain points and problems users might face when using Gather.Town. 

1. No Signifier Indicating Homepage

(might be confused about what this button means)

2. Can't Pin Video and Enlarge it 

(might be difficult if users need to focus on one participant's screen e.g. Professor's screen)

Screen Shot 2020-12-05 at 2.11.23 PM.png

3. One alphabet for room name 

(might be confusing when users have many rooms)

3. No Signifier indicating the talking distance between each other 

(User will be confused on how close they need to be with other in order to join the call)

4. Can't Save or Pin Messages

(lost record of important messages) 

Competitive Analysis
User Personas 

Potential Stakeholder

A4 - 1 (3) (1).png
A4 - 3 (6).png

Understand the Competitor

A4 - 3 (5).png

Gather.Town

  • Allow customize background and character that stands out from other online video chat platforms. 

  • Many features like mini-game, whiteboard, poster showcase, private room 

  • Weak function on message. Users can’t save certain messages and can’t pin the important messages in the chat.

  •  Can’t add friends in Gather.Town 

Zoom

  • Very standard design and layout

  • Not customizable

  • Allow adding contact 

  • Allow message without video chat 

  • Have personal space that allows saving files and draft message 

  • Able to save certain text with “star”

Skype

  • Not customizable

  • Very standard design and layout

  • Allow adding contact 

  • Allow choosing the setting of the person 

  • Allow message without video chat 

Linkello 

  • Simple interface 

  • Not customizable 

  • Can’t add friend or contact 

  • Can’t save the message 

  • Can’t pin a message

Parallel + Iterative 

Low-Fidelity Design 

Version A:

Frame 4 (3).png

Version A

  • Chat room information and chatbox on the right of the screen like the original Gather.Town

    • ​Similar to other online video chat platforms like Zoom which might help users to switch to Gather.Town easily

  • First Version note function appears on the bottom of the screen 

    • right under the screen might be more visually align to the users

Version B:

Frame 5 (1).png

Version B

  • Chat room in the bottom that is similar to some online games which might encourage users to think they are playing an online game while the users use Gather.Town. 

  • Room’s screen space appears bigger which encourages users to pay more attention to the room space and engage in conversation with other

  • Note function appears on the left of the screen 

    • more similar to the actual screen and will appear if users use Gather.Town with other note taking applications.

With Low Fidelity Prototype  

User Testing

Goal: To test the usability and efficiency of two prototypes and pinpoint any shortcoming

Direct Observation with 5 participants performing following tasks:

 

Tasks: 

  1. Add Friends

  2. Take note  

  3. Write a mail 

  4. Type a message in the chatbox

    • Pin Message, Save Message, Make Announcement

Success 

😊😊😊😊😊   5/5 users are able to add friends in less than 10 seconds in BOTH prototype 

😊😊😊😊😊   5/5 users  are able to write a mail in less than 13 seconds in BOTH prototype

😊😊😊😊😊   5/5 users succeed in pin message and save message in prototype  A

😊😊😊😊        4/5 users succeed in pin message and save message in prototype  B

😊😊😊             3/5 users easily discovered Note function in BOTH prototype

Problems:

❌                          1/5 user can’t find Note function in BOTH prototype without guidance  

❌❌                  2/5 users didn’t notice the announcement 

❌❌❌❌        4/5 users get confused between Saved Files and My Note

Version A

  • “similar to the zoom structure so I  knows right away how to use it” 

  • “I like it shows the full name of the room”​

Version B

“I like this has that nostalgic game feeling ” 

  • “Screen feels bigger in this one”

  • “This feel more casual and fun” 

  • “I can see the background better” ​

Iterations Based on User Testing 

High-Fidelity Prototype

Frame 6 (2).png
Screen Shot 2021-02-09 at 12.33.13 PM.pn
Screen Shot 2021-02-09 at 12.44.13 PM.pn

Second User Testing

Goal: To see whether the design can speak on its own

Let 3 participants explore the prototype without any guidance  

Success:

😊😊😊   3/3 users have notice Announcement   (user testing 1  issue ✅)

😊😊😊   3/3 users are clear on Saved File function  (user testing 1  issue ✅)

😊😊😊   3/3 users can identify their avatar easily (original Gather.Town  issue ✅

😊😊😊   3/3 users are clear on who is joining the call (original Gather.Town  issue ✅

Pain Points:

❌              1/3 user have issue finding pin message function at a glance

❌             1/3 user is confused about back button 

Feedback:

 

Chart Three
Chart One
Chart Two
  • ” I’ll prefer to have the screen space even bigger. The chat box kind of take too much space”

  • “I can assume what is each function in the menu bar but I am not completely confident about it”

  • "I am confused about the back button. I think I can just click the room I want to enter"

Iterations to Final Design 

Desktop - 48 (3).png

Iterations 

Final Design 
Frame 3 (7).png

1. Note:

  • Move the Note from the left to the bottom so the screens are visually aligned. 

  • Users are able to move the note around and resize it as they want. 
     

2. Chatbox 

  • Move from the bottom to the left and decrease the size for better visibility on the main screen. 

3. Menu 

  • When open the Note, the menu will be attached to the top of the chatbox and able to expand to a full list when the user clicks the white space in the menu. This change makes the main screen bigger.

4. Home

  • Change the home page icon to the text to stay consistent with other room 

Final Design 

1. Chatbox

  • Smaller on the right side and allows users to hide it if wanted

  •  The main screen space becomes bigger to help users focus more on the avatar’s activity.

  • When a user raised hand, it will notify other users by showing it in the chatbox with orange text.

    • users pay more attention to the chat than the participant’s list, where the original Raised Hand function displayed.

2. Menu 

  • Add labels under the icon in the iteration for clarification. 

  • Move the menu from the left to the center of the screen for easier usability.  

3. Screen 

  • Decrease the size of the video chat screen to make the general screen size bigger. 

​​

Iterations

Final Design 

Screen Shot 2021-02-09 at 4.27.07 PM.png

Next Step & Reflection

  • Not limited to one campus where users can make friends with other students from different college 

  • Work on UI design to look more cohesive 

  • More user testing