U.S. Bank locations
Website redesign
Overview
U.S. Bank’s business goals for this redesign were to improve interactivity of the pages from static to dynamic, to increase SEO content, and personalize the content according to the target user.
To start with, I was given foundational research that was done on the legacy pages, where some unmet needs were identified, like performance lag, unintuitive card interaction, and important information was hidden from users.
The goals for the new website were to improve the user experience of the search and filter functionality, make the new website self-service to decrease customer calls, and increase branch and ATM discoverability.
Role and impact
As a senior visual interaction designer, I was responsible for building the end-to-end design experience, while collaborating with partners such as content, product, A11Y, and development. In this role, I regularly presented my work to different groups and leaders, communicating design decisions and research findings. This effort was driven by robust competitive research and user testing.
During this time, I created high-fidelity interactive prototypes that we used to conduct six rounds of user testing in order to best inform my designs. Accessibility considerations were included early on in a weekly co-create sessions. At the end, the user experience was vastly improved and the business goal achieved. I was awarded a Gold Shield Design Award for this effort.
Team
Eight teammates
Duration
11 Months (2022)
Software
Figma, Jira, React
UX process
- Foundational research: User interviews, Heuristic analysis on the current site, identification of the problem and goals, 3 personas
- Design workshop: Brainstorming session with stakeholders and base team
- Six rounds of design and uses testing: A number of prototypes were created and then tested with ten users each time. Usability study and card sorting was performed
- Accessibility reviews: Weekly meetings with accessibility consultants
- Locator teams meetings: Bi -weekly meetings to align with other teams that worked on similar location experiences
- Tiered Design reviews: Design meetings with stakeholders where design gets approved or deferred
- Weekly Design reviews: Twice a week meetings with the core team to align on design decisions
- Developer meets Designer: Once in two weeks meeting to align on developers needs
Goals
Business goals:
Improve user experience; decrease customer service and branch calls; increase appointment making.
Design goals:
Create a simple, delightful experience that allows users to explore and find what they need, one action at a time.
Content goals:
Present educational and actionable text without assumptions about users’ needs.
Personas
Website roadblocks
1) Slow load time on pins and result cards (goal we defined here: explore why is that happening, how to simplify the experience)
2) Result card slides to the right, and ‘Make an appointment’ and ‘See branch details’CTAs are hidden below the fold, therefore most users don’t see them (goal: increase appointment making and banking online by moving CTAs above fold)
3) Filter list is not comprehensive (goal: make filter menu more prominent and explore the possibility of filter grouping)
User testing
Here is an example of what we learned from one of the user testing studies we conducted, and how we iterated. We tested different aspects of the design in six rounds of unmoderated user testing.
In this test, we compared two different filter treatments, we asked about content and observed search initiation.The insights that we took away were:
Proceed with chip filter design as it is perceived as easier to understand (7 out of 10 users)
ATM information should be clear and easily accessible (6 out of 10 users)
Users don’t always look at the filters, most of them search first (7 of of 10 users)
Prototype 1
Prototype 2
From the third round of testing, we learned that the functionality of the ‘dropdown filters’ is simple and intuitive (9 out of 10 users), but we had to move away from this solution because the chips component had too many different uses in our design system already, and adding another function like dropdown would not work best for consistency. Also, the division of the categories in the dropdown made searching for specific information ambiguous. For example, users didn’t know what is stored under Resources.
The Card sorting exercise informed our filter classification and categories, where we learned that details such as Hours and Info are prioritized by users, followed by ATM, Services, and Resources.
MVP designs
Default view
Once a full search is performed, users are presented with the results page. In this page, there is a search box with a filter option, a map with pins to the right, and result cards below. A selected pin on the map corresponds with the elevated card connecting the two visually and functionally. There is a scroll while 10 results are shown at a time, with a load more link at the bottom.
Filter menu open
At the time of designing this filter menu, I played with the idea of presenting most popular filter categories or consolidating the number of categories in order to minimize cognitive load, but the user research showed that customers wanted to see all the different filter options all at once, before they decide to visit a branch or ATM.
This filter menu is dynamic, and once the user select a filter chip, results are immediately visible on the map.
Filters applied
Selected filter appear under the search bar as removable chips, always informing the user of the choice they’ve made.
Card design
I designed the result cards to be interactive, with the option to expand details, and link to other pages. On hover the card’s elevation changes indicating interactivity: when the user clicks on a card, a map pin turns blue informing where that location is on the map.
Early on in the process, I collaborated with our accessibility consultants, who pointed out a few issues in the designs that were quickly resolved. Location text had to be added under a location pin on the map, as well as the Get Direction link had to be present on the card for clarity for user with disabilities. I also had to remove the gradient that was on the bottom of the results cards page for better readability for our sighted users.
