UX DESIGN SPRINT
Bolt - A B2B app
Role:
UX Designer , Developer
Accessibility Tester
Time Frame:
2 sprints
Tools:
Various Java Frameworks , Figma,
Screen Readers - JAWS , Color Contrast Analyzer
Other Contributors:
4 Developers , 1 QA
1 Scrum Master , 1 Product Owner
Why this project matters?
Bolt is an enterprise application used by over 60000 bank support agents , it is one of the most important enterprise applications within bank of America .It has been active since 2015 and needed a UX revamp to improve operational efficiency and remediate the various user experience issues reported by the users.
Additionally this project also involves accessibility improvement and testing to make the application AA Accessibility compliant as per WCAG guidelines.
What's unique about my
role in the Project?
A Triple Threat designer!
Bolt is a non-consumer facing application (Enterprise application) and did not have a dedicated UX team . This gave me the opportunity organize a UX revamp sprint allowing me to take on the role of the designer in-addition to being the senior developer and accessibility tester.
DESIGNER
+
DEVELOPER
+
ACCESSIBILITY
THE BRIEF
What is Bolt ?
Bolt is Bank of America's premier application which is used by over 60000 Internal Bank Support Agents to support customer calls and queries
Users
Over 60000+ Internal Bank Support Agents , trained to attend to various customer support calls and queries
.png)
Age of Application
Over 6 years , The application has been in use since 2016
Key Features
Allow support agents to search for customer accounts
The agents can select a customer account and create corresponding cases/work objects ( the application supports cases such as "complaints" which the agent creates whenever a customer calls in to file a complaint )
Tools to process the aforementioned work Objects
Why I proposed a design sprint for Bolt?
TO IMPROVE OPERATIONAL EFFICIENCY
TO MODERNIZE THE APPLICATION WITH MINIMUM DISRUPTION TO WORK
TO ADDRESS USER EXPERIENCE CONCERNS
IMPACT
51%
Reduction in user experience grievances as recorded in ALM (Application Lifecycle Manager) for first quarter of 2022
70%
Improvement in application performance speeds as recorded in the PAL (Performance analysis of logs)
4.5/5
Overall user satisfaction score post design sprint changes
Read on to find out more about the sprint process that helped me achieve these results
SPRINT PROCESS
Understand
Ideate & design
In this phase I conducted user interviews (through moderated webex meetings that were organized by my team ) with support agents ("users") from different teams and also carefully analyzed the application performance metrics through various internal tools to understand the major user experience issues that need to be addressed
In this phase I worked collaboratively with users to come up with design solutions for the problems identified in 'Understand phase'. (with the help of virtual whiteboarding tools). Additionally we also decided on the deadlines to complete the development of the solutions.
In this phase we developed the design solutions identified in the previous phase and set up testing timelines
Develop
Test
This phase consisted of two levels of testing which included the user testing conducted by representatives from different support teams and our internal QA testing and I made minor modifications based on the feedback from testing. Additionally we also ensured that the application is ADA compliant at this stage.
UNDERSTAND - USER RESEARCH
To identify the major user experience issues that should be addressed we followed the below 4 methods and zeroed in on 6 major pain points to be addressed.
User Interviews
Surveys
Application Lifecycle
manager
Heuristic Evaluations
I scheduled meetings with various representatives within the support teams to understand their pain points. Conducted 12+ remote virtual interviews to understand user concerns
I sent out surveys using an internal tool to gather some quantitative data on the application. Surveys questionnaire included number of UX grievances raised ( organized by severity ) , Problematic features , application downtime etc. We also used it as a tool to track KPIs such as User Satisfaction Score.
Application Perfomance manager is an internal application management tool where the support teams and testing team can raise grievances realated to various application perfomance issues.
Evaluated the current state of the application using Heuristic evaluations , specifically focused on principles such as "Recognition rather than recall" , "Error prevention" and "Minimalist design"
UNDERSTAND - USER PERSONA
Meet Veronica !
A recently hired bank support agent
NEEDS
​
•She wants to be proficient in all the support tools available to assist the customer in the Bank
•She wishes to quickly address customer concerns and wants customer/account details to be easily accessible.
•She requires the application to be quick , so that she can reduce customer wait-times as much as possible.
'It would be really great if I could fetch customer or account details as quickly as possible'.
the application gets really slow during busy hours'.
IDEATE AND DESIGN - 5 MAJOR DESIGN CHANGES
The main Navigation menu was complex and not descriptive
1
The application had a left navigation menu which housed most of the frequently accessed tools , however it had a complex and deep hierarchy , moreover the icons used in the menu were not standard or labeled which was confusing for new agents.
How I Fixed it !
STANDARDIZATION : Standardized all the icons and added descriptive labels to each item
EASE OF USE : Ordered the options within the menu based on frequency of use & relocated unwanted options .
MINIMALISTIC DESIGN : Replaced the permanent navigation menu with Hamburger menu to make more space for work area and reduce cognitive load
The
Look
Notes from Ideation!
Ideas that came a close second!
Permanent Navigation Bar with Hover based
tool -tips
Bottom Navigation Bar
Meat Balls and Bento style Navigation Menus
There were two separate search bars (each for a different purpose) in the header , which , even with placeholder texts were a source of confusion for the agents More than 70% of the users confirmed that the confusion does arise as they try to use search while on call with customers.
.png)
How I Fixed it !
IMPROVED INFORMATION HIERARCHY : moved one of the search bars (case search )to a more relevant location and reduced clutter
The
.png)
Look
Notes from Ideation!
Ideas that came a close second!
Increasing the distance between the search bars
More Descriptive default text
Incoherent Header Design
2
Too Many Clicks delaying account search experience
3
The customer account search experience involved a lot of clicks and was not a simple type in , search and select which led to delays and confusions. Most of the users requested for a more streamlined and simpler process for account search.
How I Fixed it !
ERROR PREVENTION : Added descriptive input validation messages and made sure input text was "sticky"
EASE OF USE : I removed most of the deprecated buttons and made sure there are no more than 3 button clicks to fetch the customer accounts
IMPROVED INFORMATION HIERARCHY : I categorized the seach parameters into different tabs such as customer search , advanced customer search etc.
The
Look
The '3 click' account search experience - go ahead, count them ;)
Disconcerting Tabular
information
4
I identified some readability issues with the tables displayed in the account search screens. Whenever the tables had large number of rows , it was difficult to distinguish between the rows , especially when one of the rows had to be selected for further processing.
.png)
How I Fixed it !
IMPROVED VISUAL DESIGN : alternate row color ,hover color and selected color and clearly visible options to sort and filter results.
The
Before
The
After
Application was slow during busy hours
5
I observed that some users experienced slowness with account search ,on analyzing the logs and performance metrics we identified that this was because of a large number of idle requestors and the server was not able to handle all the requests efficiently.Although this was a technical defect that involves increasing the server capacity as a fix, I developed a efficient design solution that circumvented increasing server capacity.
How I Fixed it !
DESIGN WITH A FOCUS ON TECHNOLOGY ! Initial analysis revealed the slowness was caused by idle server requestors. I came up with a design solution as opposed to updating the server to handle the idle requestors. I added a session timer to remove requestors older than 30 minutes.
DESIGN
+
TECHNOLOGY
My technical background allowed me to brainstorm a design solution for a technical problem ; saving costs in infrastructure updates.
A Techno-design solution - Session timers
USER TESTIMONIALS
" The new account search experience is quick efficient and descriptive "
- Support Team Lead
ACCESSIBILITY TESTING
We’re always working to enhance our site and increase accessibility and usability for all
of our users. As a part of this project We also addressed a few ADA issues to confirm to
WCAG guidelines to help associates with disabilities.
​
Click here for full accessibility report derived from WCAG Guidelines.
Below are some of the implementations in the application.
​
1) We verified that color contrast ratios for buttons ,check boxes ,radio buttons and placeholder texts confirms to AA level of WCAG Guidelines
​​
Chrome Browser Testing for placeholder text
Chrome Browser Testing for selected radio buttons
Chrome Browser Testing for check boxes
Chrome Browser Testing for button text
​
2) We also verified screen reading using JAWS. Additionally I made sure that the session timer labels were read by the screen reader. Notably we had an issue with tabs within the application , wherein, on tabbing the tab header and the tab close icon were read together. We added Aria-Labels to the tab label so that header and icons were read seperately. We also added more descriptive aria-describedby attributes
​​
Retrospect
This project taught me that good UX is not only dependent on extensive user research and appealing visual designs .The technology that goes into implementing the application plays an equally important role in ensuring good user experiences.
I also learnt the nuances of a design sprint and the challenges associated with organizing one as a development team as opposed to a design team.
Having 4+ years of full stack developement experience allowed me to analyze and improve UX from an engineer's point of view and as I transition to more design oriented roles , I intend to create user experiences that are not only human centric but also technically sound.