- Lead Web Designer
- Information Architect
- User Experience Designer
- User research
- Site architecture
- Design system
- Web development of all pages
- Design and art direction of all visual and user interface elements
- 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.
Front-end Framework: Zurb Foundation
Interaction Design 1
Interaction Design 2
Easy Decision Bar
Interaction Design 3
Subtle Parallax Effects
Interaction Design 4
Smooth Testimonial Sliders
Interaction Design 5
Dynamic Promo Modules
Interaction Design 6
Interaction Design 7
A More Helpful Map
Interaction Design 8
Interaction Design 9
Slide on in here
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.
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.
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.
Drag slider to compare medium and high fidelity mock-ups.
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.
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.
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.
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.
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.