cisco-webex-logo740.png

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.

Group 5@2x.png
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

Group 57@2x.png
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

Group 31@2x.png

Interactive Whiteboard 

Group 46@2x.png
Show who's editing
Control who's sharing

Interactive Whiteboard 

More options - Smart Shape, Insert Images
Group 33@2x.png

Whiteboard Repository

Group 117@2x.png

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

Group 114@2x.png

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

icons8-happy-90 (3).png
#8: Aesthetic and minimalist design

Design is simple and clean. Key features are prioritized. 

icons8-happy-90 (3).png
#2: Match between system and the real world

Icons are easy to recognize and align with common design patterns. 

icons8-happy-90 (3).png
#5 Error prevention

Whiteboards are automatically saved which prevent loss of work. 

icons8-sad-90 (1).png
#6: Recognition rather than recall

Lack of instructions on how to retrieve whiteboards.

icons8-sad-90 (1).png
#1: Visibility of System Status

Lack of notification when a whiteboard is successfully shared. 

icons8-sad-90 (1).png
#7: Flexibility & efficiency of use

Whiteboard names can't be customized.

VIEWPOINT 2:  COLLABORATING ON  A SHARED WHITEBOARD

Group 115@2x.png

01. Viewing the shared whiteboard

02. Select whiteboard from the toggle menu

03. Select the shared whiteboard

04. Use the editing tools to collabroate 

icons8-sad-90 (1).png
#3: User control and freedom

Collaborators can't make direct edits on the whiteboard.

icons8-sad-90 (1).png
#6: Recognition rather than recall

Lack of prompts or instructions on how to edit. 

icons8-sad-90 (1).png
#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.

icons8-happy-90 (3).png
#4: Consistency & standards 

Consistent layout throughout the system.

icons8-sad-90 (1).png
#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

Cover Image – 7@2x.png

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

Group 76@2x.png
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

Group 21@2x.png
The only option available to the collaborator on the shared whiteboard is Stop Sharing.
Group 79@2x.png
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
Group 91.png
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

Group 118@2x.png
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

Group 93@2x.png

(1) Notify collaborators when a whiteboard is shared

Group 94@2x.png

(2) Indicate who's editing on the board

DESIGN CHANGE 2

Allow customization on repository

Group 117@2x.png

(1) Add a rename feature to allow customization

(2) Allow users to rename of the whiteboard

Group 120@2x.png

DESIGN CHANGE 3

Promote efficiency of use 

Group 124@2x.png

(1) Provide users with more tool options (e.g. smart shape) 

Group 128@2x.png

(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.

Group 5@2x.png

Feel free to check out my other projects :) 

Screen Shot 2021-01-07 at 1.09.28 PM.png
Group 82.png