Website Redesign for Sno Falls Credit Union

Role:
Lead UX Designer/Visual Designer
Credits:
Created at Clyde Golden
Collaborators: Aimee Palacios, Brian Leahy
Creative Directors: Michael Ryan Wilson, Tim Yeaden

 
Portfolio-Image-new-site.jpg
 
 

The Problem

Sno Falls Credit Union has a membership base of over 6,000 customers throughout the Snoqualmie Valley area. They needed a website which could support their expanding member base while showcasing all the benefits of their products and technology. Their previous site had several key issues which got in the way of meeting that goal.

 

Not Responsive

In a mobile-first world, the site simply did not meet customer needs.

No Distinctive Visual Design

Components of the site felt tacked together rather than thoughtfully presented. Different products (loans/accounts) were presented in list form, stacked on top of each other with unclear CTAs.

Complicated Information Architecture

Loan and deposit products were grouped together on one page. Different types of rates were stored in different pdfs. Information was difficult to find and when product details changed, it was difficult to update.

 Original Website

My Goals

Consistent

Re-organize information flow to improve the experience

Simple

Establish consistent visual patterns to help guide the user through the site

Manageable

Create a flexible framework that non-technical staff members could easily edit

Information Architecture

The client did the work of developing a site map which we used as a foundation for the information architecture of the site.  This was a nice platform from which to build, but we needed a document to classify page levels and show how the different pieces of the site were interconnected.

site-map.jpg

 Information Architecture Modifications

  1. We added page-level classification and a color indicator to show which links clicked out to external sites

  2. We added a “Member Center” nav item to house useful information for members like pdfs, applications, and information about security

  3. We created more space to introduce the brand to users by creating a dedicated “Join” page

  4. Instead of a pdf, we consolidated all rates information on the site and housed it on one page, where users could filter by categories (Loan/Deposit)

  5. We added a “Search” function for users to quickly find information

Taxonomy 10-2020@2x.jpg

Lofi Wireframes

The project timeline did not allow for a lengthy lofi phase so I only sketched out a few pages before transitioning to full color. The process helped me start developing visual queues which could be later used as part of design system.

Modular Approach

The site needed to be editable by non-technical staff so I designed flexible modules that could be used flexibly in WordPress. This allowed website admins to create pages easily by assembling appropriate modules depending on page needs.  

Visual Concepts

I worked with Creative Director Michael Ryan Wilson to develop two different visual directions for Sno Falls to choose from.

Visual-ID_CONCEPT 1.png

Concept 1

This concept used lively illustrated overlays to highlight moments and milestones in our daily lives. Pictures captured how people might interact with Sno Falls and benefit from its services – online banking, car/home loans, etc.

Visual-ID_CONCEPT 1 copy.png

Concept 2

This concept showed simple illustrated backdrops of environments composed with real photos of products like buildings, homes, and cars that look natural together yet unexpected that a piece of that world is illustrated. 

Design System

Artboard 1@2x-100.jpg

Color

Sno Falls had an established logo and color palette at the time we started our redesign. They were open to evolving their brand, but wanted to stick with the general foundational elements. 

The process of expanding the color system unfolded organically. We used the same green color values throughout most of the illustrations or drew from the primary brand colors to add variety where appropriate. The idea was to convey a sense of cheerfulness to the user experience through color, while maintaining enough consistency to establish a footprint for the brand. 

 

Type

To keep the type consistent with the bolder illustrations, we selected Gotham Screensmart paired with Montserrat. The heavier weight of Gotham Ultra felt appropriate for headlines while the highly legible, comparatively lighter feeling of Montserrat worked well for body copy and sub-headlines.  

Artboard 1 copy 2@2x-100.jpg

Illustration

We created illustrated backdrops that depicted features of the Snoqualmie area - trees, mountains, and a mix of both rural and neighborhood scenes.

kiddo.jpg
Image 1@2x.jpg
Biz Loans.jpg
SF_Home@2x.jpg

Outcome

"Sno Falls is delighted with the new site and the personality it brings to their online presence as a local credit union. They're excited for the new site to not only be a benefit for their current members, but also use it and their new style as tools in their marketing efforts..."

-Project Manager, Scott Gregor

Upon completion, the site received an award from the American Graphic Design Association.

URL: snofalls.com

 
SF_Scroll.gif
 
SF-Savings-Desktop-Browser-2.jpg
SF-checking-Desktop-Browser-2-2.jpg