top of page
MacBook Pro1 empty.png

Zoom Phone Admin Onboarding

Role: Product designer / Designer owner
Collaborators: Product Manager, Researcher, Content Designer, Front-end Engineers, Sales
Launched in 2022
Zoom Phone is a cloud-based business communication system on the Zoom platform
Zoom Phone is a cloud-based phone system that allows businesses to make and receive calls over the Internet. It is part of the Zoom unified communications platform and offers features like voicemail, call recording, call forwarding, and auto-attendant.
Zoom phone has over 5 million seats in 2022. 17% of them are Small Business (SMB) Users.
zoom client home.png
phone.jpeg
The SMB (Small Business) admins are the primary users
SMB Admins who purchase phone plans need to assign these plans to their employees.

Pain Points

  • Admins can not set up Zoom Phone themselves after purchase.

  • Admins can not find where to add users.

There is no setup guide available to assist administrators with their onboarding process.

admin1.jpg
No Setup Guide

The current Add User UI was scattered across several places in the web portal, making it difficult for users to find all of the necessary elements.

admin1.jpg
Add users?
User management
admin2.jpg
Phone system management
Add users?

Research

  • 85% of SMB admins require assistance from the support team for onboarding.

  • The phone support team spends an average of 2 hours per day per person to provide this help.

Solution

I worked with the research team to reach their goals:
Understand the unique onboarding needs for Zoom Phone Admins with the SMB space. As well as, help address the current gap in the onboarding experience.

I worked with the content designer to align design and content:​ Craft the content to be polite, approachable, and conversational.

Communicating with the Research Team and Content Designer

Questions to Answer
● What does the current onboarding process look like for SMB Phone Admins today?
● What do SMB Phone Admins need to have to set up their phone accounts?
● Where should Zoom be directing their efforts to, as we look to build an onboarding experience that will satisfy the needs of our SMB customers?
What do our SMB users need from Zoom to be successful during onboarding?
Seamless migration from their prior phone system.
● A better centralized location that clearly documents step by step how they should be setting up their phone in order.
More clarity around what is included in the package they have purchased. (Support specifically)
● Account review: Once they are set up, a review to ensure that they are using all features that are available to them.
● Porting: Once users' phone numbers are ported, an additional phone call with a phone specialist to ensure everything is working appropriately.
● Teams do not have any hanging or outstanding questions.
● End users have no operational issues & are able to use their phones with no issues.

Research result

image.png
image.png

Design goals

  • Help more SMB admins set up their phone plans by themselves

  • Reduce Zoom support time

Solution

  • To create an Onboarding Center or Setup Guide for Admins.

  • Add all admin tasks to one page in the web portal.

Design Process

  1. The Double Diamond of Design: Utilized to structure the problem-solving approach.

  2. Narrative Design: Created simple stories to highlight key points and concepts.

  3. Wireframes & Sketches: Focused on information architecture and interaction without high-fidelity visuals.

  4. Mockups: Developed detailed, high-fidelity mockups for key screens.

1.The double diamond of design

Discover, Define, Develop, and Deliver—emphasizing a user-centered, iterative approach with periods of divergence and convergence to systematically address and solve design challenges.
Double_diamond.png

Flowchart

The Zoom Phone setup process is complex. I created a design flowchart to clearly structure all the user flows and steps.
flowchat.jpg

2. User scenario

Narrative for "Welcome page"
As an admin, after I purchase phone plans for my company, I am taken to a new page called “Guided setup”. The guided setup page has a friendly welcome message that makes me feel my purchase is appreciated. The page informs me of what I need to do to get my phone system working. It also lets me know what is required of me in terms of time, documents, etc. I can start the setup process at that time or come back to it later. There is also easy access to support if I need it.
The story also can be used for testing.

Compare a design solution against the requirements

01 - Welcome 3.jpg

Design requirements
a. Welcome message, including the name of the feature
b. Some delights (image, animation, etc.)
c. Thank you message
d. Overview of the steps that are needed to complete
e. Estimated time commitment
f. CTA to start the process
g. Link to support

Future-proofing: Using this Setup Guide for all kinds of Zoom products in the future

As a design owner, I expand my design scope to help more users and achieve more business goals. All the Small Business (SMB) Zoom users will use this Setup Guide. It will positively impact products such as Zoom Meeting, Zoom Apps, Zoom Chat, Zoom Marketplace, etc.

Welcome - CD Edits.png

Setup Guide for:

