Huddle

The Problem

One of the challenges facing remote work is connecting with team members on a visual and interpersonal level. According to a study by PwC, 83% of employers say the shift to remote work has been successful for their company. 55% of employees are willing to have a hybrid model (remote work at least three days a week).

To fix the lack of human interaction, video conferencing tools have taken control of how team members and virtual teams communicate. But even this fix also has its downside. According to a study by Stanford, (the Stanford Virtual Human Interaction Lab), there were also psychological consequences of spending hours per day on these video conferencing platforms (not that these tools are particularly bad), but it was highlighted how these videoconferencing tools technologies can be exhausting causing overall fatigue.

I volunteer at a local church, every afternoon we have a huddle (which is where the name of this application was inspired from). In this huddle, many teams gather around in a circle and listen to the plans for the day. This is a simple 10-minute meetup every Sunday where everyone can feel closer together on an interpersonal level.

The Solution

I designed a tool that can bring remote teams closer together. Users can send async videos and voice notes in a threaded manner while keeping operations going limiting scheduled meetings while helping the lack of communication and connection a remote environment can bring.

The Obstacles

There really isn't any asynchronous video applications out there. Researching was hard because there weren't proper examples I could rely on. I had to use some inspiration from applications I have used such as Discord, Slack, Snap Chat, Instagram, and Zoom. Then somehow mesh all of those applications together.

Understanding the Domain

I started the project with secondary research. I already had knowledge of a majority of the popular messaging and video messaging tools, but I knew I needed to understand and research the use cases of these niche applications and what was their purpose. I focused more on the audience these applications were going for.

In order to understand more about these messaging tools, I needed to research these tools one by one, put them side-by-side for special insights, and visit the product to understand the product and find out how features were used and implemented.

Here are some key insights from the secondary research:

