- 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 their members. As you can imagine, a financial institution with over 50,000 members, a billion dollars in assets, and approaching 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 their main categories based on the intent of each user, rather than the backend product department. Once the proper top-level navigational groups were established based on user interviews and card-sorts, we built logical subgroups off of those. The resulting site navigation led users down a funnel to the correct 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 incorporated plenty of negative space to make each page easier to skim when browsing for a specific piece of information. 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 to encourage interactivity. These affordances include lighting and shadow effects that lift buttons off of the page to draw attention, tasteful state changes for when buttons are hovered or focused on, and a concaving effect for when buttons are pressed or clicked so users get immediate feedback to their action.
This is the fourth generation of the corporate website that my team and I designed in my time working for 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 (the site design from when I was hired), 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 main corporate site, which was used to highlight products and services and ultimately help members and potential members open accounts and apply for loans. The knowledge-base, which was the “owner’s manual” for all credit union products, including nearly 250 articles on how to do everything from changing your online banking password to getting your tax documentation to report mortgage interest. And finally, the blog, which was a frequently updated site chock-full of lifestyle editorial, educational posts, and a hub for highlighting member and staff stories.
In addition to user interviews, 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 designed a remote card sort (using Optimal Workshop) that involved members putting content in the areas they felt were most logical. After aggregating the insights, we were able to find a fitting 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
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 textures that can be used for backgrounds, shapes, and photo accents throughout the credit union’s digital properties. The textures 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.