Redesigning public website experience for local bank
CCFBank is a Wisconsin-based community bank. They partnered with the agency Modern Climate to redesign their public-facing website.
Role:
Lead UX/UI Designer
Project duration:
June–Sept 2021
Project
Over the course of several years, CCFBank had added robust online banking services. They needed an updated public-facing website that centered these capabilities. Additionally, they wanted to target a younger, first-time banker audience.
Research
The CCFBank team conducted user research before our engagement and provided our team with the following requests:
- Provide an easier way for prospective members to sign into their accounts
- Reorganize site by audience type (individual, business, mortgage)
- Help users understand differences between account types
- Highlight that they are a local bank with accompanying benefits (many locations, knowing your banker, community, trust, etc.), while also touting their robust online services
Site architecture
I started by creating a new site architecture that reflected the three main areas of their business: personal banking, business banking, and mortgage lending. In this process, I also reduced redundancies that had accumulated over the years.
Navigation & footer
Since CCFBank’s website serves both potential and current users, we needed to strike a balance between serving both audiences. I did this by making the primary navigation focus on prospective members, while the footer focused on member resources (which are also available in the member portal).
Another important change was to elevate the member portal log-in. This was accomplished by having the log-in open by default on both desktop and mobile.
Wireframes
I created wireframes and a prototype of key pages to demonstrate the site architecture and get buy-in from the team. At this stage, we worked with their content team to craft copy that would help the user compare and contrast spending account types. Their content team was able to work on this information while we started the visual design process.
Digital brand expression
The CCFBank brand had basic guidelines for their print and marketing materials, but these were not reflected in their digital space. Given these guidelines, we pushed their visual brand and provided two distinct directions for the client to choose from. I designed one concept and another designer on our team created the other.
Final UI design & page templates
After the client chose the concept I had designed, I built out 16 key pages to serve as templates for the rest of the website.
Design system
Along with the 16 page templates, I created a design system to help with development and support future growth. The design system included foundational elements like custom iconography, typography, spacing, elevation, color, etc. I also created a library of components guided by the Atomic Design approach.
I used WCAG accessibility guidelines to guide this work—checking color contrast, requiring image and iconography labels, and more.
Learnings
The design process was great — we were in lock-step with CCFBank‘s team and successfully saw the launch of the new site.
What I would do differently:
- CCFBank hired outside developers to build the website rather than using Modern Climate’s in-house team. This led to a lack of communication during the development process. I wish we could have worked closer to iterate and QA the designs.
- Since we didn’t have a budget for usability testing, we had to simply work with best practices and intuition. I would have loved to hear directly from CCFBank’s new and prospective users.