Okay, admit it. Like me, you’ve never used Hangouts by Google before. No? Just me? Fine. A week ago, I crawled out from under the rock and finally used Google Hangouts for the very first time. Why? I started to work on some non-profit work that required me to work remotely with an amazing team that is The Brandvan. The experience I had was from a scale of omg-that-was-so-easy to why-is-it-so-hard-to-do-this?
So here’s an overview of a UX audit I conducted and a few design solutions I have conjured up over the past week.
Case Overview
Product: Google Hangouts. Google Hangouts is a communication platform developed by Google which includes messaging, video chat, SMS and VOIP features.
Platform/Device: Desktop web browser
Length: 1 week
Design software: Sketch
Prototype software: InVision
Research/Testing: Google Forms, UsabilityHub
Discovery
When defining the constraints, I decided to keep the scope of this challenge within the web browser, considering most use cases of this product is for work and it’s where most people use Google Hangouts on (done in research). When defining the users initially, it was tough without doing some research. After all, my knowledge was limited in this space. However, two things I did want to set as a constraint for myself was budgeting and timing. Realistically, what can I do to improve the existing user experience in such a short amount of time?
Research
Competitive and Comparative Research
Through some digging around on the web and countless searches on “communication platforms”, “VoIP”, “Google Hangouts”, “top reviews”, “worst reviews”, “team collaboration solutions”, etc., I gathered enough information to categorize the competitive markets into three spaces.
- Work use
Required features: file sharing (multimedia), whiteboarding, screen sharing, recording, clear video/audio quality, easy joins/leave, scheduling, location sharing, contacts management, project management, fast/easy access, video conferencing, group calls, group chats, 1-on-1 chats/calls, meeting notes/history
Competitors: Skype, Zoom, Microsoft Lync, Slack, Twitter, emails and phone calls - Personal use
Required features: cross-platform/multidevice, emojis/giphy/stickers, multimedia sharing, location sharing, conversation history, group chats/calls, 1-on-1 chats/calls, contact management, easy/fast access, schedule meetups, photo, status, video/audio calls
Competitors: Facebook, Facetime, Line, Skype, Twitter, Instagram, WeChat, phone calls - Work/Personal use
Required features: file sharing, scheduling, easy/fast access, contact management, group chats/calls, 1-on-1 chats/calls, video/audio calls, location sharing, conversation history/notes
Companies: Skype, WeChat, Twitter, phone calls
From these comparisons in features, there are opportunities for Google Hangouts to compete in features such as clear distinction between work/person, easy and clear access to contacts, scheduling, calls, and chats. Finally, since Hangouts is integrated as a part of Gmail’s interface, it has a clear advantage competing in the space for work use communication platform.
User Research
To understand the users, I conducted a survey using Google Forms to mainly gain an understanding of what people generally use GH for and who they are. Not only this, I was curious to learn what tools people generally prefer when they communicate with co-workers, friends, and family. It was valuable to not only gain quantitative data but qualitative data that expressed their past experience in using GH.
Key survey findings:
- Most people use Google Hangouts mainly for work, and sometimes to communicate with friends
- Most people use e-mails, phone calls, text messaging, and video calls for work purposes
- Most people use social media, text messaging, and phone calls to communicate with friends
- Most people use phone calls and text messaging when contacting family members
This validated my original assumption that most Google Hangouts users are professionals that need to collaborate with team members and other stakeholders virtually because of time and geographical constraints. This gives me a great opportunity to look for ways to help design a solution that can help GH not only differentiate from competitors, but also improve its user experience.
Common pain points:
- Bad video/sound quality
- Hard to get started (onboarding experience)
Online Reviews
Users tend to leave reviews when they either have a really great experience and feel personally connected to the product or they’re at the complete opposite of the spectrum. That said, it is important to read what the users have to say when it comes to the pain points and delights they have about our products. After all, they’re who we’re designing for, and it’s easier now than ever for users to voice their opinions.
Common pain points:
- Bad video/audio quality
- There’s no way to easily switch between personal and work accounts
- Cannot figure out how to add contacts
- Other tools like Skype allow sharing rich media files, unlike GH
Below is a compilation of some reviews that I have seen reoccurring more often than not.
My personal experience and UX audit
As a Google products user, I was pretty excited to get my hands dirty with Google Hangouts. I took down notes that I caused friction in my experience as a new user, and while some are minor usability problems that didn’t completely ruin my experience because the interface still looks so gorgeous, there were a couple of pain points that really turned me off.
Minor frictions:
- When joining a call via Google Calendar’s Hangout link, a video call window popped up and immediately I thought I was in the call and others could see me.
- Ending the call closed the window. I never knew the dashboard existed.
- On the GH dashboard, under “Hi, Andy! Get started by calling or messaging a friend below.” I knew what the video button did, but I could not figure out what the call button and messaging button was for. Clicking on them did nothing. “Message” took me to Contacts and “Phone Call” took me to…well, the same thing the phone button on the menu would display when clicked. Perhaps, it was because I had no contacts in GH.
- “Hi, Andy!” Get started by calling or messaging a friend below.” — This did nothing for me. Over time, I just didn’t see the value of that message that could not be customized or removed.
- Inconsistent signifiers that don’t do what I expected it to do. The hamburger and kebab menu on the left-hand side expanded the same menu. The expanded menu also did not provide much more value than the basic menu items.
- A tiny minimize button for chat windows. This considers Fitt’s Law, where the time to acquire a target is a function of the distance to and size of the target. Facebook does this well by making the entire top bar a maximize/minimize function, giving the users that multitask often and going through multiple chats easier and faster way to focus on the tasks at hand.
Major pain points:
- I could not figure out how to add a contact. “New conversation” appears in all “contacts”, “conversations”, “phone calls” tab. Pressing “New conversation” only gave me options to search for a contact that doesn’t exist in my contacts and adding a new group.
- I have 2 accounts/profiles as a Google user. One for personal use and one for professional use. Google Hangouts identifies only one account as the default account and upon reopening, automatically displays the Hangouts dashboard logged in with the default account. This is painful for me as I have accidentally joined a video call for work while logged in using my personal account.
Planning
With so much information gathered in the research phase, planning will help bring all the information together to make some sense and provide clarity on the pain points that need solving.
User Persona
Combining the survey results and general findings on profile characteristics that appeared most often throughout online reviews, I developed a persona for our primary user who uses Hangouts mainly for work. The secondary users would be someone that uses Google Hangouts primarily for both work and personal use. However, in the interest of time, I would like to move forward with helping our primary user, Marie Blanchez to solve her pain points and help her use Google Hangouts more efficiently and effectively.
User Journey Map
From the research, I was able to find a pattern in the online reviews. By matching the pattern with survey results and my own personal experience as a new user, I came to a synchronization of delights and pain points. I depict this by using a user journey map. Below, you’ll see that Marie’s experience started very high when she realized a need and fulfilled that need by using Google Hangouts to schedule a team meeting. However, her experience steadily drops as minor frictions and major pain points hit Marie throughout her call and her attempts to follow up after the call.
Design and Prototype
Pain point #1 — Bad Quality (sound/video/connection)
This problem was most prevalent in both user reviews and survey results. I looked into the problem and found that the interface during the video call did not provide information about connection strength for all participants and the user. Users may be quick to judge a product’s quality without exploring possible causes. The Doherty Threshold states that productivity soars when a computer and its users interact at a pace that ensures that neither has to wait on the other. Therefore, it’s important to resolve this issue because this would be the primary reason why users abandon Google Hangout! If Marie were experiencing a delay or choppy video/audio quality, she would not know if her connection or another user’s connection was the problem. A feedback would be helpful to Marie in this case.
Solution
1. Add a tooltip when the system experiences a weak or unstable connection. Marie may not be aware that she can adjust the bandwidth settings to improve the call quality.
2. Add connection status to participant information
Wireframes
Pain point #2 — Work/Personal Distinction
Marie uses Google Hangouts mainly for work. As such, being able to switch between accounts is essential for her organization and multitasking. It is also important for her to be able to set her own default account.
Solution
Without introducing new visual signals for Marie to learn, I made a small adjustment to the existing Google account switcher. Giving Marie the flexibility to choose what she wants to suit her word needs is the goal.
Wireframes
Pain Point 3 — Adding a New Contact/Start a New Text Conversation
Marie encountered this issue when she needed to follow up after a meeting on Google Hangouts. She needed to start a new text message with them. Without clear signifiers and wayfinding, Marie got lost and frustrated when she could not add a new contact to her Hangouts. She just got off a meeting with Sean and Wendy in a Hangouts call!
Solution
Providing an easy way to add a new contact is key here. Eliminating unnecessary buttons will also help reduce the confusion by putting a constraint on her number of choices. According to Hick’s Law, the time it takes to make a decision increases with the number and complexity of choices. Basically, the old acronym, K.I.S.S., works here. I eliminated “Phone call” and “Message” buttons and moved the “Video Call” to the menu for a cleaner and simpler look. Oh, did I mention as a BONUS I added a more personalized message, “Your next meeting is on Nov. 19, 2018 at 10:30 am with Sean P.” with the option to load more. I feel this is a more personalized message for someone like Marie, who would love to learn quickly when her next couple of meetings are and with who. This provides value to stay on or return to the dashboard for Marie.
Wireframes
Pain point #4 — Enhanced Multimedia Sharing
As evident across most user reviews and in the competitive and comparative analysis, the need to share multimedia and rich files is becoming more essential to casual users, let alone the power users. Users like Marie need to share Google Doc files, including Docs, Sheets, Slides, etc. Hangouts can stay competitive by integrating all solutions together and truly give Hangouts the collaborative communication solution. Hey — on their Facebook, they did say they’re “killing” Slack.
Solution
Add the ability to share photos, video messages, Google files in Drive, and addresses in Google Maps in video and text conversations. BONUS for the ability to share e-mail threads from Gmail to save endless e-mail forwards! Who’s with me?
In the interest of prioritizing simpler design improvements, I did not draw any high fidelity wireframes for these ideas as these are more complicated functions and interfaces. However, here are some low fidelity wireframes to play around with.
Wireframes
Pain point #5 — Consistent Signifier/Feedback
I identified some minor frictions that could have eventually turned into a deal-breaking pain point if not for Hangout’s beautiful interface using Google’s Material Design. This is known as the Aesthetic Usability Effect. Still, for power users like Marie, beautiful designs aren’t enough to keep them using a product if they have too many minor issues. A problem I ran into was not knowing if I was already in a Hangout call or not as soon as I clicked a Hangouts link on Calendars. A red hang-up button was visible when I joined, so I thought I was in the call already. Hanging up also closed the window, so I never knew the dashboard existed.
Solution
Placement of “Join Hangout” and elimination of the hang-up button. Options to go to dashboard or close window.
Wireframes
Testing
I ran two usability testing for my new designs that could compare with existing designs. Other prototypes were either new features or functions that I could not test in such a short amount of time. I ran these tests on UsabilityHub and testers were random users all over the world.
Pain point #5 — Consistent Signifier/Feedback
For this test, I ran a 5-second test in which users are shown a screen/interface for 5 seconds, then asked a question.
Google Hangout’s current interface before joining a video call
My proposed design
Although the sample sizes aren’t big enough to be certain, 82% of the 17 respondents think the user is already in the call, which isn’t true. Without a larger sample size, I would not conclude that my design is the absolute solution, but it definitely is approaching the right direction. Perhaps a follow-up question could be “Why do you think that?”
Pain Point 3 — Adding a New Contact
For this test, I ran a navigation test to see if users were able to add a new contact based on that interface. Although, in Hangouts’ current interface, it’s not possible to add a new contact through its search function. I later found out that it must be added in Google Contacts, another application.
Google Hangout’s current interface
The respondents were clear in their responses in that adding a new contact was vague. The heatmap showed a range of places they thought they could add a contact. Let’s see how my design performs against this.
My proposed design
As you can see, no respondents were lost and were all able to find the expected place to add a new contact.
Evaluations
I thoroughly enjoyed this design sprint, to say the least. If allotted more time, I would spend more time to do more usability testing and study on user engagement within the product and micro-interactions with other users. More time would also allow for bigger sample sizes, but it’s always fun to learn so much about a product in a short time by going through a UX audit with a human-centered approach. I always strive to align user goals with business goals and it excites me to think about other creative ways I can do so through design.
What Could Go Wrong?
Scenario 1: Marie wants to start a new group chat following a group call in order to share meeting notes and discuss further action items. When she clicks on the icon to start a new conversation, she has the options to enter the contact’s name, email, or phone. With a long list of contacts and more than 7 participants, she needs to keep track of whose name she has already checked off and who still needs to be invited. The more participants she needs to invite, the more likely she abandons this task altogether.
Potential Pitfall: The number of items in a list exceeds working memory capacity will cause a user to repeat a task, increasing frustration and time to complete a task.
Design improvements:
- Placeholder to show invited participants with the ability to delete. Helps with keeping items in working memory low.
- Filter (company, location, groups, special tags) and Sort functions. Helps with less memory recall effort
UX Law: Miller’s Law — The average person can only keep 7 (+/-2) items in their working memory.
Scenario 2: Marie is experiencing delays in both sound and video quality.
Potential Pitfall: The warning notification is not prominent enough, blends into the rest of the UI elements and does not fulfill the purpose of giving the user a warning.
Design improvements:
- Make the warning notification pop out with a different, more noticeable colour that represents warning or danger. eg. yellow/red.
UX Law: Law of Similarity — The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if these elements are separated.
I hope you enjoyed my design process. What interested you the most? What would you have done differently? Leave a comment below. I would love to know!
