MUTUALBANK
WEB DESIGN
Project Lead & Manager
UX/UI Architect
Art Director
Completed
Summer 2016
@MutualBank
Status
Site no longer active due
to company acquisition
My Role
Project Lead & Manager
UX/UI
Art Director
Copywriting
Completed
Summer 2016
@MutualBank
Status
Site no longer active due
to company acquisition
SUMMARY
My unofficial mission for this project was "to prove bank websites don't have to be a hot mess". The redesign of the MutualBank website was a massive undertaking in which I led overall site strategy, art direction, copywriting, and project management. The final results were a refreshing design, a vastly improved user experience, and significant conversion rate increases.
DES
IGN.
A NIGHT AND DAY DIFFERENCE
The previous site design crammed paragraphs upon paragraphs of text onto pages – a daunting task for any visitor to engage with. One goal with the new design was to present product information and details in a way that was more inviting, visual, and less burdensome for visitors to explore. The difference is astounding.
OLD
NEW
DES
IGN.
A NIGHT AND DAY DIFFERENCE
The previous site design crammed paragraphs upon paragraphs of text onto pages – a daunting task for any visitor to engage with. One goal with the new design was to present product information and details in a way that was more inviting, visual, and less burdensome for visitors to explore. Drag the slider below to see the astounding before and after difference.
OLDÂ //Â NEW
BACKGROUND SECTIONS
To break up the monotony of white space and add visual intrigue, I utilized full-width background sections throughout the site. They feature a background image with layered text/content, together creating welcomed visual contrast and intrigue.
FOUR DIFFERENT BRANDS
Since the MutualBank family of companies utilizes multiple brands (MutualBank, MutualBank Business, MutualFinancial, and MutualWealth), another design challenge with this project was to cohesively mesh these brands together under one site – balancing the need to make them look related, but also differentiated from each other.
GLOBAL DESIGN ELEMENTS
#76BA41
#9ADCC6
#4F7175
#C8D6DF
#23BFDC
#F6F7F7
Section Dot Pattern #1
Section Dot Pattern #2
BODY COPY
MAIN HEADING
ACCENT HEADING
BUTTONS
UX.
MutualBank’s site is now fully WCAG 2.1 compliant as a result of a third-party accessibility tool we integrated with the site. See the video below for the variety of features this offered site visitors.
Discovered through user feedback, two of the biggest user experience frustrations were (1) only being able to log into online banking from the homepage and (2) finding the log in URLs for other services like our rewards service or investment platform. We addressed both of these issues in the redesign – enabling users to log into to online banking and any other online portal from any page across the site.
Significant research was required to find a translation tool that would meet all of our UX requirements – requirements that free tools like Google Translate couldn’t accommodate. We eventually implemented a tool enabling us to:
MACHINE TRANSLATION
+ EDIT ABILITY
We wanted the convenience of an automatic translation paired with the ability to edit said translation to ensure accuracy.
STYLE
CONTROL
Given the difference of vocabulary length, having the ability to adjust the CSS of the localized version of the site was crucial so that major design issues could be addressed.
ONE SITE,
NOT TWO
Having a separate version of a site to maintain is something we wanted to avoid as we make many updates to the site daily.
RES
ULTS.
21
Increase in submitted online applications for mortgage loans when comparing 2017 through 2019 (site redesign) to 2013 through 2015 (previous site).
23
Increase in submitted online applications for checking/savings accounts when comparing 2017 through 2019 (site redesign) to 2013 through 2015 (previous site).
NAMED A NATIONWIDE BEST BANK & CREDIT UNION WEBSITE
Named by Bankbound in 2018 as one of the top 10 best bank and credit union websites nationwide.