Contact Center
Agent Desktop
Transforming a 320×480 Salesforce widget into a full omni-channel Contact Center cloud SaaS — with real-time analytics for agents, managers, and beyond.
Building a new level of omni-channel Contact Center cloud solution for the CC-One organization.
My role as UX/UI Designer was to design the interactive and visual solution for the product — working with our AVP of Engineering Ramesh Bobba, the engineering team managed by Prashanth Gujjeti (Sr. Director of Engineering), and our team in India. The central UX challenge: turn the BroadSoft Contact Center Salesforce widget experience into a full desktop SaaS, integrated with the Analyzer system for real-time analytics.
From widget to desktop. Transform a 320×480px Salesforce widget experience into a full desktop SaaS solution.
Real-time analytics. Integrate the Analyzer system to deliver live analytics to agents, their managers, and higher.
Limited research inputs. No formal user research pipeline — design decisions grounded in VP product knowledge, product-team input, competitor analysis, and trend research.
A new level of Contact Center. Build the next-generation omni-channel Contact Center cloud solution.
Interactive + visual solution. Design the product's full interaction model and visual language.
Themable by design. Let users customize main colors and styles — a custom theme solution matched to brand needs.
Research
Ideal UX research blends user feedback, analytics data, competitor analysis, and design-trend research. In this case, the foundation was VP input based on deep product knowledge, user information from the product team, plus my own analysis of Contact Center competitors and current design trends in the sector.
UX Wireframes
Based on initial input from Ramesh and stakeholders, I designed the first round of wireframes in Omnigraffle. After general approval of the UX flow, work continued in Sketch on the visual solution — with all subsequent UX issues resolved in color Sketch mode.
Visual UI Solution
From several color schemes, the team selected a green one — a good match for the BroadSoft brand style. That grew into an idea to let users change main colors and styles entirely: I designed the product's style customization and theming system.
Design Patterns & Iconography
Throughout the design cycle I produced new icons and design elements for our design library — creating the BroadSoft icon set of 70 icons covering every BroadSoft Contact Center tool. The set was converted to SVG and shipped as an online icon web font for our applications.
Results
The next level of the Contact Center application was built — one of the main products in the BroadSoft acquisition portfolio, with selling revenue increasing through 2016–2019.
Before / After
From the 320×480 widget to the full desktop agent experience.
One of the main products in the BroadSoft acquisition portfolio.