Case Study Phoenix
GOAL
Upgrade the outdated call center platform to a responsive web app with an integrated workflow system, updated page templates, design system and modern color palette.
ROLE
As the Lead User Experience Designer on the project, I spearheaded a collaborative design effort that involved working closely with 6 product owners, 4 lead developers, and a 20+ person onsite/offshore team. Through my design leadership, we achieved outstanding results that exceeded all expectations.
TOOLS
Design Systems, UX Research, Figma, Rapid Prototyping and Agile Methodologies
What is Project Phoenix?
Phoenix is a legacy platform used by customer service agents for handling phone calls from customers. The portal assists customers with banking issues and has different roles assigned to each agent.
An additional green screen workflow platform will be integrated, but it needs modernization through screen templates. To make it more user-friendly, the portal will be upgraded to a responsive web application.
Competitive Analysis
During my competitive analysis, I discovered that most call center management dashboards initially display summary-level information for agents. However, a better approach would be to present clear, organized buckets of information in widgets that enable agents to easily identify required actions on their dashboards.
Findings from interviews
Preliminary design interviews were conducted with call center agents of different role types and job functions who are potential users of the product on a daily basis.
INTERVIEW INSIGHT #1
Agents are comfortable using a design that has more white space
When designing pages, it's important to consider white space for a cleaner look and better user experience, along with the availability and scrollability of information.
INTERVIEW INSIGHT #2
It's important to prioritize and organize data for the convenience of the agents
Group data by importance to quickly access key details during phone calls. Prioritize visibility of the most important categories on the dashboard to avoid scrolling and improve efficiency.
INTERVIEW INSIGHT #3
Agents require prompt access to information
Call center agents require prompt access to information that is relevant to their job roles. To enhance their workflow efficiencies, it is essential to prioritize the regular actions they take while handling calls on their dashboards. This will enable them to complete their tasks more efficiently and effectively.
INTERVIEW INSIGHT #4
Agents have no issue with extra page navigation
It's acceptable to navigate through multiple pages as long as each page provides meaningful information. It is not necessary to cram large amounts of information onto one page as it may become difficult to quickly identify important details during a phone call.
Opportunities for modernizing legacy user interfaces
Effective use of whitespace, typography, and color schemes play a pivotal role in creating a modern and visually appealing dashboard. The use of whitespace creates a clean and uncluttered interface, which in turn helps to focus the user's attention on the content and data presented. Typography plays an important role in ensuring that the dashboard is legible and easy to read. A modern and minimalist approach to typography can help to achieve a sleek and professional look.
In addition, the use of contemporary color schemes can help to create a cohesive and consistent feel throughout the dashboard. Well-chosen colors can help to highlight important data points, while also providing a visually appealing experience for users. A modern dashboard design not only presents data in a clear and concise manner, but also provides an intuitive and easy-to-use experience for users.
Collaborating with stakeholders throughout the design process can help to ensure that the design aligns with the latest technology standards and best practices. This type of collaboration can also help stakeholders understand the design thinking and approach that is being used, and can lead to better buy-in and adoption of the final dashboard product.
Target Personas
The data obtained from the interviews was used to create essential personas for identifiable types. These personas will serve as a reference point when designing the workflow screens for call center agents.
Challenges in Acceptance
The design process may face challenges due to a lack of understanding among internal product groups regarding the design philosophy of using white space to group and organize page information. It is important for the design team to effectively communicate the reasons behind this approach, which includes using modern type and color to enhance the user experience.
The current legacy design is causing a bloated workflow process and longer scan times for call center agents. Reducing the amount of information overload on the pages may improve efficiency.
User Flow Diagram
Agent flow chart
This flowchart illustrates the typical login and call center phone call process from an agent's perspective.
Visual Design
I created a comprehensive color palette consisting of a wide range of hues, shades and tones that will be used consistently throughout the product. The typography style that was chosen will be applied uniformly across all design elements. Additionally, a design system was developed to ensure consistency in the visual style and layout of the product. This system includes clear guidelines for typography, color usage, iconography, and overall design principles.
High Fidelity Wireframes
These high-fidelity mockups provide a detailed example of a typical call center agent dashboard. The dashboard is designed to help agents handle calls more efficiently. Once the agent has identified the user's role type, the dashboard presents relevant and concise information to the agent, which in turn, can be relayed to the caller.
The dashboard is constructed on a grid that offers flexibility with different widgets. This allows agents to customize their dashboards to emphasize and rearrange areas of importance. For example, an agent can prioritize a widget that displays the caller's details such as name, phone number, and account information. Additionally, the agent can add widgets that display the caller's call history, previous interactions, and notes from previous conversations. Widgets are designed to be intuitive and easy to use, ensuring agents can navigate the dashboard quickly and efficiently. Agents can add, remove and rearrange widgets based on their requirements. Overall, the call center agent dashboard is an essential tool that can help agents handle calls more efficiently, providing a better experience for both the agent and the caller.
Reflective Analysis
It is crucial to listen to the feedback of actual users when designing a product. In the past, we received strong feedback that the interfaces should look a certain way based on hypothetical assumptions about call-center agents' jobs. However, we found that sticking to a designer-led approach and providing the right product experience worked best. The redesign was successful because the designer used white space, modern typography, and colors to create the right user experience for call-center agents. We relied on a user experience design team to determine what the call-center agent workflow should look like, rather than leaving it up to the product owner team.
It is imperative that all stakeholders prioritize the development of a proper user experience design. Through usability testing, valuable feedback can be obtained to support design initiatives, thus ensuring that the design team has made informed decisions for the agent's dashboard experience with utmost confidence.