• Branding: Branding and overall design increase company image.
• Doing Too Much: A messaging tool that does too much (many features that do not connect with the brand's values) will spread itself too thin and has an increased potential of unstructured design.
• Core Audience: It is better to focus on a niche and core audience and stick with it. This removes future confusion about what the product does.
• Remote Life: Remote work and hybrid format are here to stay. A company that has a proper system in place to connect with virtual teams and communities will have longevity in their respective business.

According to a study by SensorTower, videoconferencing applications usage grew by 253% during the pandemic with Zoom leading the charge. Even as parts of the world is slowly reopening, data shows that the usage has continued to remain elevated beyond what was seen during peak pandemic levels.

Since there are a number of communication tools that businesses and online communities use, I went ahead and compared a few of the most popular ones messaging and video based products.

To gain a better understanding of how users operate with video messaging tools, I conducted one on one interviews for my primary research. I wanted to learn about about daily goals, pain points, and useful features that would help them use their respective product more. Each set of questions had a purpose, so I categorized them based on sets (Introductory, Motivation, Desirable, Sentiment, Valuable, Wrap Up)

View Research Debrief in Notion

‍
What I found was that users wanted to avoid writing walls of text for task-related work while avoiding misunderstandings. Companies had the necessary tools to be ready for a remote environment the entire time, but none with async capabilities which required synchronized virtual meetings at all times.

• Save Time: Users expressed how async meetings can help save time in their workday by replacing virtual meetings.
• Clarity: Users expressed how async video communication can help get a point across clearly with no misunderstandings versus regular messaging.
• Solving Problems: Users expressed how async videos can help team members problem solve quicker than text.
• Connection: Remote users expressed how much an async video application is helpful to bring more of a personal connection to team members.

"You know, this might actually be good for daily stand-ups. We have an automated bot with Slack that asks us general questions, and it kind of feels like no one checks that."

"When my team builds a product, things can get so complex that they fall between hopping on a meeting or a simple slack message. I would rather send a video message."

After conducting the research with users who work for remote companies and my research interviews, I had enough data to know what a user was looking for in an async application. Users prioritize saving time, sending clear feedback, and connecting with remote team members.

After reviewing and summarizing the interview results, I created a persona and empathy map to help guide my design. After creating my persona, this guided me to create the site map and user flow.

Building my persona after the research allowed me to create a sitemap for Huddle. The goal I was trying to create for Huddle was to design a platform that allows an easy method to send and receive asynchronous video messages.

Designing for Async

Knowing Huddle’s purpose, it was easy to begin sketching and designing an app focused on async video messaging. Using a mixture of the research interviews and apps like Slack, Discord, and Snap Chat , I wanted to create a familiar experience while designing something new.

Digital Sketches

I created a few alternatives of how accessing and viewing videos (the area where users would spend most of their time) would look. Doing this quickly helped me analyze the pros and cons before going digital.

After selecting one of my alternatives, I created a mid-fidelity design. These are just a few of the screens (Home, Daily Standup Channel, Recording a Video, Workspaces, Video-List View, and Transcription).

Platform Huddle is called when the community at VOUS (where I volunteer to do UX work) gets together (from all departments) and goes over the plans for the day. This is done every week. This is where I was inspired to name the application “Huddle”. As for the yarn ball, the application has threaded messaging for their respective channels. What makes a yarn ball? A long and connected thread intertwining each other to make a ball. On an abstract level, I thought this was the best way to convey the application and what it does. With the brand name as "Huddle" and brand image as a threaded yarn ball, Huddle helps untangle the miscommunication of text and have uninterrupted productivity through connection. Connection through voice. Connection through video.

The reason why I chose a dark theme for this application:

• The Challenge: I have always loved dark mode, but could never implement it correctly. Believe it or not, my UX portfolio started in dark-themed colors. For months I was trying to get it right, but couldn’t. So I gave up and went with minimal colors of light white. Anyway, this project was a chance to tackle it again. I learned how to properly have a balance between dark colors and dark colors that were softer. I chose purple because of the challenge as well.
• The Purple: I chose purple because of the challenge as well. Purple is not implemented in a lot of designs. But I also know that purple signifies ambition. For a remote tool designed for productivity within remote teams, that's what I symbolically also wanted to show with Huddle. It takes ambition to work remotely and keep processes asynchronously moving.

This is the first version of the design, but the final version of the design went through big changes after testing. I wanted to create a familiar design. Many people use applications such as Discord, Slack, Snap Chat, and Instagram. I brainstormed to create a hybrid version of these into a productive asynchronous video messaging application.

Below is the first version of my design, after some testing - there were a number of changes made for the final design after the feedback was given.

My research led to me having to create a desktop application for Huddle. Most users mentioned that they would use a desktop app from Huddle while working from home and use the mobile application while they are not sitting at their desks.

Testing the Details

A remote usability testing was conducted using a high-fidelity prototype design on Figma. The reason for this test was to examine the flow of design, ease of navigation, and the extent to which design reflects the values of the brand. This test also tries to view and understand users' pain points, goals, and recommendations. The test was conducted with five participants via remote video calls. The Otter AI application was used to transcribe the dialogue live to pick out keywords used to analyze and compare with other participants.

The goals for the usability testing:

• To test the end-to-end flow of the design and ease of navigation.
• To see if the overall look of the website reflects the brand's values.
• To validate if the design solves the user's needs and pain points that were captured during the research phase.
• To observe any areas of setbacks, questions, confusion, hesitation, or difficulty for the user.

View Usability Test Planning in Notion

Usability Testing Summary

The usability testing and the prototype were a success. Overall, the participants were able to complete the tasks in a timely manner and enjoyed the flow of the site, design, and navigation.

"I feel like this is a pretty cool hybrid of Snap and Slack."

"I think everything's pretty clean, everything seems organized."

View Usability Test Findings in Notion

One of the top requested feedbacks were to make the camera button more prominent and wanting a way to reply to specific videos. These two requests alone forced me to change the whole UI and how async was going to function with Huddle. I combined list and carousel views together (for video watching) and I added the camera (aperture) icon to the carousel so users. This gave me more screen space to add in thread replies and a timer to show users how long they had left in a video. To scroll through videos, you would do so as scrolling through a regular list. You also have the carousel option to scroll quicker through old videos and play them from there.

After usability testing was completed, I was able to refine the process for Huddle. It takes less time to send a video, it’s easier to find the camera button to record the video, online availability is now active among users, in thread replies was added, and to view transcriptions are a lot cleaner and more productive.

A Time to Reflect

I took the time to reflect on what it entailed to design an end to end video messaging application.

My Biggest Challenges

There were a few challenges I had to truck my way through while designing an asynchronous video application for mobile and desktop:

• Researching: There really isn’t any asynchronous video application out there, so there weren’t many examples I could rely on. I had to get inspiration from many synchronous tools while trying to piece it together in an asynchronous format. I almost felt like Frankenstein. I had to learn and get pieces from my favorite video applications (Zoom, Google Meets) and async messaging tools (Slack and Discord) while trying to make sense and combine a hybrid version of these tools that wouldn’t be confusing to the user.
• Desktop Application: For a project that was only planned to be for mobile, research changed that and had me create a desktop version of the application as a companion as well. So the challenge here was on how to create a familiar desktop experience from my mobile version.

What I Learned

I learned that there are many variables when designing a mobile application. If you are able to identify commonalities and focus on delivering human-centered insights, you can easily create a product that is easy and enjoyable to use for everyone.

• Stay Open: My priority was to listen and consider all approaches and recommendations from the feedback I received from my user testing. I am glad I did because I am way happier with the second iteration of my design versus my first design. It’s more feature-rich, requires less of a workflow, and the architecture is cleaner as well. This also led me to create a desktop version of this application that I am really proud of. This wasn’t planned on my end, but I am also glad I did the extra work to create an application where users can use Huddle for home and on the go.

What Would I Do Differently?

Looking back, there are a number of things I would have done differently. But there is one that really stands out for me.

• Stay Organized: Because I had to unexpectedly create a desktop application because the research also led to that route, I ended up creating the mobile frames and desktop frames in the same Figma page, along with the components. This led to a headache trying to make sure which component I was correctly trying to update.

Next Steps

With that being said, the next steps of this design process would be:

• Test Priority Revisions: Conduct another usability testing to see if the revisions improved the overall experience.
• Iterate & Test: If necessary, iterate and testing to be conducted for other potential improvements.
• Developer Handoff: Export projects and assets to developers to deploy.

‍