Enhancing Self-Help to Reduce Call Volume
Project Overview
In 2023, WM, North America’s largest waste collection company, faced significant challenges managing high support call volumes. To address this, the company launched a series of four 3-month sprints aimed at reducing calls by enhancing the online support experience, ultimately achieving a 9% reduction in support calls. As the UI designer on a cross-functional team that included a UX designer, content writer, and engineering team, I streamlined content presentation by organizing, grouping, and simplifying information. Additionally, I contributed to WM’s global design system by updating existing components and creating new ones.
My Role
UI Design | Component Design
Client
Waste Management
Tools
Abstract, Sketch, Invision, Figjam, Jira
Baseline Design Review
Project Scope and Opportunities for Improvements
Four key sections of the support flow were in scope for this sprint: the search section, browse all support topics, left navigation bar, and support articles. I identified two main opportunities for improvement: refining styling and spacing for better organization and improving how key content is highlighted.
The Problem
The lack of clear content hierarchy, grouping, and visual indicators to highlight key information which makes it difficult for users to find relevant information, increasing reliance on customer support calls.
The Solution
Enhance content hierarchy and organization with improved styling, spacing, and visual patterns to highlight key information, making it easier for users to find relevant details and reducing reliance on customer support calls.
Lo-fi Wireframes
Drafting Screens & Brainstorming Ideas
These lo-fi wireframes formed the foundation for the UI design. See annotated mockups below for key considerations and improvements.
Enhancing Search
To enhance the search section’s visual appeal and align it with back-end improvements, we aimed to maintain consistency with the existing search component across the WM website while making it more prominent. I updated the background color for greater visual impact and aligned the master component with WM’s latest styling and grid standards, integrating the new WM icon library.
Exploring Alternative Link Treatments
I analyzed WM’s link treatments to determine the best approach for the “All Support Solutions” links. The secondary navigation bar styling was a strong fit, but refinements were needed:
Hover State: Lacked visual indicators beyond color, failing accessibility standards.
Default vs. Disabled: Too similar, risking confusion.
Visited Links: Missing distinct styling, which could improve usability.
Before
After
Hi-fi Designs
Support Center Entrance
Once we finalized the styling and components for the support entrance page, we moved on to creating hi-fi wireframes. We optimized spacing to align with WM’s grid system, adjusted corner radius according to the latest guidelines, emphasized the search section to reflect backend improvements, and refined link styling for a more intuitive user experience.
Key Navigation Improvements
Simplified Navigation: Relocated secondary tabs to the directory page for a cleaner and more intuitive experience.
Improved Navigation Flow: Replaced the left navigation bar with breadcrumbs on article screens, dedicating a full screen to navigation for easier information discovery.
Reduced Visual Clutter: Removed unnecessary icons to improve clarity and user focus.
Enhanced Visual Design: Refined shadows and corner radius for a smoother, more modern aesthetic.
Improving Information Scannability
Improved Findability & Scannability: Introduced a simple component to highlight key details, making information easier to find and scan.
Enhanced Support Experience: Helps users quickly locate important information, improving usability and efficiency.
Flexible & Scalable Design: Originally designed for the support experience, this component’s minimal and flexible design allows it to scale across various webpages.
Hi-fi Designs
Improving Navigation: Leveraging Research Data & Cross-Functional Collaboration
By separating the left navigation bar from articles and shifting secondary navigation tabs to the directory page, we improved flexibility in organizing information. I structured the directory page to enhance content digestibility and scannability, improving the overall user experience. During this phase, I collaborated closely with a UX designer and content writer to integrate UX research insights, refining the directory layout and content.
Hi-fi Designs
Making Support Articles Easier to Read and Scan
To improve the readability and scanability of support articles, we implemented several enhancements to make key information easier for users to find and understand. Shorter articles now include a summary section at the top, while longer articles feature an “In this article” section with anchor links for quick navigation. We also standardized the visual design of the “Still need help” section to ensure consistency. Additionally, we introduced a “Did you know” section to share useful tips, tricks, and related information, further enriching the user experience.
Short Article
Long Article
Prototyping
Enhanced Support Experience
Here is the stakeholder-approved prototype that we presented to the developers to outline the sprint scope and implemented changes. To ensure a smooth development process, we also provided InVision links for developer specifications and Confluence pages documenting the new components, ensuring clarity and alignment across teams.