OVERVIEW
Casa is a new all-in-one platform designed to replace existing tools such as "Desktop One" and "Smart Desktop." The design team embarked on a project aimed at addressing inefficiencies within the CRM (Customer Relationship Management) used by Telus customer service representatives. The focus was on user experience, with a goal of identifying and providing solutions that incorporated user feedback to address the inefficiencies encountered in the CRM system.
Responsibility
As a UX/UI designer, I worked closely with developers to identify issues promptly and meet stakeholder needs. My goal was to deliver fitting solutions using diverse research methods.
Impact
Through improved workflow efficiency and rapid customer service, we achieved significant results: a 20% increase in Net Promoter Score (NPS) and a 15% rise in conversion rates.
✔️ Role
UX/UI Designer
UX Research
User Interviews
Wireframe
Tools
Figma
Mouseflow
Miro
Microsoft office
Squad
PM
Scrum
Designer
Engineer
+10
✔️ Why?
The project was initiated to understand and address the increase in customer dissatisfaction as revealed by the Net Promoter Score (NPS) aggregation of Telus Communications' customer service representatives. According to the NPS results, many customers provided feedback that response times were too long and inconvenient.
✔️ Defined Problem
I have recognized that the issues identified contribute to user confusion and delays, ultimately leading to a negative impact on the customer service experience. To tackle these challenges, I gathered input from various stakeholders within the team and engaged in communication with the project manager. Consequently, we reached the conclusion that a new integrated CRM platform is necessary.
✔️ Solution
Based on the communication with users (Customer service representatives) and insights gained through various research methods, I focused on removing inefficient elements and improving the overall structure of the platform. My goal was to create an environment where users can provide quick and accurate service to customers during interactions.
To address the identified core issues, we seized each pain point as an opportunity to minimize inconvenience while providing solutions that maximize work efficiency by maintaining familiar user interfaces.
✔️ Design Outcome
In a situation where more information needed to be provided than before, I integrated two platforms to maintain familiar UI elements and flows for users while enhancing readability with an improved information hierarchy. Additionally, by establishing the Casa design system and component library, we ensured design consistency to prevent user confusion.
RESEARCH
Process
The design process followed a two-week Agile Sprint system. It progressed from Foundation & Strategy to In-sprint Design, Build, and Publish, with each section allotted a two-week period.
In addition to my design tasks, I regularly collaborated with the design team and development team to establish a design system and document its behaviors and patterns. I also participated in icon design work.
01. Background
The Casa project was structured into more than 10 squads, with each squad including 10+ developers, UX/UI designers, project managers, and scrum masters, creating a large-scale setup.
To uncover the root causes of fundamental issues, I led various research activities, workshops, and interviews. Through this process, I personally experienced the development of a work culture emphasizing smooth communication and collaboration among team members, particularly with developers. This fostered a strong synergy within the project.
SWEs from the same squad
Casa is a new All-In-One platform designed to replace existing tools such as "Desktop One" and "Smart Desktop." The design team focused on identifying inefficiencies in the CRM (Customer Relationship Management) used by Telus customer service representatives. This project aimed to provide a solution that prioritized user experience and incorporated user feedback as much as possible from my perspective.
02. Understanding Structure
I thoroughly grasped the overall journey and structure of the Casa service to understand team dynamics and usability within a large organization. Through effective communication with design colleagues and user groups, I visualized information about the framework and operational systems, making it easy for all team members to see and understand.
03. User Interviews
Before starting the project, I created a simple diagram to understand the overall structure of the customer service representative department, processes, and procedures involved in their work. Through effective communication with design colleagues and user groups, I visualized information about the framework and operational systems to make it easy for all team members to see and understand.
Further Insights
✓ Among the 10 users, 8 always used the web-based environment when engaging with customer service. 2 users used PC templates but preferred PCs.
✓ 8 out of 10 users were reluctant to explore and learn new features beyond the ones they frequently used.
✓ For all 10 users, the most commonly used feature in customer service was the menu tab. 9 out of 10 users believed that the menu tab feature was not effectively filtering accurate content for the users.
04. Define Problems
I have observed that the outdated user experience, user interface, and design system are hindering the service quality of call center agents and significantly impacting work efficiency. Therefore, a new and improved user experience and user interface are needed.
05. Hypothesis
We expect to enhance customer satisfaction by increasing the efficiency of customer service through providing an all-in-one tool that integrates all essential functions for Telus call center agents' customer interactions.
06. Information Architecture
Collaborating with designers, product owners, scrum masters, and stakeholders, we organized and documented the flow of the entire platform into an Information Architecture. Given the large-scale structure of Casa, it was imperative to produce documentation accessible to all project participants at any given time.
IDEATE
01. Design Opportunities
As a solution to the problems discovered during the research process, I was able to suggest the solution into three different approaches. Due to internal confidentiality policies, it is difficult to disclose the detailed process, but various approaches such as Google Sprint Workshop method were utilized to derive solutions.
02. Opportunities for Improvement
To optimize the user flow of the Casa platform, I closely examined the identified issues and described in detail areas for improvement. Considering the team's limitations in directly modifying the overall platform design due to restricted authorizations, I attempted three new approaches in specific areas.
PROTOTYPE & TEST
Solution 01
Menu Navigation Bar
The navigation bar of Casa serves as a tool for users to easily find the functions they need. To provide users with various data quickly and easily, we offer a clear data hierarchy structure.
Previous Approach
It was found that the existing top navigation bar of the platform was highly inefficient and disorganized for users to find the required functions. In the new Casa platform, it was necessary to classify all functions to create an environment where users could easily access them.
User Survey
I conducted surveys with five participants, the objective of the survey was to assess the usability of the menu navigation bar features. I prepared both qualitative and quantitative questions for this purpose.
Through two types of surveys, most users responded that they spent the most time searching for the features during actual customer interactions. This gave me confidence in the necessity of the menu navigation bar. With the users who participated in the survey, as well as the PM, Head of Product, and UX Design Lead, we filtered the features provided by Casa and categorized data into the Information Architecture accordingly.
Information Architecture
Initial Prototype
In the first prototype, we designed the menu navigation bar to be located at the top of the platform, ensuring users can easily access it at any time and in any situation. Based on the newly created information structure, the navigation bar consists of a primary section at the top indicating the account of the customer the user is working on, and a secondary section at the bottom listing each main function.
Usability Testing
After the initial prototype, I conducted usability testing with 5 users to validate the proposed design solutions. Based on user feedback, I adjusted the design solutions and measured the overall impact of these solutions on the user journey.
The test results were more successful than anticipated. Most users were highly satisfied with the addition of the navigation menu bar alone, rating it as easy to understand in terms of overall flow, placement, and design.
However, as evident in Task 4, while convenient during the process, the relatively large size of the navigation bar caused inconvenience in finding information on small screen modes as it obscured much of the page content. Users mentioned this issue as they had to use the scroll bar extensively.
✔️ Adjustment
To address the issues discovered during testing, we implemented a second update that allows users to hide the navigation menu bar itself when necessary, thus eliminating all inconveniences.
Main Page - Casa 360 Overview
The left image depicts the situation with the menu navigation bar activated, while the right image shows the situation with the navigation bar hidden via the hamburger menu icon.
This approach allows users to completely hide elements that may obstruct their view due to screen size constraints during complex data management processes, providing a user-friendly feature that can be reactivated when needed.
Profile Page - Charted data
This structure is particularly evident when dealing with charted data. In the Profile Page - Charted data, it supports an environment where the screen can be minimized as needed, allowing users to focus only on the data they require even within limited screen sizes.
Solution 02
Auto Search
The second solution provides users with a semi-automatic search feature when searching for addresses on pages where they input or modify customer's personal information during customer service.
This feature utilizes the Canada Post API, simplifying the search and validation process by allowing users to search and confirm addresses without manually repeating the process. Thus, saving a significant amount of time efficiently.
Previous Approach
The existing process for modifying customer information felt extremely cluttered, with an excessive amount of information crammed into a small space. Users had to input all information manually and verify its accuracy by searching on other platforms or contacting the customer again. This was how the information input and modification process was carried out.
Initial Prototype
In the first prototype, efforts were made to maximize readability during the process of inputting customer information. A defined structure of specific information hierarchy was established from page titles to input labels, enabling users to easily find information. Additionally, autocomplete functionality was provided in the input box when users entered addresses, minimizing user inconvenience.
Usability Testing
I went through iterative reviews of the proposed design solutions and adjusted them based on user feedback. To measure the overall impact of these solutions on the user experience, usability tests were conducted with 5 users.
During the testing, most users immediately recognized the horizontal input pattern in Task 2, but one user found it initially complex. While performing the automatic search result suggestions and subsequent validation process (Tasks 4 and 5), most users experienced discomfort. Users mentioned that the explanations of the features were not sufficient, leading them to mostly guess how the features worked.
✔️ Adjustment
Task 4 - Before
Before the adjustments, the process involved users entering an address into the search input field and the automatic search system immediately appearing. However, before reaching that process, users did not understand what address to enter and where to input further details of the address.
Task 4 - After
After the adjustments, an instructional banner was implemented to clearly convey all the information users needed to know during the process. Additionally, an icon representing "search" (a magnifying glass) was displayed to indicate that the input field is used for searching. Furthermore, to accommodate cases where users need to input detailed address information, a secondary address field was added below the automatic search input field.
Task 5 - Before
Before the adjustments, users had to manually validate each address entry one by one after inputting the address. During testing, the process that caused the most confusion for users was the validation process. The validation process in the initial prototype was not intuitive, requiring users to manually find the optimal options.
Task 5 - After
After the adjustments, only two valid address options are displayed in a popup modal to minimize users' confusion. This allows users to experience a quick and accurate validation process by providing them with additional stage to review the information during the update process.
Solution 03
Information Hierarchy
As a solution to the critical design element of information hierarchy, we leveraged a design system in the new platform. When I joined the team, the design system was in backlog status. I made efforts to take initiation and jump on researching and completing the design system to improve irregular platform patterns and very low readability.
FINAL DESIGN
REFLECTION
What Would I Do Differently?
While I focused on a specific user flow - emphasizing overall intuitiveness and efficiency - I discovered there was room to narrow down the problem even further. The experience of modifying information still remained broad from start to finish, leading me to improve some features but not include them in the case study. Next time, I will break down the problem into smaller parts and address each one individually.
Although I allowed my ideas to diverge into different directions, I didn't thoroughly select which ideas to primarily develop further. Consequently, I found myself attempting to redesign all minor elements without evaluating their importance or priority. I learned that making choices is as crucial as generating ideas in the design process.
During user interviews, users generally expressed satisfaction with Casa. However, by asking detailed questions, I was able to uncover their unseen needs - opportunities for improvement! Redesigning or enhancing user experience involves not only resolving frustrating moments but also addressing problems that users themselves haven't noticed.
