As a UX Designer at Goldman Sachs, I led the redesign of the Agent Portal experience.
MY ROLE
I updated core user flows, the tool information architecture, and user interface consistency and scalability through design systems.
I executed tasks such as identifying issues, defining problem scopes, prioritizing tasks, designing solutions, conducting testing, and overseeing the implementation process.
Role
Lead UX Designer 0-1
Responsibilities
Interaction Design
UX Research & Testing
Building a Style Guide
Cross-team Collaboration
End-to-end Project Ownership
Duration
Aug 2021 -
March 2022
Collaborators
Senior Design Lead
1 Junior Designer
2 PMs
3 Engineers
IMPACT
Key results
+ 21%
- 28%
+ 15%
Overall agent effciency
Average handle time
Customer satisfaction score
"I love that I can access all the actions in one place now! This is a game changer."
"I know exactly where to go to find a customer's previous statements. I had to search around for this information before."
What is Agent Portal?
Let's consider a scenario to understand the context.
1. Let's say you own an Apple card
2. You have a question related to one of the transactions on your statement that you can't quite figure out by yourself
3. You call the customer service contact number to talk to an agent who can help you with your query.
The agent looks up your account and gives you appropriate information
The interface that the customer service agents (or simply, the "agents") interact with is the Agent Portal.
As a UX Designer at Goldman Sachs’ Cards Division, I was tasked with the responsibility to improve the Agent Portal Experience. Goldman Sachs was the issuing bank for the Apple card and General Motors' credit card programs. Collectively, the agent portal facilitates thousands of agents to service over 10 million cumulative card holders.
Unintuitive, complex interface
Agents work in a high-stress environment. Lots of questions are thrown at them while they need to find the right information and respond appropriately to customers. The agent experience was not optimized for maximum efficiency of agents.
Final Solution
A quick look at the screens before delving into details.
Following content documents my design decisions through this project.
Please contact me for more details about my design process at shravyasimha.kc@gmail.com.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Golman Sachs.
As the offerings and features grew, and cardmembers increased in numbers, we wondered..
How might we speed up agent workflow and holistically enhance the agent experience to efficiently find and relay information to the customers?
RESEARCH
Understanding our users and the problem
To begin, I transitioned into research mode, which consisted of:
Insights from User Research:
THE USERS
Customer Service agents
Customer service agents are individuals employed by Goldman Sachs to assist customers with inquiries, issues, and requests related to the company's products or services. Their primary role is to provide timely and helpful assistance to customers, ensuring a positive experience and resolving any problems or concerns they may have.
So, what could our typical user look like?
Let's call our typical user Jenna. To understand her motivations, challenges and needs, I drew up a persona. For every design decision I made, I used Jenna as a decising factor. Will Jenna benefit from this design decision? How will Jenna use a particular feature?
THE TASKS
Inquiries, Information, Resolution
Agents typically handle a variety of tasks, including:
1. Providing product or service information, guidance, and troubleshooting assistance.
2. Assisting customers with account management tasks, such as account setup, billing inquiries, and password resets.
3. Addressing and resolving customer complaints or issues, escalating to higher-level support as needed.
4. Processing customer orders, returns, refunds, and cancellations.
RESEARCH TAKEAWAYS
Learnings from Research
Factoring in the persona, learnings from research and the varying requirements, I encountered two obstacles to overcome:
Challenge 1
Updating a visually dated interface which is out of touch with modern website design.
How might we visually refresh the agent portal and make it look more cohesive and modern?
Challenge 2
Simplifying an interface that is cluttered and overwhelming.
How might we streamline the cluttered information and ensure key features are easier to find and use?
IDEATION
Brainstorming & Problem Space Deep-Dive
I led a brainstorming workshop with my team - 1 junior designer, 2 PMs and 3 engineers, to narrow down the problem space and brainstorm solutions. I used Figjam for this activity.
The end result of the brainstorming activity: Using the affinity map we created in figjam, we came up with a set of "How Might We"s based on the problem areas uncovered during user research. For each category, we brainstormed solutions and voted to select ideas and features to implement.
Information Architecture
It was crystal clear from our audit of the interface and the brainstorming activity that we need a complete overhaul of the information architecture. I created a new information hierarchy to allow agents to easily navigate the interface and ensured that logically related content was placed together.
Important flows in the Agent portal experience
Design Criteria
On a high level, design criteria for improving agent experience:
Business Goals
DESIGN
Wireframing & Iterations
I was able to test out my concepts with users, which gave tremendous confidence in my design decisions. 1 PM and I conducted a usability test with 5 participants who interacted with the early prototypes. We collected feedback, which helped some of the decisions that follow.
DESIGN IDEA 1
Glance-ability
I opted for a card layout to make the experience feel more tactile and interactive rather than exhaustively reading text with no real logical categorization.
Cards provide readability and glance-ability. With a first glance, users are able to consume and digest information more easily.
DESIGN IDEA 2
Creating an Action Center
I grouped all important actions that were scattered in various places in an action center so that it is easily accessible to the agent while assisting a customer.
I created the action center to be a permanent fixture in all pages - the actions that appeared changed based on which page the user is on.
Option 1: Display relevant actions within related groups of information
Option 2: Separate the action center into a different section
Option 3: Similar to option 2, but only show the most important actions and provide an option to show all options
I went ahead with option 2. Separating the action center on the page gave immense clarity to the users.
DESIGN IDEA 3
Separating informational and operational sections
In an effort to improve the information heirarchy and ensure easy retreival of information, I separated the informational and operational sections, namely the customer/ account etc information and the action center.
DESIGN IDEA 4
Global Alerts
Global alerts refer to critical notifications or messages that are displayed prominently to users across the entire application or platform. These alerts are used to communicate important information or updates that may affect the products or services available to the customers.
DESIGN IDEA 5
Tags
Tags offer specific information about an account/customer at a first glance. Combined with color, they offer crucial information and signify urgency where necessary.
VISUAL DESIGN
Building a Style Guide
System Thinking for Scale - Combining the old and the new
At Goldman Sachs' scale of design, it would be redundant to create an entirely new design system for this project.
Instead, I built a style guide with custom components, using Goldman Sachs' design system as the foundation. With this approach, I maximized the use of atomic elements and characteristics from GS's design system.
Fonts, Type, Colors
The basic style guide (fonts, type etc) was available to me from the Goldman Sachs style guide. As our product was under Marcus, we were to use the same style guide.
Iconography
Unified Navigation
Buttons, form elements and other components
Cards and Table Layout
Implementation & Feedback
The redesigned sections were swiftly developed in close collaboration with the engineering team, enabling rapid testing with the Agents to address any unforeseen issues. What truly impressed me was how the collaborative environment significantly boosted the efficiency of the entire process of implementation, as it was all done within 2 sprints' timeframe.
As we conclude..
I learned that while internal tools may appear modest in scale, they wield a significant impact on employee experience, ultimately influencing the company's growth trajectory.
Also, creating a design library of reusable components, however small the project is, has a huge payoff!
Selected Works
Microsoft GamingDesigning and shipping Warcraft Rumble's game page
Goldman SachsEnhancing the Agent UI Experience
Base UI Design SystemBuilding & maintaining Blizzard's design system
PulseProtocolImproving usability of doctor profiles to scale business and increase revenue