Role
Product Designer:
Visual identity
Design system
Platforms
Web (desktop and mobile)
Kentico
Audience
Millennials and Gen Z in the Triangle area
Overview
Founded in 1967 by a group of IBM employees, Coastal Credit Union has been innovating the credit union space ever since, most notably by pioneering video teller service. In 2010, they became the world's first financial institution to use fully remote teller service!
They approached us with an existing website and an in-progress look at an updated brand direction. Their current site lacked clarity and the visual identity left much to be desired. They knew they needed to overhaul their web experience in order to compete with other modern banking options, they just weren’t sure how to get there.
My primary focus was the visual design and design system for their responsive web experience, including updated typography, a refined color palette, and other supporting visuals.
The Problem
The website looked stodgy and dated, and no longer served their modern, innovative nature.
Their site had grown organically, sprawling into a tangled web of product offerings, and disconnected disclaimers.
The Solution
Focus on clarity and freshness, with a bit of fun.
Modernize the look and feel, to make the experience compete with the Hot New financial apps.
A simple change, with enormous impact
One thing that leapt out to me as I was beginning my visual analysis, was Coastal’s use of Adobe Caslon Pro. I did a little research and discovered the typeface was originally designed in the 1700s! While it does have a regal, historic quality that served them well for a long time, it was clear that a modern typeface would do wonders to reinvigorate the brand. I chose a geometric sans-serif called DM Sans for its graphic, open letterforms, it's friendly yet exacting feel, and it’s ability to stay legible yet keep it’s personality at smaller sizes. The effect was sweeping, and instant.
Adobe Caslon Pro vs DM sans
Like with typography, Coastal had an established set of colors. This palette once was indicative of a moment in time, but unfortunately, that time had passed. Using the core brand greens and the accents, I added and adjusted supporting colors; broadening the palette to provide a new color set that allowed for flexibility and vibrancy. I added a set of pastels, each with a dedicated pair, to ensure proper, accessible contrast when used in text applications and icons. The result was a suite of colors that felt fresh and energetic, but uniquely Coastal.
existing vs updated color pairings
Alignment tools: competitive analysis and moodboards
Our early discussions centered around a simple question: Who are we and who are we not? To answer this, I took screenshots of a handful of competitor sites, and walked the team through the what was communicated by the design decisions made in each one, and asked them simply to react. This discussion helped take visuals and put into words how we felt about the brands, and in turn, where we saw ourselves in the future. My job was to listen: to hear how they felt and ask questions to understand their deeper motivations. I then aggregated that feedback, synthesizing all of the nuance into a cohesive message that got the team aligned in the same direction.
a look at the competitive analysis
With the feedback gathered and processed, my next step was to explore and execute. I created two moodboards, carefully exploring different visual techniques and their method of application. Things like alignment, color usage, scaling, and supporting imagery. I presented the moodboards to the team, walking through each decision and the intention behind them. Again, I asked them simply to react: How do we feel about these decisions? What is working well? What is not? Ultimately, the team largely chose 1 direction with a few subtle tweaks.
the initial moodboards
Designing a modular system with variable moments of visual delight
With our visual direction established, I began the work of extending the design language into a system of reusable, swappable components. I included a number of visual options for each, allowing them to adjust the visual intensity of their web content as needed. I took great care to build-in spacing and scaling for these visual elements, so that regardless of the length of content within each component, the system will respond accordingly.
a sample of the CTA component in desktop & mobile
a sample of the design language I established for the Coastal site
Robust documentation for a third-party developer
Your ideas are only as good as how well you can communicate them, and a design system is no exception. An important piece of the puzzle involved detailing our decisions in a comprehensive handoff file, delivered via Figma. Though we had direct contact with our third-party developer throughout the process, I designed the file to be one that could be picked up by any developer, with no context, and allow them to easily execute a build from it. The file has dedicated Figma pages both with broad and specific annotations each for typography, color palette, components and their variations, navigational elements, buttons, links and more.
a peek at Coastal's design system
Outcome
The Coastal Credit Union team was an absolute pleasure to work with, and their website is easier than ever for end-users to navigate, and content editors to manage. The Coastal team had very thoughtful, clear feedback, and were deeply focused on our partnership to deliver an excellent product. This resulted in a website that transformed their digital identity into one that is truly befitting of such an innovative institution.
The work detailed here is simply a record of my part of the website redesign effort. The above work was performed by myself while part of the team at Savas Labs, and could not have been possible without input and feedback from my dedicated colleagues and the wonderful folks at Coastal Credit Union.