Common Transactions

[et_pb_section fb_built=”1″ admin_label=”Template Basic Section” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_row admin_label=”Header Row” _builder_version=”4.27.4″ _module_preset=”default” collapsed=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https://mitchellberg.com/wp/wp-content/uploads/2025/02/banner_portfolio.png” alt=”My Portfolio” title_text=”banner_portfolio” admin_label=”Header Image” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][et_pb_menu admin_label=”Site Main Menu” _builder_version=”4.27.4″ _module_preset=”default” min_height=”31px” custom_padding=”||0px|||” global_colors_info=”{}”][/et_pb_menu][et_pb_text admin_label=”Expository Text” _builder_version=”4.27.4″ _module_preset=”default” custom_padding=”0px|||||” global_colors_info=”{}”]

Common Transactions (2017-2019, USBank)

This project – replacing a 30-year-old “green screen” teller system at a major bank – took an interesting turn.

[/et_pb_text][et_pb_divider _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_divider][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ admin_label=”Situation Row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” collapsed=”on” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Situation Text” _builder_version=”4.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]

Situation

I joined USBank as a User Experience Architect on a project to develop a new Teller system. I inherited the project from a UX Architect who’d left abruptly.

I could see why.

Then came the news – the middleware vendor, whose software we’d counted on to support complex, multi-part transactions, informed us they couldn’t actually do what we’d counted on.

And I saw an opportunity.

 

[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ admin_label=”Task Row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” collapsed=”on” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Task Text” _builder_version=”4.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]

Task

Take the complete, unplanned scrambling of our technical architecture as an opportunity to build a much better teller system.

 

[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ admin_label=”Action/Setup Row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Action Text” _builder_version=”4.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]

Actions

Much of the initial phase of the job involved trying and largely failing to make a consumer system work effectively for the ultimate “power users” of financial software.

The initial proposal I inherited from my predecessor functioned a lot like an ATM – which makes sense, if you’re designing a system for a consumer.

Working the False Start – “Putting Lipstick on the Pig”

For bank tellers? It was a headache.

In particular, business banking transactions could get much more complex than your typical ATM deposit or

withdrawal. A business could bring in checks and cash from several stores, intended for deposit into several accounts, make several more transfers, withdrawals of specific denominations for petty cash and the cash drawers, payments to lines of credit and more, which the teller would have to pull off…

…all the while maintaining the friendly chit-chat and customer service the customers expected from their friendly local branch.

It turned out that the original UX Architect (and the rest of the team, and their management) hadn’t understood some basic accounting.

If you’re consumer, your goal is to deposit to and withdraw from accounts.

If you’re a bookkeeper, accountant or teller, you goal is to deposit and withdraw (credit and debit) to and from a transaction. Ands the withdrawals – debits – include money going into the accounts – which is backward from the way consumers see it.

The original architect had gotten the “concept model” all wrong.

But we were committed to delivering, and we had a design. So we spent a few months trying to put lipstick on the proverbial pig – concocting elaborate ways to show the tellers the state of the transaction (Figure 7) as opposed to the individual deposit.

In usability tests, it did…OK. Barely.

Between the lines of the comments was the sense that our design didn’t do the job as well as the 30 year old system it was replacing.

Then disaster hit. And it saved the project.

 

[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https://mitchellberg.com/wp/wp-content/uploads/2025/02/XAction-Flow-Old.png” alt=”Transaction – ATM-style flow” title_text=”XAction Flow (Old)” show_in_lightbox=”on” admin_label=”Old Flowchart Image” _builder_version=”4.27.4″ _module_preset=”default” border_radii=”on|1px|1px|1px|1px” global_colors_info=”{}”][/et_pb_image][et_pb_text admin_label=”Caption” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]

Figure 1 – Each of the boxes with a black title bar is a new pageload that the user – a teller – has to step through for each part of the transaction.  And with a business transaction, there can be many iterations through the process.  All while the teller is supposed to be providing customer service.

 

[/et_pb_text][et_pb_image src=”https://mitchellberg.com/wp/wp-content/uploads/2025/02/OldWithdrawalPage.png” alt=”Withdrawal page from old transaction model.” title_text=”OldWithdrawalPage” show_in_lightbox=”on” admin_label=”Old CT Page Image” _builder_version=”4.27.4″ _module_preset=”default” border_radii=”on|1px|1px|1px|1px” global_colors_info=”{}”][/et_pb_image][et_pb_text admin_label=”Caption” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]

Figure 2 – This is one of the steps above – “Withdrawing” from an account.  Every other possible type of credit or debit had its own page type.   The “Summary” on the right was an attempt to bring some context to things.  It worked – sort of…

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ admin_label=”Action/Disaster Row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Action Text” _builder_version=”4.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]

Saved by Disaster

Around this point, our middleware vendor told us that they had no way of maintaining the state and status information that was intended to go into our running summary column.

What they could do, though, opened up possibilities.

One of the goals of the project was to link the teller stations to the new scanners that would automatically scan checks, deposit and withdrawal slips, and other transaction documents (and, eventually, automatic cash “drawers” that’d count, sort, and dispense cash). USBank was 10 years behind the rest of the industry.

And, I thought, if you just scanned all the deposit, withdrawal and transfer slips, checks and other documents simultaneously, without regard to individual deposits or withdrawals (important to consumers, irrelevant to tellers), it created all of the “credits” to the transaction, automatically, in one step.

Then, the teller could add the individual “debits” accounts, cash back, etc – deposits to and transfers between – in one step, on one screen.

And in one fell swoop, a process that could have involved several  iterations through a minimum of four pages became, in most cases, a single transaction page  (Figure 9) and a confirmation (and, if applicable, a page for noting the denominations of cash in a withdrawal), with  the vast majority of the routine counting and sorting being done by the scanner and system.

The redesign got some head-scratching from ATM- using UX designers – but the business analysts (who’d all come from the branches) practically jumped for joy.  And the usability tests were a hit.

The design matched the user’s conceptual model for what a transaction was supposed to be, in addition to using the technology to make the job easier.

My team – a visual designer, a front end developer and a content writer and I – grabbed a big win from a potential disaster.

 

[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https://mitchellberg.com/wp/wp-content/uploads/2025/02/HAL-Two-Credit.png” alt=”CT New Page Model” title_text=”HAL-Two-Credit” show_in_lightbox=”on” admin_label=”New Flava Image” _builder_version=”4.27.4″ _module_preset=”default” border_radii=”on|1px|1px|1px|1px” global_colors_info=”{}”][/et_pb_image][et_pb_text admin_label=”New Flavab Caption” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]

Figure 1 – Each of the boxes with a black title bar is a new pageload that the user – a teller – has to step through for each part of the transaction.  And with a business transaction, there can be many iterations through the process.  All while the teller is supposed to be providing customer service.

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ admin_label=”Results Row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Results Text” _builder_version=”4.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]

Results

The system has been rolling out to branches for the past several years.  It’s the first of many attempts to do so to succeed.

My team’s efforts salvaged a huge investment and ended up creating a superior user experience for the bank’s tellers.  

 

[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Footer Section” _builder_version=”4.27.4″ _module_preset=”default” background_color=”rgba(12,113,195,0.15)” global_colors_info=”{}”][et_pb_row column_structure=”1_5,1_5,1_5,1_5,1_5″ admin_label=”Footer Row” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_5″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Home Text” _builder_version=”4.27.4″ _dynamic_attributes=”link_option_url” _module_preset=”default” link_option_url=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjE2MCJ9fQ==@” global_colors_info=”{}”]

Home

Back to the top

[Home]

[/et_pb_text][/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”WID Text” _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]

What I Do

All about the things I do and how I do them, and what I’ve achieved so far.

[/et_pb_text][/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Portfolio Text” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]

Portfolio

Links to illustrations and case studies of several important projects. (You’ll need to contact me for a password)

[Portfolio Page]

[/et_pb_text][/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Resume Text” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]

Resume

My most current resume.

[Resume]

[/et_pb_text][/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Contact Text” _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]

Contact Me

How to reach Mitch Berg

[Contact]]

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]