Financial Services

Enhancing the Digital Journey for Financial Leaders

The Federal Home Loan Bank of San Francisco (FHLBank San Francisco) project aimed to transform the outdated public website into a modern, user-friendly platform that effectively communicates the bank’s mission to support homeownership and community development.
A view of the landing page and design components for FHLBank San Francisco public website design

Client

FHLBank San Francisco
A member of the Federal Home Loan Bank (FHLB) system, FHLBank San Francisco supports over 300 banks, credit unions, and insurance companies, fostering homeownership and community growth.

Timeline

May 2024 – September 2024  |  3 Phases

Team Composition

A multidisciplinary team consisting of two UX/UI designers (including the project manager and myself), a visual designer, a copy strategist, a front-end development team of four developers, and financial product specialists.

My Role

As a senior UXUI designer, I led the interaction design efforts, overseeing the creation of the design system, navigation architecture, high-fidelity designs, and the entire design-to-development handoff process. I coordinated closely with development team to ensure timely delivery despite technical constraints.
User journey mapping
Information architecture
Wireframes
Component creation
High-fidelity mockups
Design-Dev handoffs
Quality control
Client presentations
Goal

To modernize FHLBank San Francisco’s website for a scalable, accessible user experience that aligns with its mission, strengthens engagement with key stakeholders, and showcases community impact.

Challenges & Solutions

Outdated design and backend systems

Limited in-house resources for design and development

Technical Constraints Delaying Development (VM requirements)

Complex and time-consuming content management

Centralized Content Hub

Streamlined site architecture for improved scalability, brand alignment, and user experience.

Composable Design System

Created a modular system enabling fast updates and reducing reliance on external resources.

Agile Collaboration

Implemented agile sprints to navigate technical constraints, meeting deadlines despite extended development hours.

Empowered Internal Management

Implemented easy-to-use tools for autonomous content updates, ensuring consistency and timeliness.
Landing page of the FHLBank San Francisco public website with a gradient house outline graphic

Design Process Overview

A collaborative, phased approach to deliver a scalable, user-centered digital experience for FHLBank San Francisco.
Phase 1

Discovery & Research

Through stakeholder interviews, we identified knowledge gaps and defined project goals, collaborating with the visual designer to refresh the bank’s visual language and establish a consistent, scalable design system.
Phase 2

Design & Strategy Development

I designed wireframes to improve user flow and crafted an optimized navigation and information architecture. Additionally, our team developed a centralized content hub, empowering the bank's internal teams to manage content effectively.
Phase 3

High-Fidelity Design & Handoff

During the design-to-development handoff, I tailored documentation to developers’ needs and promoted close collaboration, ensuring smooth implementation of design components despite technical challenges.
Solution

Design Decisions & Rationale

Dashboard mockup

Refreshed Visual Design & Composable Design System

Established a modern, accessible visual identity with a modular design system to ensure quick updates.
Enhanced typefaces, icons, illustrations, and graphics to provide consistency and clarity across digital touchpoints.
Designed to reflect FHLBank San Francisco’s dual mission of supporting homeownership and community development.

The Living Line as a Mission-Driven Visual Guide

Integrated the "Living Line" as a dynamic and animated element to represent the bank’s impact across communities, businesses, and government.
Enhanced user engagement by guiding navigation, linking the bank’s mission to user journeys.
Balanced authority and approachability to deliver a cohesive, mission-focused digital experience.
Dashboard mockup
Dashboard mockup

Centralized Content Hub for Efficient Updates

Developed a content hub for managing updates autonomously, streamlining content alignment with member needs.
Enabled rapid updates, ensuring the bank’s story and mission are effectively communicated.
Prioritized storytelling to reinforce the bank’s impact on community and member services.

Agile Collaboration for Handoff Process

Implemented early handoffs at 30% design completion, allowing development to begin promptly and overcome technical constraints.
Facilitated continuous collaboration to maintain project momentum and meet delivery timelines.
Supported flexibility and scalability, ensuring a future-proof platform for FHLBank San Francisco’s digital initiatives.
Dashboard mockup
Impact

Significant Increases Both in Monthly Views and Return Visitors

The FHLBank San Francisco website redesign achieved a substantial impact on user engagement and brand alignment. Monthly views and return visitor rates significantly increased, while bounce rates declined, reflecting an enhanced and more intuitive user experience. This cohesive, accessible, and visually engaging platform solidifies the bank's leadership in mission-driven, user-centric digital engagement.
View the project of FHLBank San Francisco

Reflections & Learnings

This project emphasized the importance of adaptability in navigating technical constraints, such as virtual machine environments. Continuous collaboration with developers was crucial, as was adjusting design handoff processes to accommodate different working styles. The experience underscored the value of mentorship within cross-functional teams, enhancing both project delivery and the professional growth of both development and design teams.

Discover Other Projects

A man views the positive environmental impact that the bank has on the bank's webpage
bank of the west

Banking Experience Design with Design System Strategy

View Project
View the project of Race Communications
race communications

Marketing Website and Service Order Experience Design

View Project