PRODUCT DESIGN (SAAS)

Gatherly

About Company

Gatherly is a virtual event platform for connecting and engaging with people and communities. Based on spatial video chat, people can walk around and talk to whomever they'd like.

Gatherly hosted thousands of events. Educational institutions, nonprofits, corporations, conference organizers, and community leaders use the platform.

Event types range from small office holiday parties to poster fairs for thousands.

Design Goal

Improve both the ease of use in the platform and engagement at events.

Time Period

Apr 2021 - Jul 2022

The Team

  • Head of Product 👷🏽
  • 2-5 Software Engineers ❤️
  • Sr UX Designer 👋🏾
    In this role, I was responsible for:
    • Finding ways to help people avoid oopsie situations (ie. skipping tutorials, messaging the wrong chat, getting stuck in the elevator 🤣, etc.)
    • Bolstering user's confidence when using the platform.
    • Providing and advocating for an accessible experience that feels good for everyone.
    • Researching and assessing common design patterns to implement into the platform. (Just because its common doesn't mean it's right for your audience 🤷🏾‍♀️)

Accomplishments

📌 Chelsea Note!
If you're in a hurry, check out the Gatherly Platform Presentation instead.


DESIGNING FOR SPATIAL VIDEO CHAT

Gatherly Platform

Since the pandemic, there's been ample expansion and growth within the world of virtual events. Unfortunately, along with the plethora of video chat platforms came burnout.

Gatherly stands out by maintaining the spontaneity and flow of natural conversations. The platform enables event attendees to walk in and out of group video calls as they please. They can also send direct messages, broadcast to the room, take photos, and much more.

With Gatherly, virtual events aren’t confined to webinars. Engagement takes center stage.

Gatherly - FinalGatherly Platform

📑 Back to Top


🚢Shipped Product Updates


Reducing Complexity in the Event Onboarding Experience

Gatherly is not your average video chat platform - it requires engagement.
This might not be obvious for first-time users. So when they join an event, they’re presented with a tutorial. The tutorial takes 7 clicks to get through. After completing it, they see their self-preview video.

At Gatherly, we rely on User Interviews and Net Promoter Scores (NPS). With NPS, we survey customers and get feedback on their experience with the platform.

Using those research methods, and also guidance from the Head of Product, I learned a few things:

  • Users skip the tutorial
  • Once they skip, they are a bit lost on what to do next

My task was to find a solution to this.

Tutorial

Self-preview Video

Solution

I chatted with the Head of Product about potential reasons why people skip. They could be:

  • In a hurry 👟
  • Running late ⌚
  • Expecting a Zoom-like experience 🤓
  • Uncertain how long the tutorial is 🤔
  • Living that chaotic life 🤪

I also thought about how the series of tips could affect the appearance of the platform.
We want the experience to be intuitive and delightful🪄. But having a series of tips might make the platform appear complicated and daunting to new users.

My original plan was to:

  • Make the copy easier to scan and digest
  • Reduce the number of tips (if possible)
  • Relocate the “Skip tutorial” action. The current location blends into the UI and the banner shifts the platform down.
  • Add step indicators to show how long the tutorial is and to show progression.
  • Provide a way to replay the tutorial
 
                                                    Wireframes

But while working on wireframes, I felt this would not solve another looming issue: interaction cost.

Before joining an event, users have to enter their name, set up a profile, and check audio/video settings. Then they proceed through the tutorial which takes about 8 clicks to get through (from start to finish, plus closing the brochure modal).
Few will have time for this. 😬

So I had an idea: "What if we removed the tutorial?" and have the tips always available.

Wireframes

Initial 
                                                    Wireframes

Exploratory
Removing the tutorial is a significant change in the platform.
So, I created an exploratory wireframe for the Head of Product to review. It imagines:

  • The tutorial completely removed.
  • The entry point displays as a type of personal waiting room with a custom welcome message.
  • A tab widget displays tips on demand.
 
                                                    Wireframes

