Sutton Bank Website Design

UI Design, UX Design, Branding, and InVision Demos

The Objective

Redesign the Sutton Bank website to modernize the brand, attract younger audiences, communicate key brand qualities, and create a user-friendly, engaging experience while staying true to the tagline “Old-Fashioned Innovation.”

My Role

Led the design from wireframes to final UI, adding interactive rollover features and subtle playfulness. Applied UX principles, collaborated closely with developers and copywriters, and presented the final design to the client.

The Challenge

Sutton Bank had several goals to address with their new website design. These included:

• Attracting younger audiences: They wanted to attract more millennials without alienating their current customer base.

• Brand refresh while keeping the message: They wanted to update their branding while keeping their tagline, “Old-Fashioned Innovation,” clearly represented in the site.

• Communicating key brand qualities: The design needed to convey that they are traditional, creative, entrepreneurial, profitable, and highly skilled in what they do.

• Hybrid UI approach: The design had to be a blend of modern and traditional UI to align with their tagline, “Old-Fashioned Innovation.”

The Solution

As the lead designer on this project, I reviewed the client meeting notes and researched their current website to fully understand the customer’s needs. I focused on identifying the main problems so I could design a solution that truly addressed them. I also reviewed the sitemap to understand what was most important to the client and what was less critical. The sitemap hierarchy included key areas such as:

• Branding

• Loan placement on the website

• Financial education placement

The New Design

After reviewing the old site and studying the notes from customer meetings, I used that knowledge to create several wireframes to help flush out my ideas. I also applied UX principles to ensure the layout would be easy to navigate and aligned with what users are accustomed to seeing. I took special care to address the customer’s pain points and design a solution that solved their core problems.

I was able to add a little more playfulness and interactivity without making it confusing for the end user, while staying in brand. In the below image you can see where I added a rollover copy function to the agriculture and business loans sections.

Conclusion

I presented the design to the client, and it was highly received. They were very pleased that the site addressed their concerns. By listening to and working through their pain points, I was able to make the site much more user-friendly and successfully design an attractive, updated, and highly functional homepage.

My responsibilities also included working with developers and copywriters to make necessary tweaks throughout the process and ensuring the design stayed consistent as it was applied to downstream pages.

Copywriters: Gabe Trevino and Nick Marcotte   
Web Developer: Rachel Chay