M&T Bank wanted to update the features and information architecture of its “What’s Important?” microsite to speak to the banking needs and concerns of customers and local communities in the tri-state area.
Context & Challenges
M&T contracted the Sapient Razorfish team to change the focus of its “What’s Important” microsite -- from a 2015 contest promotion to a content marketing hub centered on the company’s small business and personal finance offerings. Constrained by a modest budget, M&T tasked us with repurposing the site’s existing content, refreshing copy, and building a new personal finance advisement tool. This required the creation of a branching form interaction on the home page that would provide customers with contextual investment and personal spending advice based on their needs and goals.
Implementing this tool required the expansion of the site’s existing sitemap to include guideposts to the new content, as well as a renewed focus on community involvement, small businesses, and video testimonials. It also required responsive designs for both mobile and tablet and devices.
As the UX designer for the project, I worked closely with two creative directors and one art director to provide a complete streamline of the microsite. After building three separate prototypes producing simple data visualizations and one providing financial advisement, the client selected the latter prototype to serve as the hero image/primary focus for the homepage. In total, my responsibilities encompassed research, information architecture, and content strategy, as well as the creation of the four prototypes. The final design required more than 50 responsive wireframes across three breakpoints and an “intermediary mockup” to guide the project’s updated visual design.
Process & Insights
M&T Bank’s focus on small businesses and communities became a priority after the success of its “What’s Important?” annual promotion, in which M&T customers submitted videos recounting their personal and financial goals for the future. To help expand on the success of this promotion, I conducted a cursory competitive analysis – focusing on engaging form design experiences and robust financial advisement tools like Oscar, TypeForm, and Betterment – and built four new data visualization and personal advisement prototypes that would coincide with the “What’s Important” theme of the existing site. After presenting the low-fidelity prototypes to the client, M&T Bank’s stakeholders chose the most robust and code-intensive variation for development – an interactive form that would provide visitors with a contextual understanding of the personal finance and investment options best suited to their needs.
After building a higher-fidelity prototype with 40 branching screens, I refocused my attention on the information architecture and layout of the previous microsite. Extrapolating user data from site analytics, I worked with the project’s Director of User Experience to refresh the layout, responsivize the microsite, and highlight M&T’s focus on local communities and small businesses by streamlining the existing Information Architecture.
After finalizing the wireframes, I worked hand-in-hand with our in-house art director to assist with overall visual and interaction design direction.
The layout and conversational form design of the new tool inspired M&T Bank to incorporate it into the redesign of their primary homepage.