Context

The new responsive TD Ameritrade site needed a more streamlined way to send sensitive messaging to their users. At the beginning of this project, users read their messages by going to the old site.

I’ve had experience with updating older parts of a site to a newer site. Usually, I’d start by taking a look at the older system and seeing what worked and where we could find opportunities. We were able to get insight from subject matter experts on how the back end works from system and administrative points of view. We found the following:

• The mailing system is dependent on users selecting the correct topic to get their message to the right recipient.

• Most users end up selecting Other. This is problematic because then the message has to be manually sorted, which causes delays in response.

• The routing system that sorts the message is complicated. Making any changes would be too risky, possibly resulting in other unintentional and costly changes.

• Everyday, the message team gets about 1000 messages with form attachments that they manually forward to a barcode sorter.

Goals

With the knowledge listed above, the team decided to approach the project from the front end. We do as much as we can without touching the delicate back end system. We had these specific goals in mind:

• Design an experience that would encourage users to select the appropriate topic from the drop down.

• Design a new form sending feature that would help with the bottleneck.

Design

Order of design

Generally, for responsive sites, I start any project by mocking up the mobile design first. This way I can come up with quick designs that help facilitate collaboration with the product owner. Though in this case, I designed both mobile and desktop concurrently to see if the established UI patterns worked well in those sizes. You can see both prototypes at the bottom of the page.

Solutions

Here in detail are the problems that came up and how they were solved.

1. Grouped topics into sections.

We believed users were confused by the topics listed on their own. We couldn’t add or change the routing of each topic since that would be too invasive to the backend. However, we could change the order it was arranged in and add section titles. Together with copy, product owner, and my design manager, we did a small card sorting exercise and put everything into categories.

2. Removed any outdated or repetitive topics

For example, internal transfer IRA contribution was removed because it was duplicating a function of the Transfers site, and we had seen in testing that users normally went to Transfers when prompted to make an IRA contribution.

3. Added a new flow to send forms

We learned that any attachments sent with a message had to be sorted by hand. So to encourage users to send attachments without messages, we made a new form which emphasized that messages were optional.