Approved
The Head of Product approved the wireframes, but I had to make a few changes…
While working on this project, I had 2 others in the pipeline. Because of the solutions for them, the tab widget isn't needed.

Design Implementation

The visual designs went through 3 phases over time.

Tutorial Improvements v1

In Phase 1, welcome panel displays above the self-video preview. It contains short instructions on how to interact with the platform. Users can expand and collapse the panel.

Tutorial Improvements v2

In Phase 2, I adjusted the dimensions of the welcome panel and self-video. I also updated the avatar styling to match the new avatars. (See Redesigning Avatars & Huddles)

Tutorial Improvements v3

In Phase 3, I consolidated everything into the welcome panel and added audio/video controls.

Results

Phase 3 is the final design. It provides focus and maximum scannability.


Refreshing the Design and Customizability of Landing Pages

📌 Chelsea Note!
I’m still working on the write-up for this project - thanks for your patience. In the meantime, check out Gatherly’s post about the update: Introducing Fully Customizable Landing Pages for Gatherly Events

"Driven by feature requests and feedback from Gatherly hosts, the customization of the event landing page has been greatly expanded.
Every Gatherly event comes with a landing page which can be viewed by attendees both before and after an event, and this latest update gives more control to hosts to both brand this space, as well as to better educate attendees on the details of their event."

Event Manager

Landing Page

📑 Back to Top


Redesigning Avatars & Huddles

📌 Chelsea Note!
I’m still working on the write-up for this project - thanks for your patience. In the meantime, check out Gatherly’s post about the update: Introducing Redesigned Avatars for Gatherly Events

"We’re excited to announce a total redesign of avatars on Gatherly! Attendees are now represented with a picture of themselves throughout the platform.
This update, the largest to the platform so far in 2022, aims to improve both the intuitiveness of the platform as well as engagement at future Gatherly events.
Changes in this update include:
  • Picture-based avatars used to represent users on the map
  • A more visible badge to denote admin users
  • A redesign of huddles to make them more intuitive to first-time users
  • Dropdown people list where attendees are grouped by floor
  • Usage of picture-based avatars throughout the platform, such as in chat, when an attendee’s webcam is turned off, and in tooltips"

Before/After comparison

Before/After comparison

Avatar Badges: Open and Locked (or Full) Huddle

Open and Locked Huddles

Avatar Locator: Self vs Others

Locators

Huddle List

Locked Huddle

📑 Back to Top


Expanding the Manageability of Broadcasting

📌 Chelsea Note!
I’m still working on the write-up for this project - thanks for your patience. In the meantime, check out Gatherly’s post about the product update here: Introducing Backstage Broadcast for Gatherly Events

"Previously, Gatherly hosts only had the option to manage a broadcast by being in the broadcast themselves. In many cases, hosts wanted the ability to run a broadcast without being in it themselves. With the backstage broadcast feature, they can do just that!
Once a host starts a broadcast, they can easily add audience members to the backstage, and then to the main stage of the broadcast. Additionally, they can easily remove themselves or others from the main stage and to the backstage, where they still retain the ability to fully choreograph the broadcast."

Images from post:

Backstage Broadcast
Backstage Broadcast
Backstage Broadcast

📑 Back to Top


Restructuring the Chat Experience and Introducing a Notification Center

📌 Chelsea Note!
This was the last major product update that I worked on at Gatherly. The engineers had already started developing certain areas before my departure. The new update should be on its way. I’m pretty excited about it! Go team goooo!

Real-time chat messaging makes virtual events more interactive, engaging, and compelling. With Gatherly, users can message individuals, huddles, the entire event, and more.

Unfortunately, the experience with chat is a bit cumbersome. In the platform, the chat feature displays as a vertical tab that contains:

  • People List
  • Direct Messages (accessible via People List)
  • Huddle Chat
  • Floor Chat
  • Event Chat
  • News (aka Announcements)
 
                                                    Wireframes

Having access to all chats at once can have a firehose effect. There's a large number of messages appearing rapidly, repetitively, and continuously on different channels.

