top of page
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.
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.
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.
Add users?
User management
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
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
-
The Double Diamond of Design: Utilized to structure the problem-solving approach.
-
Narrative Design: Created simple stories to highlight key points and concepts.
-
Wireframes & Sketches: Focused on information architecture and interaction without high-fidelity visuals.
-
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.
Flowchart
The Zoom Phone setup process is complex. I created a design flowchart to clearly structure all the user flows and steps.
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
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.
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.
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.
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.
Validate that the design is meeting requirements
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
"Landing page" states
Start
In progress / completed
Three generic forms for onboarding mock-ups
I created three generic forms that all onboarding mock-ups must adhere to.
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:
After:
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
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.
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.
Add users?
User management
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!
Add users
After finishing the "Activate Zoom Phone" flow, the admin unlocked the "Invite Users to Zoom". Admins can add users here.
bottom of page