Zoom Meeting, Zoom Apps, Zoom Chat, Zoom Marketplace, etc.

I discussed with the PM and scheduled multiple meetings with other Zoom product teams to confirm if we can use this Setup Guide for all Small Business (SMB) Zoom users. It was exciting to know that all SMB users can use this Setup Guide. This is a great approach and convenience for both Zoom and users.
After finishing this Phone Onboarding design, I will focus on this bigger scope.

Communicating with PM and other Zoom product teams

To create an admin onboarding center.
Consolidate all admin jobs-to-be-done into a centralized page in the web portal and build a framework that will support the admin onboarding of Zoom Phone.

3. Wireframes & sketches

Make initial explorations without using high-fidelity visuals.
Focus on the information architecture and interaction and not on the specific controls.
Think about flow, responsive design, accessibility, etc. 

To create an admin onboarding center.
Consolidate all admin jobs-to-be-done into a centralized page in the web portal and build a framework that will support the admin onboarding of Zoom Phone.

Version 1 - Cards

I used cards to organize all the steps for users to follow.

card.jpg

Being pushed back by the Front-end engineers

I showed this low-fidelity design to the engineers for discussion to make sure there were no technical issues in their development process. Their feedback surprised me. I got two important pieces of information from them:
1. The onboarding process must be orderly.
2. The user must complete a step before starting the next or next two steps.

4EA31C4D-E28A-427F-9005-CDB8724D73B7.jpg
3BB60A21-A10C-41DD-987A-A590BFB12B27.jpg

Communicating with Engineering team and Hardware team

I worked with the Zoom Phone engineering team to learn more about the onboarding experience technically.

I worked with the Zoom Phone hardware team to learn more about different devices and their unique onboarding user experiences. Using all of that knowledge to iterate my design.

Version 1

Version 2 - Rows

After communicating with the engineering team and Phone hardware team to get more details. I created version 2 that meets more user needs.

row.jpg

Validate that the design is meeting requirements

biaozhu.jpg

Design requirements
a. Title, reminding the user of a section name and purpose
b. List of all current guided setup steps available
c. The step itself. This can be "Start", "In progress" or "Completed" state
d. Icon or image for the step
e. Title of the step
f. Description of the step, purpose
g. CTA
h. Scroll bar, if necessary

Version 2

Version 2

Translate into design system components for validation

MacBook Pro copy.png
Landing.jpg

"Landing page" states

Start

Landing3.jpg

In progress / completed

Landing4.jpg

Three generic forms for onboarding mock-ups 

I created three generic forms that all onboarding mock-ups must adhere to.
02.jpg
03.jpg
04.jpg

Designed a new Step Indicator for design system

In the Zoom Design system, we only have one horizontal step indicator, and it doesn’t work for this feature :(
I designed a new component, which was developed and contributed to the design system for all product teams.

Before:

Frame 41206.png

After:

Frame 41206.png

Communicating with other product teams and design system team

After discussing with other product teams, they may want to include more steps in this onboarding process. I decided to change this component and convinced the design system team to incorporate it into the Zoom design system. This iteration not only shorts the step indicator but also saves time for other design teams in the future.

4. Mockups - Key screens - demo

Frame 28458.jpg
MacBook Pro1 empty.png

Growth opportunity discovered: Adding a purchase CTA for users during the Setup Phone process

During the Assign Zoom Phone process, users may need to purchase more phone numbers for their employees. Can I add a purchase CTA for users during that process? This would also be good for our business.

Communicating with the Zoom Monetization team

After discussing with the Zoom Monetization team, they allowed me to add a CTA to go directly to the buyer and pricing page. We will add this feature soon.

Impact

Before:
 

  • Admins can not set up Zoom Phone themselves after purchase.

  • Admins can not find where to add users.

Bigger scope in the future

There is no setup guide available to assist administrators with their onboarding process.

admin1.jpg
No Setup Guide

The current Add User UI was scattered across several places in the web portal, making it difficult for users to find all the necessary elements.

admin1.jpg
Add users?
User management
admin2.jpg
Phone system management
Add users?

After:
Admins who purchase Zoom Phone can set up their phone numbers and add users by themselves step by step. 

The Setup Guide is here!
Follow the simple steps to set up phone plans!

Landing.png
Add users

After finishing the "Activate Zoom Phone" flow, the admin unlocked the "Invite Users to Zoom". Admins can add users here.

MacBook Pro1 empty.png
bottom of page