This can cause:

  • Alert overload 🤕
  • Confusion on which tab to engage with 😕
  • Disruption in your focus while video chatting 🛑
  • Messages being sent to the wrong chat ❌
  • A tiring experience from chat hopping 😫

As for the News tab, this is where admins post event announcements.
The tab label doesn't provide enough clarity on what's in that section. And the location of the tab diminishes the importance of the messages.

My primary task for this project is to figure out how to consolidate the chats.

Solution

Because of previous exploration work in this area, I got pre-approval for the following goals:

  • Have a clear, default chat that all users can engage with when not in a video chat.
  • Conditional chats (displaying a specific chat based on your actions)

Wireframes

The initial wireframes focus on:

  • Reducing tabs
  • Conditional chats
  • Introducing a chat function that enables admins to switch between message types sent. (chat vs posting announcements).
 
                                                    Wireframes

Even though I reduced the tabs, it felt clunky because the tabs shift each time you join a huddle or broadcast.

During a feedback session, an engineer suggests we relocate the People tab. I was happy to hear this because I was unsure of the complexity of doing that.

If we move the People tab, then we can remove the vertical tabs completely. Yay!

I did a few more exploration runs with the Head of Product. And I got the go-ahead to relocate the People tab and also to add a Notification Center.

Wireframe Updates

I relocated the People tab and converted it into 2 button types: Attendees and Participants. Depending on which chat you’re engaging with, control which button you see.

Event Chat

Event Chat
Displays when you are not participating in a video chat.
Clicking the Attendees button displays a panel that lists everyone attending the event.

Huddle Chat

Huddle Chat
When you join start or join a huddle, this chat displays.
Clicking the Participants button displays a panel. It lists everyone participating in the huddle.

Broadcast Chat

Broadcast Chat
If you are a speaker in a broadcast, this chat displays when the broadcast begins.
Speakers have access to the Speaker Chat and Audience Chat.
Clicking the Participants button displays a panel. It lists everyone participating in the broadcast.

The Notification Center displays in the main navigation. Placing it here will attract more attention and interactions. The center features Direct Messages and Announcements.

Notification Center - Empty State
Basic empty states for first use or when data is unavailable.
The state communicates what the user would see if they had data. And also provides constructive guidance.

Notification Center - Active/Filled State
When there is new data, a numbered badge replaces the notification icon.
Red dots state which message or announcement is new.

Here's the wireframe prototype I shared with the engineers. It illustrates users accessing the Notification Center and engaging with relevant chat.

Also, check out the Wireframe Annotations - Engineer Guide. It breaks down the features and links to the related wireframes.

Visual Designs

With the approval of the wireframes, I moved forward into visual designs. The new components and patterns follow Gatherly’s foundational guidelines (style, color, typography).

Chat

Chat variants

Notification Center

 
                                                    Notification Center

For better context, click here to explore full mocks.

Results

The chat experience is now focused, useful, and usable. Also, users should feel less overwhelmed. With the new Notification Center, announcements have increased discoverability and findability.

Retrospective

What went well?

  • It was fun working with engineers who are curious and/or supplied feedback on UX. Including them early in the design process kept them involved and aware of what was coming.
  • I was lucky to grow a trusting, respectful, and friendly partnership with the Head of Product. Our frequent and transparent communication made our collaboration fun. The Head of Product was also adamant about improving their self which had a positive effect on me.

What didn’t go so well?

  • Sometimes the Head of Product was too risk-averse. So, to win trust, I would always present exploratory wireframes. They showcase the bare minimum vs the "risky" maximum. I would also back up my design decisions with research findings. This process worked for us. We would either find a common ground or take the risk.
  • Keeping up with personal documentation! I have a ton of work documentation but I was a bit lax with unpacking it and placing it somewhere accessible to me.

What have I learned?

Always strive for a thoughtful partnership with product management for better collaboration. Years ago, I had a bad experience with an engineer. Because of this, I became hyper-focused on my relationship with them. I never thought about the partnership with the PM.

📑 Back to Top