Mockup showing website on desktop and mobile, alongside a coffee cup

 

Associated Bank is the largest mid-sized Bank in Wisconsin, also serving Illinois and Minnesota.


Homepage Redesign

Associated Bank’s three homepages (Personal, Business, and Commercial) were redesigned to showcase content that told a more complete story of the bank’s mission, products, and services.

Primary users of the site would be (1) regulars who log into online banking and (2) prospects of the bank.

Areas of improvements and new features:

Informative communication

  • Top alert strip to display urgent bank news, like branch closings due to the Covid-19 pandemic.*
  • Announcements box placed in close proximity to login, so current customers logging in may see topics relevant to them.

*The bank’s NPS score (reported Q3 of 2021) was positively affected by our ability to be communicative about Covid-19, with our website playing a crucial role.

Modern design elements

  • Static hero image replaces rotating carousel. Hero randomizes between a predetermined set of geotargeted heroes on page reload. With users seeing a new image when returning to the page, the content feels fresh.
  • Visually represented products give a recognizable overview and serve as a quick navigation.

Highlighting community involvement

  • Yearly volunteering stats spotlight the bank’s ongoing commitment to improving local communities.

Building trust

  • Featured article section showcases unique content and positions the bank as thought leaders in financial education.
  • Real customer testimonial provided by our CX team.
Gray wireframe of desktop design
Personal homepage wireframe

Branch/ATM Locator Redesign

This project is a redesign of the locations locator on AB.com, and includes a migration from Bing to Google Maps.

Our locator was in desperate need of a contemporary look and feel. The redesign adds more clarity to the differentiation of types of locations in the search, as well as an auto-detect of current user location, and auto-suggest in the search field that users have come to expect.

Desktop view of Google Maps style location finder
Desktop prototype, used for user testing

 

Six mobile screens, showing the progression from search, to exploring locations on a map
Mobile screens

Bank at Work Program

The following activities were carried out to explore ways the Marketing department could shift to a more targeted approach and grow in UX maturity.

Goals:

  • Target two very distinct types of users: Employee and Employer.
  • Present the right information at the right time in the process for each.

Suggestions:

  • Adopt new technologies (QR codes, SMS) to aid in switching channels.
  • Dynamically create offer pages and their related emails.
  • Validate personas through Google Analytics tracking, test customer satisfaction through a customer journey map.
  • What modifications to our current data could aid in sorting current and potential customers into groups/subgroups related to the personas they match?
Two personas, James the employee, and George the employer
Personas: Let’s strive to understand who our users are so we can understand how to serve them best.

Persona sheets taped on a whiteboard, with diagrams for the user path per channel
Journey Mapping: Create the path each user type would typically take to complete a task.
This exercise determines which individual marketing projects should be created.

Five steps in the journey for James, the employee

 

Step one in the journey for George, the employer
Wireframing: Start filling in content for each marketing piece.
Aid in reducing friction when the user transitions from one channel to another.

About Us Section Redesign

This 20-page section was redesigned to better showcase the bank’s identity. Special attention was given to highlighting the company’s efforts in the community and towards diversity, equity, and inclusion.

This section redesign was a chance to break free of the website’s standard look and feel, establishing new brand standards. With updated colors, fonts, patterns, and icons, I was able to create a new template which will be applied to new pages in the future.

Colorful design for the Who We Are page on desktop
About Us > Who We Are
Colorful design for the Workplace page on desktop
About Us > Diversity and Inclusion > Workplace

Digital Marketing

Various digital web banners, social media graphics, and an ATM screen thrown in there for fun.

A small selection of literally hundreds of digital marketing co-branded support pieces I’ve worked on.

In addition to what’s shown here, I’ve also worked on branch animations, in-stadium digital signage, landing pages, microsites, email banners, digital takeovers, and branding projects for third-party applications.

Minnesota Wild Branch Animation

[crowd cheering]

[onscreen text] Score

Get a 15% discount at the Hockey Lodge when you show your Wild checks or Wild Debit Mastercard.

Visit AssociatedBank.com/Wild today to Get Wild!

Collection of colorful banner ads for Minnesota Wild hockey, in various sizes
Wild web banners

Collection of colorful banner ads for Milwaukee Brewers baseball, in various sizes
Milwaukee Brewers web banner ads

 

Collection of colorful social media graphicsfor Milwaukee Brewers baseball
Brewers social media graphics

Back the red, bank with the green Wisconsin Athletics ATM screen
Wisconsin Badgers ATM screen
This year give food for the holidays Feeding America graphics
Feeding America online banners, social, and OOH