01.

F3GLOBAL /

REBUILDING A PUBLIC SITE AND CUSTOM ADMIN PORTAL FOR A GLOBAL MICROFINANCE NONPROFIT.

F3Global homepage hero reading “Empowering Small Businesses” over a faded world map, with Become a Client and Join as a Member buttons.

ROLE /

DESIGN LEAD

TIMELINE /

8 MOS

PROJECT TYPE /

WEBSITE & ADMIN PORTAL

TOOLS & SKILLS /

FIGMA, DESIGN SYSTEMS, USABILITY AUDITING, USER TESTING, RESPONSIVE DESIGN, AI-ASSISTED WORKFLOWS

TEAM /

3 DESIGNERS, 9 DEVELOPERS, 1 ENGINEERING MANAGER, 1 PROJECT MANAGER

LIVE SITE

Designing credibility for a microfinance nonprofit, resulting in a fully shipped, live platform.

F3 Global Foundation provides microloans and entrepreneur support to small businesses in underserved communities worldwide. The old website wasn't reaching any of the three groups the organization depends on, including donors who fund the loans, clients who receive them, and members who run programs. The site was also hosted in a way the organization couldn't easily afford or update.

I led two other designers through a full redesign, handing off to and working alongside with a team of 9 developers. The deliverables included a public site, mobile and tablet breakpoints, and a custom admin portal so staff could maintain the content, newsletter system, and team member database.

Laptop and phone mockups of the F3Global site's interactive team map, showing an Our Team Around the World panel listing members by country.

OUR APPROACH

01

How might we rebuild a confusing legacy website that donors, clients, and members can each navigate to achieve distinct goals, paired with an intuitive backend admin portal?

Tablet mockups of the F3Global admin portal login screen, an impact timeline, the site's navigation sidebar, the newsletter article list, and a published article.

Before proposing anything new, we spent two weeks auditing the existing site and evaluating how similar organizations drove engagement and earned trust. From scratch, we then built a design system that nine developers could implement inside an eight-month timeline.

Usability Audit

We started by evaluating every screen of the legacy site. We discovered issues including a confusing information hierarchy, overly dense text, and a lack of clear purpose in the contact forms that left users lost. The site also faced accessibility problems, with colors that didn't clear contrast guidelines and broken responsiveness.

Screens from the legacy F3Global website annotated with usability audit feedback on navigation, contrast, and layout.

Competitive Analysis

We analyzed successful microfinance platforms like Kiva and Grameen America to understand industry standards for building trust. We realized our solution needed to build confidence for every visitor, using testimonials and measurable impact to show we put people we serve first.

Homepage screenshots of four microfinance nonprofits used in the competitive analysis: Kiva, OneTable, Grameen America, and Accion.

Design System

To craft an experience that felt credible and modern, we established a fresh, accessible design system. We used a cohesive color palette of blue shades and clean typography to build components that evoked a feeling of immediate trust.

Design system reference board with JPMorgan and Goldman Sachs branding, typography scales, button styles, and the F3Global color palette.

DESIGN DECISIONS

02

Every screen went through several rounds of iterations before it was ready to ship. One decision about entry points reshaped the site's entire structure. Others shaped individual components, incorporating feedback from user testing, stakeholder review, and the developer team about what was feasible to build during the time we had

Three Entry Points for Three Audiences

Donors, clients, and members came to the site for completely different reasons, but the previous site treated them as one audience. We rebuilt the homepage around three separate paths, each with its own entry point, language, and primary action which were to become a client, join as a member, or donate. Everything deeper in the site was organized underneath those three branches.

Three F3Global homepage variations side by side, each opening with a different call to action for donors, members, and clients.

Pivoting the Admin Portal

The Mobile Sprint

Storytelling Through Design

We initially designed the backend Newsletter Editor to fit everything needed for adding a new article into a single, large pop-up that filled the screen. User testing quickly revealed cognitive overload. We iterated and separated the flow into a two-step process, reducing information into digestible chunks.

Our client mistakenly assumed mobile and tablet designs were included in the MVP handoff. We adapted immediately, grinding out the fully responsive mobile screens in just two weeks to meet the launch deadline. This was made possible through well-tokenized components in the initial build and buffer room I planned in our design schedule.

To drive donor engagement, we prioritized components proved the organization's real world impact rather than just telling it. We designed impact stories from past clients, an interactive global map showcasing F3Global's worldwide spread, and surfaced real, impactful numbers.

Before and after comparison of the admin portal's Add New Article form, split from one long form into a two-step flow.
Responsive mobile screens of the F3Global site, including the homepage, mission page, donation flow, and an article page.
Interactive world map with a connected panel listing F3Global team members by country, including names, roles, and contact links.

OUTCOME & IMPACT

03

High-fidelity screens delivered across desktop, tablet, and mobile.

Distinct audience paths, each with its own entry point.

Content types staff can now edit without a developer.

Usability test participants.

REFLECTIONS

04

The fully responsive website and custom admin portal are now shipped and live at f3-global.org. We are currently tracking metrics like click rates and bounce rates to quantify our success.

Tablet mockups of the F3Global admin portal login screen, an impact timeline, the site's navigation sidebar, the newsletter article list, and a published article.

Takeaways

Responsiveness is more complex than scaling.

The work is only half done when everything is in high-fidelity on desktop. Making mobile designs and tablet adjustments required a whole different way of thinking, not just rescaling components. We delivered on time, but scheduling more space for responsiveness in the timeline would have given us more room to experiment and iterate.

Ask to see the content before designing the container.

We rebuilt the newsletter page after finding the content would be 20+ page articles, instead of the blog posts we assumed. Even though the rebuild was successful, it would have saved us time to ask what the content looked like beforehand instead of assuming. This has become an important lesson that's changed how I approach and run client meetings.

What's easy in Figma isn't easy to build.

Working closely with developers taught me to pressure-test technical feasibility early on in the process, so that handoff was smooth and everyone knew what to expect. We learned to think about our designs not only from a designer's perspective, but also consider how it may work in code.

Design for someone less fluent than you.

Our audience wasn't tech-savvy or design-literate, and neither were the staff maintaining the admin portal. Throughout the process, we had to remember to put ourselves in their shoes, and keep ourselves honest with user testing.

The Team

Huge thank you to Jeff Antony and Sylvie Tran for being two of the most talented, creative, and hardworking designers I could have asked to work with. To Weston Zong and Annabelle Guiditta, our Engineering Manager and Project Manager, thanks for leading the best TSE team with me.

And of course, so grateful to the incredible developers who made our designs come to life: Jaden Huang, James Escobedo, Katelyn Li, Munachi Okoro, Suhaan Khurana, Sweekrit Bhatnagar, Tony Wang, and Yasmin Kabir.

BACK TO HOMENEXT PROJECT: Chase