The Challenge
Redesign a website for one of the fastest growing credit unions in the southeast. Listerhill is an innovative, community focused credit union that employs a fresh approach to a traditionally old-fashioned industry. Here we’d like to illuminate how our two team (Triptych + Listerhill) created an engaging feature-site feel out of a large content and infrastructure heavy site.
First off, what do we mean by “feature-site”? A feature site is what we classify as an immersive campaign based website. They are sites that engage audiences on an interactive level about a new product in fun and exciting ways. Think of the KFC Colonel website, ESPN We The Fans website or the Microsoft City In The Cloud website. They are the peacock feathers a company spreads to get attention and show off new initiatives in the digital realm. So, how do you make a corporate financial website feel like a feature site and include all of the important but seemingly mundane banking elements at the same time?
Custom Yet Multi-Purpose
Our goal was to make each element on each page feel custom and intentionally designed to exist in only that space, all the while allowing the client to replicate those elements on various pages. This yields a content-rich site that is not overwhelming or too repetitive. Speaking of content, we’ve said this before, but having a client partner committed to the content is vital. If you can’t get buy-in from the client on producing quality content you will inevitably fall short of a feature site feel. In our case, the Listerhill marketing team was and is one of the best we’ve ever seen at making sure the content was on brand, thoughtful and on time. Kudos to their team.
The next step was to create hierarchy with the content. Enticing visitors to delve deeper into the site by placing focused and digestible bits of information on the surface. We intentionally limited the subject-matter presented at the beginning of the visitors interaction (primary financial functions like “Everyday Banking”). As visitors explore these initial “appetizers” of content they can quickly navigate to the full suite of Listerhill’s offerings. This approach allowed us to combine the minimal feature-site feel with a content rich experience.
I’ll quickly run through our process for a project this large:
Discovery
- Collecting data (heat maps, analytics and user sessions from Inspectlet)
- Meeting with key personnel (including collaborating on a presentation for the credit union’s Board of Directors)
- Collaborating on site infrastructure
- Various other research based components: competition research, surveys, and brand education
Wireframing
- Identifying and categorizing each piece of content
- Isolating anomalies in content that need custom templates
- Creating a visual language and design system consistent with the current brand (executed by Wier/Stewart)
- Photo styles, textures, font selection, and color scheme
Development
- Engineering server topography and technology stack
- Planning global elements, templated content and pages, one-off anomaly content, plugins and basic ML components
- Strategizing UX interaction and utilizing the Vue.js framework to engineer a more app-like experience
- As a quick aside, we created a ML component that observes what content specific users are drawn towards and then delivers them information about that content upon returning visits. This is based on cookie sessions and keeps the visitor completely anonymous
Bringing Everything Together
For these pieces to all come together to create a smooth, branded and user-friendly experience they cannot be created in a vacuum. Our project management, development and design teams frequently meet to ensure everyone is on the same page. If each independent discipline is isolated into a separate work-flow, the end product feels clunky and cumbersome. The development process breaks down if it doesn’t maintain an intimate knowledge of the design hierarchy and flow (interactions, transitions and sequence). Frankly, it took us a while as a company to have the discipline to sit down with each other walk through these complex conversations. It is still a struggle but we have to intentionally create times where teams are interfacing with each other consistently throughout a project.
I’d love to say that there is a magic workflow or replicable process for tweaking and refining the details. For us and so many other companies we’ve talked to, a gritty and vigilant back-and-forth process at the end is necessary for locking down a smooth user experience. It may feel like Andy Dufresne slogging through a sewage pipe before he emerges victorious on the other side, but you have to be willing to walk through this messy process as a team. Sit with each other, push pixels, and be willing to say “that’s just not quite right”. This part can often push everyone’s patience to their limits, but it is worth the effort.
Launching
Before launching, make sure you have a good checklist to help you test performance. There are a plethora of great resources, outlining a pre-launch process so we won’t rehash all of that here. For us it’s a combination of in-house device testing, BrowserStack testing, dev tools, SEMRush, client feedback, Google Webmaster tools, GTMetrix and all-hands on deck pushing, pulling, and stretching things until we find and eliminate identifiable bugs. Despite all of the available tools, checklists and resources dedicated to help you refine this process, if you are crafting a large scale site to feel like a feature site you will inevitably encounter bugs post launch. There are just too many devices, screen-sizes, ISP speeds, LAN environments and limitations to make everything works 100% of the time. The key is to honestly communicate with the client, address the issue as quickly as possible and learn from what caused the error. Do your best to include it in your testing checklist or workflow in the future.
The ubiquity of variables that exist when building interactive projects can be daunting. It is helpful to communicate to clients that today’s web isn’t the same as it was 10, 5 or even 3 years ago. Let them know you will do your best to prevent any bugs or broken experiences, but if they do you will address them as quickly as possible.
Please check out Listerhill.com and let us know what you think. If you’re interested in talking about your project feel free to contact us — hello@triptych.co.
