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
-
Create a platform that allows users to experience campus life again
-
Promote safe social activities in this pandemic
-
Propose a more engaging study environment for students
.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
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
90% users agree this pandemic has affect their chance to be friends with their classmates and find meeting new people is diffcult.
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.
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)
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
%20(1).png)
.png)
Understand the Competitor
.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:
.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:
.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:
-
Add Friends
-
Take note
-
Write a mail
-
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
.png)
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:
-
” 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
.png)
Iterations
Final Design
.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
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