UX Lead I 2022
I designed a self-service portal from the ground up, transforming Mitel’s previously complex onboarding process into a streamlined, user-friendly experience for business customers.
Mitel Business Customer Onboarding Portal
Mitel is the world’s second-largest provider of unified communications solutions, offering VoIP, call services, contact center, and collaboration tools primarily for businesses of all sizes. Serving customers from small businesses to large enterprises in more than 100 countries, Mitel enables seamless and efficient communication across and within teams.
About the Company
Onboarding new Mitel customers has traditionally been a lengthy and cumbersome process, which could take up to 45 days.
This had negatively impacted customer satisfaction, increased churn rates, and led to higher support costs.
How did it start
Simple answer is because of its complexity and the scale of requirement when onboarding a B2B customer.
A B2B onboarding process involves multiple steps (some steps had to be done manually and offline), multiple decision-makers, back-and-forth communication, and a large volume of data.
Why was it taking so long?
What needed to be done during onboarding?
For example, when a new business customer needed to onboard a new phone system with Mitel, they had to complete all the following actions:
-
Ordering software and hardware from Mitel;
-
Integrating with existing systems like CRMs into Mitel service system;
-
Upload and manage their user information;
-
Purchase new phone number or transfer their existing phone numbers;
-
Configure their systems;
-
Fulfill unique customization needs.
These comprehensive tasks were previously fragmented across multiple platforms, with no standardized process to unify them. To address this, I took on the role of UX Lead to design a self-service onboarding portal that streamlined and simplified the entire process.
Project Basic Info
Key Stakeholders
* Project Manager
* Channel Partners
* Sales Team
* Activation Team
* Engineering Team
User Base
For MVP project in the North
America, Over 130K new users
onboarding annually
My Role
Solo UX Lead, owned the entire end-to-end process:
* Design Strategy;
* User Research & Analysis;
* Concepts, Hi-Fi Design
* Component Library
Platform
* Browser-based
* Support both Desktop and
Mobile
Unlike B2C apps, the target users of Mitel’s business solutions are typically responsible for setting up on-premise and cloud systems for their organization or company.
Target Users
To understand why the onboarding process were so lengy, I initiated user research to uncover user needs, behaviors, pain points, and essential features to include in the onboarding experience.
User Research
Using data gathered from user interviews and surveys, I defined two key user personas:
Jim represents a small business owner with straightforward needs, focusing on setting up call services and managing call forwarding rules for his business.
Alice represents an IT expert from a mid-to-large organization who seeks a more flexible phone system that supports complex call flow setups and an online portal to access and manage comprehensive user data, call activities, billing information, etc.
User Persona
Through user interviews analysis, and feedback from Mitel channel partners, I identified the top 12 essential functions the self-service online portal should offer to ensure a successful onboarding experience for new business customers, primarily IT admins from client organizations.
Key Function Goals
Organizing the functions into categories clarified the design structure, allowing the entire onboarding experience to be presented as a "step-by-step" guide to help IT admins complete all necessary tasks.
Structure Those Functions
Design Example
Given the complexity and scope of the project, I will use some design examples to showcase my user-centric design methodology.
1. Setup Call Forwarding Flow
A key function during customer onboarding is assisting IT admins in setting up a call-forwarding flow for their organization.
For instance, in a public high school, incoming calls to the school mainline may need to be forwarded to various departments via keypad options, such as “Press 1 for the front desk,” “Press 2 for admissions,” or “Press 3 for the school office.” For certain options, like the school office, sub-menus may be required. The IT manager at the school would need to configure these call routing rules to align with these needs.
Additionally, they may need separate call forwarding rules based on the time of day—such as forwarding calls during business hours to specific departments, while after-hours or holiday calls might direct callers to voicemail or follow an alternate routing flow.
How it used to be done in the past?
Previously, setting up a call forwarding flow was a multi-step process:
1. The Mitel Sales team contacted customers and provided an Excel template via email.
2. Customers filled out the template with their call routing requirements and returned it to the Sales team.
3. The Sales team manually entered these call routing rules into Mitel’s internal system, captured a screenshot of the configured settings, and sent it back to the customer for approval.
4. Customers reviewed and confirmed the configuration.
This process required significant back-and-forth communication, with numerous manual steps that made it highly time-consuming. This error-prone approach would lead to further delays.
Customers expressed frustration with how this setup was handled in the past.
Take a look at my proposed design
I streamlined the entire process by simplifying the back-and-forward communications and moving call flow setup tasks online.
Once customers confirm their mainline number, the portal provides an option to define specific dates and schedules for business hours, off-hours, and holidays, allowing them to configure customized call routing rules for each timeframe.
In the design, I included a visual stepper to track progress and ensured responsive functionality across both web and mobile. Additionally, I added a secondary stepper to manage subtasks, enabling the flexibility to add multiple schedules, along with a “Save and Finish Later” feature for users who wish to pause and return later.
After the customer creates their schedules, each schedule will appear directly in the left sub-menu for easy access.
One common request that I got from user interviews, especially from small businesses, was for a simple and streamlined call flow setup with minimal steps and destinations.
To meet this need, I designed pre-defined templates customized for different business sizes, allowing customers to quickly configure call routing without starting from scratch.
Once IT admins configure the call flow, they can view an overview of the call forwarding rules in a list format. However, advanced users may need to create submenus within existing menu options, which a simple list view may not effectively accommodate for displaying these additional layers of information.
How can the UI better present that?
To make the call forwarding rules more intuitive, I introduced an infographic tree chart that offers a clearer and more visually engaging way to display the call forwarding flow, enhancing data visualization and overall usability.
Design Example
2. Dashboard Overview
The main purpose of a dashboard in this B2B onboarding portal is to provide the IT admins with a centralized, real-time overview of key metrics, data, and insights relevant to their business operations, enabling efficient decision-making and streamlined access to essential tools and functions.
How it used to be done in the past?
Previously, Mitel customers had to complete the entire onboarding process through different fragmented systems or even offline. After which they received their login credentials via email in order to access the system management portal.
This outdated dashboard in below screenshot was the first thing they encountered—it lacked key metrics and wasted a lot of white space.
Take a look at my proposed design
I redesigned the dashboard to prioritize clarity, efficiency, and relevance, focusing on user-centric layouts that emphasize essential metrics, data, and statuses across these four areas of design thinking:
1. Enhanced Information Visibility:
The high-level dashboard presents key metrics like system call volume and duration, giving IT admins instant insights. An account summary also provides quick access to essential user and phone data at a glance.
2. Customizable Dashboard Modules:
With a modular, widget-based design, the dashboard allows IT admins to select and prioritize information most relevant to their workflow. This personalization creates a more efficient, tailored user experience, putting control in the user’s hands.
3. Unfinished Task Alerts:
Admins can navigate the portal without fully completing the onboarding process, as any unfinished tasks are prominently displayed on the dashboard. These act as reminders for future action, ensuring no steps are overlooked.
4. Real-Time Order & Transfer Tracking:
Pending orders and phone number transfer requests are tracked with real-time updates on the dashboard. IT admins can click to view detailed information, offering a transparent, streamlined view of each task’s status.
Other Functions Design
Below is the full set of design screenshots for this onboarding project.
Click on an image to view it at full size.
1. Login & forgot password:
-
Streamlined Login Experience: Prioritizing simplicity, the login and password recovery screens should have a minimalistic design. Since initial credentials are generated and provided by Mitel, the process avoids customer IT admins registration complexity, ensuring a straightforward and efficient entry point.
-
Customizable White-Labeling: Offer customer IT admins the flexibility to personalize the login interface by allowing them to modify the color scheme and upload their own business logo. This customization enhances brand alignment and offers a more tailored experience for clients.
2. Confirm Company Basic Info & Emergency Location:
-
Visual Stepper for Progress Tracking:
Introduce a visual "stepper" in the header to help guide users through the onboarding process. This stepper clearly displays the current and upcoming steps, providing users with an overview of their progress and next actions.
-
Mobile-Responsive Design:
Create a mobile-friendly version of the onboarding portal for IT admins who access it via mobile devices. This ensures a seamless user experience across platforms, allowing for convenience and flexibility in managing the onboarding process.
-
Company Information Confirmation as First Step:
The initial step of onboarding should prompt IT admins to confirm the company's basic information, including the mandatory VoIP Emergency Calling address, which will serve as the 911 caller ID. Given the importance of business location data, this information cannot be edited directly within the portal.
-
Seamless Pause and Resume Functionality:
With the "Save and Finish Later" option, IT admins can easily pause their onboarding progress and return at their convenience. The portal automatically saves all inputs and selections, allowing users to pick up exactly where they left off without having to re-enter information or restart steps. This ensures flexibility and minimizes frustration during the process.
3. Review Previous Orders:
-
Clear Order Summary Display:
Provide IT admins with a detailed order summary that includes both software services and hardware (such as PBX phones). This allows admins to review and confirm their orders easily, with the option to order additional items directly from the portal. Due to the business agreement terms, any downsizing or changes in commitments will require direct communication with Mitel's vendor or sales team.
-
Easily Modify Delivery Dates:
Eliminate the need for offline communication with the sales team by allowing IT admins to easily adjust delivery dates directly through the portal, streamlining the process and improving overall efficiency.
4. Add Users & Rooms:
-
Efficient Bulk User and Room Addition:
Provide IT admins the ability to quickly add employees and room setups either individually or in bulk. The portal offers a downloadable template for bulk uploads, optimized for companies that track employee data in Excel. This speeds up the user management process and ensures seamless integration of existing data.
-
Streamlined Post-Bulk Addition Editing:
Once users are bulk added, the portal displays all employee information in an editable table format. This allows IT admins to make any necessary adjustments and select appropriate Mitel services for each employee, enhancing flexibility and control over the setup.
-
Real-Time Mitel Service Allocation:
Provide IT admins with a realtime summary that reflects remaining available Mitel services. This ensures that admins can easily track and assign unused services to employees as needed, maintaining oversight and operational efficiency.
5. Choose a mainline number:
-
Mainline Setup Simplified via Portal:
Enable IT admins to effortlessly set up and manage their company’s mainline through the portal. As the central contact number for the business, the mainline serves as the primary point of communication. The portal streamlines the process of configuring this number, along with its associated call flows, ensuring a seamless experience.
-
Flexible Mainline Management:
Offer IT admins the option to either continue use their existing mainline without disrupting business operations or select and purchase a new mainline number. This flexibility ensures minimal downtime while maintaining communication continuity for the organization.
-
Displaying a secondary “stepper” for clear instruction:
Different from previous stages, the “setting up mainline and call flow” stage requires several sub-tasks. To better indicate the logic, a secondary “stepper” is added on the left section to show the process.
6. Transfer Phone Numbers:
-
Online Phone Number Transfer Process:
The portal enables customers to transfer their existing phone numbers to Mitel or purchase new numbers seamlessly, entirely online. By streamlining the process, users can avoid the need for interactions with multiple departments or third parties, improving efficiency and reducing friction in onboarding.
-
Strategic Placement of Lengthy Processes:
Considering it could take up to 14 business days for phone number transfers, this step is positioned as the final part of the onboarding journey. This design choice ensures that IT admins can complete earlier tasks without being blocked by the extended timeline of number transfers.
-
Streamlined Data Entry via Carrier Invoice Upload:
The portal simplifies data retrieval by automatically recognizing and displaying phone numbers from uploaded carrier invoices. This feature reduces manual entry, saving IT admins significant time and effort during the onboarding process.
-
E-Signature Support for Transfer Requests:
By enabling secure and fast e-signature capabilities, the portal eliminates the need for physical signatures or paperbased processes, allowing for quicker and more convenient number transfer requests.
-
Multiple Carrier Transfer Management:
For customers with phone numbers across multiple carriers, the portal supports handling multiple transfer requests simultaneously. It also provides an easy way for IT admins to track the status of each individual request in real-time.
User Feedback
I tested the final design prototype with several customers and received overwhelmingly positive
feedback.
Below are two examples that highlight their appreciation for the user-centric design approach.
Outcome
The final product was highly successful, reducing average customer onboarding time by 35%, driving a 29% annual revenue growth, and increasing customer retention by 24%.
Key Takeaways
-
Incorporating channel partners and customer support: It is important to consider the needs and feedback collected from the channel partners and customer support team, during the design process to secure a successful SaaS system design.
-
Good relationship with our partners and customers: It took our team more than 11 months to dive deep into the project and keep iterating our design concept. During these 11 months, we communicated with our channel partners and some existing customers on a bi-weekly basis, which was extremely helpful in ensuring we stayed on the right track.