top of page

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

Group 9.png

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

icons8-male-user-100.png

Users

Over 60000+ Internal Bank Support Agents , trained to attend to various customer support calls and queries

icons8-quarterly-100 (1).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

Bank_of_America_logo_PNG4.png
bank of america tablet.png
pf-s73-eve-set-14-mockup.png
The Brief

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

icons8-complaint-100.png

51%

Reduction in user experience grievances as recorded in ALM (Application Lifecycle Manager) for first quarter of 2022

icons8-increase-profits-96.png

70%

Improvement in application performance speeds as recorded in the PAL (Performance analysis of logs)

icons8-thumbs-up-90.png

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

Impact

SPRINT PROCESS

icons8-head-with-brain-64.png

 Understand

icons8-light-64.png

Ideate & design

icons8-developing-64.png


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.

Sprint process

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"

User research

UNDERSTAND - USER PERSONA

Meet Veronica !
A recently hired bank support agent

call_center_agent-1_edited.jpg

 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.

"Some of the icons , I feel ... are not standard and can get quite confusing while on customer support calls"

'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. 

Complex left navigation menu
icons8-computer-support-100.png

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

icons8-new-100.png

Look

Notes from Ideation! 

Screensideation for amburger menu_edited

Ideas that came a close second! 

Permanent Navigation Bar with Hover based
tool -tips 

Bottom Navigation Bar

Meat Balls  and Bento style Navigation Menus

icons8-circled-menu-30.png
icons8-menu-vertical-100.png
Ideate an Design

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.

Confusing header design
icons8-computer-support-100 (1).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

icons8-new-100 (2).png

Look

trasnferred search bar_edited.jpg

Notes from Ideation! 

header design_edited.jpg

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.

icons8-computer-support-100.png

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

icons8-new-100.png

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.

icons8-computer-support-100 (1).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.                                      

icons8-fast-forward-100.png

The

Before

Table indistinguishable rows

The

After

icons8-fast-forward-100.png
wokring table_edited_edited.jpg

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.

icons8-computer-support-100.png

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.

icons8-robot-100.png

A Techno-design solution - Session timers

session timer.PNG

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

accessibility expert.png

Chrome Browser Testing for placeholder text

Chrome browser testing for placeholder text

Chrome Browser Testing for selected radio buttons

Chrome browser testing for selected radio buttons

Chrome Browser Testing for check boxes

Chrome browser testing for checkboxes

Chrome Browser Testing for button text

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

Jaws-screen-reader.png

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.

Key Takeaway :  Navigating Design in an Organizational  context while managing budgetary, timeline, business and technological constraints

Accessibility testing
bottom of page