Design a UI facelift for Bank of Oklahoma’s internal application for CX specialists.
My Role
Develop Design Plan, User Research, UI Design
Tools
User Interviews, Glassbox, Figma
Duration
2 months
Mission
Design a UI facelift for Bank of Oklahoma’s internal application for customer service specialists with user experience benefits added, a user interface facelift, and add a new section of brand new self-service capabilities.
Discovery + Research
QUALITATIVE RESEARCH - User interviews
Upon starting the project, I was able to interview 3 customer specialists, all with a wide range of day-to-day jobs. One was a regular user of the section of the internal application that I was expanding. While all 3 gave me in depth context about their role, Alice the Escalations Specialist, was the most informative. I was able to reach out to her several times during the project to keep a pulse on how the screens would marry with her workflow.
Additionally, I created a user interview outline for the team to reuse as they scaled.
Pain Points
Currently, they need to submit a ticket to IT to block an account (ex: ANI lock or blocks)
Use 3 - 4 systems for every customer call to verify that customer and resolve a wide array of issues
Spending time on each application resolving a single problem since they’re not interconnected
Goals
At a glance, know that there’s an issue on the account
Pinpoint the source of suspected fraud or other issues on the account
QUANTITATIVE RESEARCH
Utilizing Glassbox metrics, I was able to validate that the web traffic on the application was sporadic since the users need to jump between systems, it’s difficult to parse the traffic data.
Lean PERSONA
From my combined research between user interviews... with limited time, I was able to develop a lean persona for the purpose of this project.
Alice is a 42 year old long-time customer service representative, living in Claremore, OK. She has been in the CX world for fifteen years and is now a leader on the Escalations Team. She handles intricate client issues including suspected fraud, where she needs to verify the caller and perform a number of tasks to complete the caller’s goal successfully.
Alice, Escalations Specialist
“I always have 3-5 screens up at one time, I need the most pertinent information right in front of me to help me be efficient while I’m on a call with a customer resolving their issues.”
Snackbar component example
design process
Design System
In crafting the updated UI, I was able to use the nascent design system that was in place in Figma. I also identified new components that I recommended to be created. I pitched in and created a new snack bar and banner, in light and dark mode to add to the design system.
HiGH Fidelity mock ups
Based on the data from user interviews and SME input, I created several mock up options. One option had an alert icon near the customer name, another had an alert icon on the navigation items. The mock up that resonated the most with the user and that worked with our timeline in terms of development, was the below mock up with a banner notification and additionally, an alert dot on each section that had a fraud alert.
The notification banner alerts the CX specialist immediately that there is suspected fraud somewhere on the account. The red dot icon alerts them to the specific section(s), allowing the CX agent the ability to drill down and diagnose the fraud.
High Fidelity mock up of a customer’s IVR profile
Results
After user, SME, and developer feedback, I created a final high fidelity mock-up of each section and then submitted the annotated designs through a JIRA ticket to handoff to my developer.