Client
Seattle Credit Union
My Role
  • Lead Web Designer
  • Information Architect
  • User Experience Designer
Deliverables
  • User research
  • Site architecture
  • Wireframes
  • Mock-ups
  • Design system
  • Web development of all pages
  • Design and art direction of all visual and user interface elements
  • Copywriting
  • Iconography
  • Project management

Rebuilt from the foundation up.

Seattle Credit Union is Seattle’s first credit union. From back in 1933 until now they’ve grown every month to meet the needs of its members. As you can imagine, a financial institution with over 50,000 members, a billion dollars in assets, and approach 90 years of history, they have a lot of different types of products and services to deliver on. That’s why we had to rebuild the website from scratch, starting with the very basics of information hierarchy.

The full site is a 520-page catalog covering every product, service, disclosure, and form a member would need, but the goal was to make it easy enough to navigate that it never feels overwhelming for the users. We used navigational groupings to combine similar products into its main categories based on the intent of each user, and built subgroups off of those. The user would be led down a funnel until they got to the product or service they were looking for, before being introduced to rates, terms, or CTAs.

The team and I designed a series of custom icons, large images, and plenty of negative space to make each page easier to skim when browsing for a specific section. I also designed new primary, secondary, and tertiary buttons, with the most “important” calls to action being the highest contrast elements on the page. The buttons also factor in several affordances including lighting and shadow that lifts the element on the page, offers user feedback when hovered or focused on, and ultimately concaves in when buttons are pressed or clicked.

This is the fourth generation of the corporate website since I’ve been working with Seattle Credit Union. In order to see how far the user experience of these sites has come, here are some snapshots from over the years. (2008, 2011, 2014 which was the first responsive site for the credit union, and 2017.)

The project included merging three separate sites the credit union was using to fulfill its different needs from members:

The corporate site: used to highlight products and services and ultimately help members and potential members open accounts and apply for loans. The knowledge-base: this was the “owner’s manual” for all credit union products. Nearly 250 different articles on how to do everything from changing your online banking password to getting your tax documentation to report mortgage interest. The blog: a frequently updated site chock-full of lifestyle editorial, educational posts, and a hub for highlighting member and staff stories.

We analyzed the site traffic going to the old website and brainstormed a logical group of top-level navigation items based on search queries and user flows. Once we had our top-level options, we hosted several extensive card sorts that involved team members from multiple departments putting content in the areas they felt were most logical. After aggregating the insights we were able to find a home for all of the content. The final stage was having review sessions with single individuals and asked them to perform a series of basic actions, common amongst website users. More discoveries were made, and we further refined the site structure. With everything living under one roof, any page can be found through the navigation or using the robust search tool.

Want more? Ask me about the UX Playbook I developed for this project.

CMS: Drupal
Front-end Framework: Zurb Foundation

Interaction Design 1

Distraction-Free Login

The website redesign was designed to get users to the page and section they’re looking for and making it easy for them to complete the desired action. One area where the old site was coming up short, was for the first-time shoppers. The log-in box placed right over the “hero” section that was intended to make a bold statement introducing them to the Seattle Credit Union brand. By moving the login box and replacing with a button we were able to clean up the elements on the homepage so it’s less distracting. The login section drops down when the button is clicked providing a distraction-free login experience. When members are entering sensitive information, the last thing they want is to be distracted with unrelated promotions or updates. 

This update also allowed us to segment outgroups. Alerts related to upcoming online banking maintenance periods could be placed within the dropdown modal, rather than overlaying a bar on top of the homepage. Shoppers and browsers don’t need this information, but members who actively use online banking do. The goal of the site is to give people the information that is most relevant to their end goals.

Interaction Design 2

Easy Decision Bar

When analyzing the user flows of the site visitors, we saw that it was often taking four or five clicks for users to get to a page where they could apply to open a financial product. This was bad for the user and for the financial institution. We add a “sticky” module dubbed the “Easy Decision Bar” that keeps the five main products (according to user data) one click away.

The icons grow when hovered, affording that it is a clickable element. The art for each icon makes the product offering easy to skim to help users absorb the content efficiently.

Interaction Design 3

Subtle Parallax Effects

To keep users engaged as they scroll down the page, I broke up content with icons that reinforce the messaging of each section. Beyond the nice pop of color, and relief from endless blocks of text, the parallax effect applied to the graphics let catches the eye and makes the entire experience feel more interactive. Dialing in the effect was a bit of trial and error. Too little, you don’t notice and it’s bland. Too much, and it’s intolerable… kind of like salt.

Interaction Design 4

Smooth Testimonial Sliders

Social proof is an important part of building trust towards a brand or product. Seattle Credit Union had so many great reviews from members in the form of emails to staff, hand-written notes, social media posts, and reviews on third-party sites. But that wasn’t doing them any good to the new visitors to their site, experiencing them for the first time. Each product and brand experience page features relevant testimonials from real members in a way that is fun to read through.

Interaction Design 5

Dynamic Promo Modules

