Timeline
10 Weeks (Jan-Mar 2020)
My Role
Usability Testing, Redesign
Tools
Figma
Team Size
4 -> 1
Reimagining the Webex Teams Whiteboard for a seamless collaboration experience on tablets
This is a Cisco sponsored school project. My team was being asked to conduct a baseline usability study of Webex Teams Whiteboard. Seeing the potential of the product, I took the initiative to translate the learnings into concrete design components to reimagine the whole experience.
PROBLEM
Whiteboard is a novel feature on Webex Teams that allows users to collaborate in real time. However, it has limited functionality and no work has been done by Cisco to test its usability on tablets.
Webex Teams serves more than a million users across the globe. As one of the key features for supporting online collaboration, it's critical to evaluate the whiteboard's usability and effectiveness in empowering users.
Constraints
Limited time & lack of previous usability studies on relevant products to rely on
Business Goals
Increase user engagement and retention rate
Design Goals
Tackle user pain points and provide an intutive experience
OPPORTUNITY
How might we improve the Webex Teams Whiteboard to better support online collaboration on tablets?
DESIGN OUTCOMES
Reimagining the Webex Teams Whiteboard
Before
After
Interactive Whiteboard
Show who's editing
Control who's sharing
Interactive Whiteboard
More options - Smart Shape, Insert Images
Whiteboard Repository
Whiteboard Repository
Search Whiteboard
Filter options
Rename whiteboard
USABILITY HEURISTICS
Analyzing through Nielsen's Ten Principles for Interaction Design
Prior to creating the protocol for the usability testing, I took the lead in applying Jakob Nielsen's 10 Usability Heuristics to inspect and examine the Whiteboard user interface and user flow from the perspective of a designer. ​
VIEWPOINT 1: SHARING A WHITEBOARD
01. Open the whiteboard repository
02. Select New Whiteboard
03. Use editing tools to illustrate ideas
04. Select exit to view the whiteboard in repository
.png){kind=small}
#8: Aesthetic and minimalist design
Design is simple and clean. Key features are prioritized.
#2: Match between system and the real world
Icons are easy to recognize and align with common design patterns.
#5 Error prevention
Whiteboards are automatically saved which prevent loss of work.
.png){kind=small}
#6: Recognition rather than recall
Lack of instructions on how to retrieve whiteboards.
#1: Visibility of System Status
Lack of notification when a whiteboard is successfully shared.
#7: Flexibility & efficiency of use
Whiteboard names can't be customized.
VIEWPOINT 2: COLLABORATING ON A SHARED WHITEBOARD
01. Viewing the shared whiteboard
02. Select whiteboard from the toggle menu
03. Select the shared whiteboard
04. Use the editing tools to collabroate
#3: User control and freedom
Collaborators can't make direct edits on the whiteboard.
#6: Recognition rather than recall
Lack of prompts or instructions on how to edit.
#9: Help users recognize, diagnose, and recover from errors
It's unclear that collaborators need to retrieve the whiteboard from the repository in order to edit it.
#4: Consistency & standards
Consistent layout throughout the system.
#1: Visibility of system status
Lack of indication of who's currently editing on the whiteboard. This could be problematic when more users are involved.
USABILITY TESTING
Conducting baseline usability studies with information workers
After identifying and confirming the project goals and research questions with key stakeholders from Cisco, my team and I spent 8 weeks preparing for and running the usability studies. I assisted with designing the protocol and conducting the studies with recruited participants.
How easy or difficult is the whiteboard feature to learn and use?
01.
How effectively does the whiteboard feature support remote collaboration on tablets?
02.
Key Research Questions
Target Users
We narrowed down the target users to information workers who need to communicate and collaborate with co-workers regularly on tablets. These people have substantial demand for a remote collaboration tool that can be used with confidence. For this purpose, we managed to recruit 7 users (3 pilots, 4 users) with occupations including IT professionals, product managers, and designers. All users met the following criteria:
Over 2 years of work experience in their field
Novice users of the whiteboard feature for collaborative remote meetings
Have online meetings at least 3 times/week ( > 15 mins)
I moderated 2 in-person usability testing sessions. They all lasted about an hour and were video-recorded. Participants were given a set of 6 pre-study questions, 13 tasks, and 7 post-study questions. We created scenarios asking the participate to pretend collaborating with a colleague (acted out by one of our group members) during a remote meeting.
Method
Usability Lab Setup
USER FEEDBACK
What did users struggle with the most?
My group and I analyzed the recordings and walked through each session together to gain a full picture of the key insights.
I was specifically responsible for documenting and analyzing Issue #3: Whiteboard Retrieval Process.
ISSUE 1
Unclear Sharing Status
No notifications that the whiteboard has been shared.
Source of Errors
4/4 participants were unsure whether the whiteboard has been shared with the collaborator
​
4/4 participants found the lack of notification frustrating
Quote
"I think this whiteboard is already shared with Jane, and I suppose Jane can see what I'm doing....or can she?" - P4
ISSUE 2
Lack of Editing Tools
The only option available to the collaborator on the shared whiteboard is Stop Sharing.
Source of Errors
4/4 participants had no trouble viewing the shared whiteboard, but couldn’t collaborate due to the lack of drawing options
​
1/4 participant was confused why there was a Stop Sharing option when they weren’t the one sharing it in the first place
Quote
"Oh I see Jane is sharing a whiteboard but I don't see any color options or any options here, I feel I cannot collaborate with her on the whiteboard." - P1
ISSUE 3
Complicated Retrieval Process
Source of Errors
Force to go through a three-step process in order to retreive the shared whiteboard in the repository.
Step 1
Step 2
Step 3
4/4 participants were confused as they were not given any prompts on how to retrieve the shared whiteboard
​
4/4 participants spent quite a bit of time exploring how to retrieve the shared whiteboard
Quote
"It took me 3 steps to open the board that the collaborator is working on, made me go through a difficult path. I think once it's shared, it will let me edit the whiteboard." - P4
ISSUE 4
Unorganized Repository
Whiteboards can't be renamed which makes it hard to retrieve.
Source of Errors
4/4 participants found there were too many screens with no names making it hard to search for a particular shared whiteboard
Quote
"I can see a lot of whiteboard on the screen...not labeled, so it's hard to find the target one." - P3
Impacts & Design Opportunities
After a quarter of hard work and tremendous learning, my team and I presented the usability testing findings and design recommendations to the designers, Design Director, and Engineering Manager of the Cisco Webex Teams. It was well-received and all insights were regarded as practical and in-depth.
Seeing the huge potential of the concrete design recommendations, I decided to take on the challenge to reimagine the whiteboard experience on my own.
Redesigning Webex Teams Whiteboard
DESIGN CHANGE 1
Increase visibility of system status
(1) Notify collaborators when a whiteboard is shared
(2) Indicate who's editing on the board
DESIGN CHANGE 2
Allow customization on repository
(1) Add a rename feature to allow customization
(2) Allow users to rename of the whiteboard
DESIGN CHANGE 3
Promote efficiency of use
(1) Provide users with more tool options (e.g. smart shape)
(2) Quick search to locate a shared whiteboard
REFLECTION
Looking back and running forward
Through this project, I had the opportunity of working with clients in the real world. I learned the importance of keeping everyone on-board and ensuring we agree on the same set of goals and expectations. This helped me come a long way from initiating the proposal to completing it and presenting the results back to the stakeholders.
​
​
What can be next? Explore the pathway of getting to the whiteboard from the chat interface.
Feel free to check out my other projects :) ​
​
