FHLBank San Francisco - Project Details

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

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.

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.

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.

Design Process and Decisions