A common complaint about the old site, promos and content would often feel stale quickly. One reason is that there was nothing to interact with on the homepage. Adding modules that can feature larger, bolder imagery; paired with a dynamic hover effect helps this section feel fresh and engaging to new and returning users alike.

Interaction Design 6

Responsive Calculators

There’s no way around the fact that some financial products are just harder to wrap your head around. With down payments, points, potential service fees, terms, principals and interest rates people get confused. And when people are confused, they can’t make a decision. I collaborated with a third-party team of developers to create custom product calculators for our consumer loan, mortgage, and deposit products; with me contributing the intended functionality of each calculator, custom icons and illustrations to ensure they felt cohesive with the site, and the front-end user interface layout. The result are fully responsive calculators the render beautifully and function across all major devices and browsers.

Interaction Design 7

A More Helpful Map

There are four types of locations that the credit union site visitors are typically looking for: their branches, their ATMs, surcharge-free branches, and surcharge-free ATMs. We developed a backend database that updates with all registered shared branch and ATMs in Washington state, along with all of Seattle Credit Union’s locations. Users can filter for what kind of location(s) they are looking for, and choose to enter their location or use their current location to find the options closest to them. When each result is clicked it will either zoom in to reveal that areas options, or offer details about hours of operation, address, and any special notes the user would potentially find helpful.

Interaction Design 8

Friendly Iconography

The credit union has a very long list of helpful services, and with new digital tools popping up constantly, the list size continues to grow. They needed a better way to highlight all of the services that are available just by being a member of the credit union, but nobody wanted to read through that endless tower of text. I illustrated and implemented nearly one hundred different icons for use throughout the site, to make this type of browsing easier for the member.

Accordions have been added throughout the site to make pages scannable, but when a user finds the section their looking for, details are readily available.

Interaction Design 9

Slide on in here

The very nature of certain pages mean that there will be an expanding list of content that will appear beneath the fold. But it’s great content! It should get to make a proper entrance. Images, icons, videos, and text blocks have all been customized to subtly enter the page, leading the viewer down the page and keeping enough negative space to where they don’t feel overwhelmed when reviewing individual sections. Before implementing site-wide, we did tests on a landing page series and notified the number of visitors that made their way down at least 75% of the page went up by over 30% using this approach.

My Design Process

The jumping off point for all of my work as a designer is to understand three things from the start. What are the goals for the business, for the user, and for the product. Without that, projects are missing a common thread between designer and stakeholder and the work won’t be as good as it could be.

With goals established, I aim to practice human-centered design as a creative approach to problem-solving. Everything begins with the person that I’m designing for and ends with solutions that are developed to meet their unique needs. It’s about building empathy for the actual people using the product and keeping them in central focus.

  • Empathizing is putting myself in the shoes of the person I’m designing for and seeking to understand their circumstances as holistically as possible.
  • Defining is the stage where I’ll develop personas, list challenges, pain points, and map out the decision trees for each user.
  • Ideate is the stage where the team can throw out ideas in a collaborative way. All ideas are worthy, which is why “Yes and…” is a frequently used term in these brainstorming sessions.
  • Prototyping is where I’ll put together mock-ups and see what works, quickly. I try to keep things simple and iterate on designs that show promise. Often times prototyping will naturally generate new (and better!) ideas, so I’ll step back to the ideation stage as needed.
  • Testing is when the team and I will look at what we produced and really see if it works. We’ll test it and track the results. Find out if the design is accomplishing the goals defined in stage two. From there, we’ll iterate to make it better.
Design Thinking

Personas

Understanding Seattle Credit Union’s website users was a fundamental first step to creating an exceptional product. We analyzed our website analytics from 2015-2018 to discover the most popular user-flows, and documented the most common search queries using the search console. We gathered demographic information and psychographic metrics including the affinity groups and in-market segments through Google insights. From this data, we worked with several departments to develop personas that encompassed the users of our site. This helped our team find the answer to the most important question, “Who are we designing for?” The personas made it possible to understand the expectations, concerns, and motivations of our target audience. (I have redacted all personal insights and detailed narratives specifically tied to member data for confidentiality with the client.) With these people in mind, we were able to better empathize with their experience and found opportunities to improve how we communicated information through our website. With four personas in total we found that although there were different factors to consider for each, it was possible to design a website that satisfies everyone’s needs and makes it easier to accomplish the common end-goals for each person.

sitemap
sitemap wall

Card Sort & Site Map

In order to deliver a logical and easy-to-use navigation, we needed to rethink the information hierarchy of the website. Seattle Credit Union offers literally hundreds of different products and services, and the average consumer is unlikely to know the ins and outs of each product category. To get our content into the appropriate buckets, we needed a system.

Open card sort: Our Marketing and Creative Services team had a few new employees at the time who did not have much experience with financial products, and a few of them mapped well to a couple of our personas. So we created sticky notes for every product and service and allowed the participants to sort these into groups they thought made sense, and allowed them to name each group. We went through a couple rounds of combining smaller groups until we felt that everything had a proper home under each parent section.

Closed card sort: To test our top-level groups, we then asked employees from other departments that don’t work directly with our products or website to help us categorize products under each group. From this, we were satisfied we had identified a good set of parent groups, but we also discovered that in some cases there were legitimately two top-level categories for certain products. Examples include Mortgage products living under its own umbrella called Home Loans, and also under Personal > Loans.

Site Map: Once all of the products and services had a place in our site hierarchy, our Marketing Product Manager and I rounded up all of the administrative and product-manual content that needed to be included in the site as well. This is content that is usually linked to in correspondences to members, but we also want it to live in a logical place so users can navigate to it and find it. This included things like the credit card agreement, electronic funds transfer agreements, and similar disclosure documents. We developed a new section in the footer called disclosures, and created searchable articles that were tagged with the most common search phrases associated with these documents.

Low Fidelity Wireframes

We developed a comprehensive catalog of wireframes accounting for all the various page types and device families. This helped help us think through the content structure before we started getting to granular on how UI elements should be styled. The wireframe process went through several rounds of edits, with members from outside of the website team reviewing and offering their feedback. These reviews informed content hierarchy, page structure, interaction insights that would eventually all contribute to how we would lay out our site’s pages and individual UI elements.

Leveraging the use of wireframes allowed the design phase to move in a more streamlined direction, as I wasn’t committing too deep to aesthetics until I knew we all had agreed to the overall structure. It also helped our team focus on strategy and usability first, and aesthetic second. These steps kept the user in central focus through every stage of the design process.

As a part of this project, I created a template for wireframing for mobile devices with specs similar to the iPhone X and another template for a MacBook Pro. It features a light gray dot-matrix grid to help with placement and balancing. It also features a title bar for organizing your wireframes and a notes section for capturing decisions, next steps, and insights.

Medium & High Fidelity Mock-Ups

Once we had low-fidelity wireframes for the page templates we would need for the site, I created medium fidelity mockups. I laid everything out in grayscale first, and used basic shapes to denote images, icons, and rich media. The purpose for this was to focus on the content layout for desktop, tablet, and mobile dimensions without having stakeholders distracted by the actual content.

I met with each department-head to review the medium-fidelity mockups and discussed how the content for their product line would be displayed on each device. After several rounds of feedback, we had stakeholder sign-off and I laid out the high-fidelity mockup for all five page types.

In this stage I used Sketch, Adobe Illustrator, and Adobe XD.

Homepage

Drag slider to compare medium and high fidelity mock-ups.

website high fidelity mockup of seattlecu.com

Overview Pages

medium fidelity overview page high fidelity overview page

Product Pages

medium fidelity product page High fidelity product pages

Search Pages

medium fidelity search page high fidelity search page

Locations Pages

medium fidelity locations pages high fidelity locations page

UI Colors

The colors in the palette reinforce the Pacific Northwest-vibe Seattle Credit Union is aiming to capture, but also delivers on the WCAG 2.0 AAA color contrast standards ensuring the site’s colors contribute to improved accessibility across desktop, tablet, and mobile screens. Fir and Volt were developed to be the hover and active states of the two dominant greens in the organization’s design system, Moss and Bolt. There’s an expanded palette featuring four more variants for when more tints were required to provide the level of detail for a given for certain components.

Moss

#567d15

Bolt

#c4d600

Fir

#375e09

Volt

#adc500

pebble pattern
sprinkles pattern
sticks
craters

Reusable Patterns

As a part of the design system, I developed a series of patterns that can be used for backgrounds, shape, and photo accents throughout the credit union’s digital properties. The patterns are scalable and tiled so implementation is quick and easy. This helps when working with multiple designers because the assets are readily available and proven to complement the rest of the site’s visual aesthetic.

Custom Icons

In order to make content easily skim-able, we used icons a “anchors” for the eye. This helped give different blocks of content better context as to what it would be referring to. I also worked with a series of outside developers to create custom financial calculators and a location tool which both required its own set of UI controls for functions like “back”, “next”, “cancel”, “log in”, “favorite”, “print”, “dropdown”, and “roll up”. It was important to me to have even these small controls fit the personality of the brand, and matched the aesthetics of the product icons throughout the site. The result made these tools feel native to the site. For posterity and version control throughout the life of the website, I created a master document for all of these elements in one place.

icon sheet
scaling typography

Responsive Scaling Typography

The typographic scale of any piece of design is important for usability. A clear hierarchy of information needs to be established and maintained from section to section so a reader knows what elements are the most important and how details are related to larger themes. The site features a typographic scale based on the Golden ratio, and font-size increases so each element is relatively larger as you move from disclosure text, to paragraph text, to block quotes, then through the headings h4, h3, h2, and h1. The type size of each of these elements is largest on desktop and laptop dimensions and smallest on mobile device dimensions, with tablet font-sizes landing splitting the difference so the visual weight of each typographic element always feels appropriate related to the screen area.

Results

The site has not been fully deployed yet, however we have implemented parts of this design system and functionality on individual landing pages to test their effectiveness and to iterate on them. What follows are some results from those tests.

19

Increase in conversions on landing pages featuring auto loan calculator.

9

Increase in users who make it at least 3/4 down a page when using graphics with animation and parallax effect.

38

Increase in leads when using on-page sign-up form.