Making cents out of chaos

Transforming branding and navigation to simplify access to financial education programs for families.

Web redesign | Visual identity | Information architecture

Background: The client's quest to widen their web of reach.

Dollars and Good Sense Foundation (DGSF), a Washington-based non-profit, educates low-income families in financial literacy. Confronted with low sign-up rates and intensive in-person recruiting, they wanted a full website rebrand to boost and scale their digital outreach.
How might we make program discovery and enrollment easier for prospective participants?

Impact: Delivered and launched an informative, intuitive web redesign.

We designed a streamlined, responsive website tailored to DGSF’s target audience needs, backed by usability testing and research. The redesign aims to simplify the sign-up process, provide clear program information to potential participants, and encourage donor support.


reduction in time spent to grasp the foundation’s mission.


improvement in user comfort scores when using the website


enhanced clarity in understanding donation methods.


April - June 2022 (10 weeks)


Figma + Figjam, Optimal workshop

Collaborators (5)

UX design lead: Ak (me)
UX design: Luka + Marianna (also PM)
Content design: Grace
Research: Swati

My contributions

Discover: Competitive analysis, UX audit, usability test, card sorting
Define: Target users, business goals, task matrices
Ideate: Sketches, IA, wireframes
Prototype: Lo-fi, hi-fi, design system
Test: Usability tests, client critique
Deliver: Feedback integration, Guidelines and specs, handoff to dev

Building understanding through research

Assessing the website’s current state

Identifying user drop-offs and pain points through UX audit

We wanted to understand where in the process users were dropping off and why, pinpoint where the enrollment flow was lacking, and strategize ways to leverage our site architecture to drive traffic to the programs.

Usability testing

9 finance enthusiasts, both experts and novices, to identify UX friction points.

Competitive analysis

10 financial education competitors for insights into industry best practices and strategies.

User interviews

3 current participants to uncover program USPs and understand their website interactions.

Key user struggles discovered through usability testing

I evaluated key website tasks such as mission discovery, program relevancy and navigation, understanding program structure, registration, and contacting the organization. I developed these tasks using insights from client and current participant discussions, mirroring the website's critical role in the user journey with DGSF.
Quotes from participants during usability testing of the current website

78% users struggled with mission clarity.

Most users rated the task of identifying the org’s mission as below 3 out of 5, averaging 87 seconds, attributing this to cluttered and inconsistent information.

78% users couldn’t find programs.

Many users mistakenly clicked on ‘events’ and ‘shop’ links while searching for programs, not realizing these as separate from the dedicated programs pages.

60% users expressed distrust.

Over half of the users expressed distrust and reluctance to recommend the website, primarily citing its appearance and messaging as reasons.

Defining our focus

Prioritizing research findings and user needs

Defining the driving goals

During the alignment session, we tailored the client’s business objectives to fit the UX scope, informed by user research. For instance, we shifted from a broad goal of increasing donations to a specific target of boosting donation page views by 10%, focusing our design efforts on areas with measurable UX outcomes.
Business and user goal alignment

Defining our target users

Given the project's timeline, we focused on prospective participants among our 4 user groups (prospective and current participants and donors). This choice was in alignment with the client's objectives to increase program page traffic and enrollments, catering specifically to the needs and use cases of these prospective participants.
Our primary persona
We developed a user task matrix to categorize task frequency across user groups, identifying key interactions and priorities based on insights from user interviews and client workshops.
Prioritization matrix

Ideation and wireframing to simplify understanding of the org

How might we make the org’s purpose clearer?

Visualizing how prospective participants can access org offerings easily

Through wireframing, I focused on the home and program pages for content prioritization and early issue identification, collaborating closely with my team and stakeholders.
Team feedback on home page wireframe (version 1)


Prospective participants want quick and easy access to clear, relevant DGSF information, including purpose and value, with minimal clicks.

Resulting design decisions

Descriptive headers and simple, conversational language to convey DGSF's community role.

Divided content into digestible, intentional sections; highlighted backgrounds to direct users' attention to key info.


Time taken to grasp DGSF’s purpose reduced from 90 seconds to 10 seconds.
- Average user comfort score increased to 4.5/5 from 2/5 (from prototype testing sessions).

Testing and iterating to facilitate engagement with the org

How might we streamline program discovery and registration process?

Card sorting to gauge how prospective participants perceive the navigation

We conducted an open card sort exercise on OptimalSort with 23 participants to understand how target users interpret and categorize the site’s information. I co-created 42 cards with Grace, with each card containing an action or content that could be found on the website and presented them to users for sorting into groups.
Card sorting analysis using dendogram
Finding: Users saw events as distinct from program, not realizing they were sequentially linked as program kickoffs.

Optimizing web navigation by applying insights from card sorting

Based on card sorting insights, Marianna, Luka, and I redefined the IA. I designed a nav bar with the core website pages on the left, and actionable CTAs to the right, highlighting 'Donate' to support the non-profit's cause.

Insight from card sorting

- Users unable to find programs due to counterintuitive nav terms and CTAs.

- Users didn’t realize that events were program kickoffs.

Resulting decisions

- Used user-recognized terms based on card sorting feedback.

- Unified 'programs' and 'events' under 'Our Programs' to clarify their sequential structure.


- Simplified nav items from 7 to 4.

- Program discovery rate grew from 20% to 100%, implying more intuitive navigation (from testing sessions).

Usability testing to address user confusion around the family-centric approach of the programs and registration process.

We conducted 10 usability tests to validate our ideas using mid-fidelity interactive prototypes. I refined the designs for the Home and Programs pages based off our major findings.
Participant quotes from the usability tests of the redesigned program pages


- Users mistook programs as age-specific and independent.

- Users were unclear that programs were family-focused.

- Sought key program details like content, cost, coaches, etc.

Resulting decisions

- Unified programs by replacing cards with age-specific tabs and removing inner subpages.

- Added a common "Register your family" CTA.

- Displayed program info upfront.


- User understanding of the program's family-centric nature boosted by 95%.

- 60% more users understood how the program works.
Participant quotes from the usability tests of the redesigned registration form


- Users assumed each age group required a separate registration.

- Users found certain input fields as unnecessary and invasive.

Resulting decisions

- Added a conscious selection option upfront to allow family/group/individual registration.

- Reduced text input, set only key fields as mandatory, and added accommodation options based on client insights.


- All users understood family/individual registration options.

- No one reported the form to be cumbersome. 90% valued and would use the new accommodation features.

Defining a design system and prototyping to build trust

How might we establish DGSF as a credible org?

Competitive analysis and mood boards to align everyone

In usability tests, I probed into the users’ distrust using the 5 Whys technique, discovering issues with the website’s visual inconsistency and clutter. I made a mood board of sites that match our mission and shared it with the team and clients. Together, we decided the website should be approachable, family-friendly, and credible.
Mood board and one of the resulting homepage iterations

Building a cohesive digital identity

I refined the design system to mirror DGSF's playful and professional outlook towards financial learning. I used accessible resources, such as imagery and icons that are free for non-profit use, and maintained a clean, simple layout for easy adaptation to Wordpress. My focus was to build consistency and relatability of the DGSF brand.
Style guide


- Inconsistent colors and typography on the site led to perceptions of distrust.

Resulting decisions

- Introduced a cohesive design system, focusing on brand values and accessibility.


- Improved user trust.“I love how the website’s warm colors and messaging make me feel I’m not judged.”

Decluttering to emphasize DGSF’s core - the community and coaches

Following user feedback, I incorporated social proof and detailed information about mentors to build trust.
Social proof through testimonials, community impact, and mentor info


- Users unable to trust program without clear impact, real stories, and mentor credentials.

Resulting decisions

- Added social proof and mentor qualifications to affirm credibility and impact.


- Inclination to recommend the website to others increased by 60%, indicating higher trust.

Reflection and learnings

Designing with intention & purpose


Matching business and user needs

Navigating the delicate balance of aligning user needs with business goals and resources taught me the significance of presenting ideas to the organization in a way that resonates with their priorities and concerns.


Quality over quantity for research

When time is limited, it’s valuable to prioritize the quality of research over the quantity of the sample size.


Ask endless questions

Asking questions until the context becomes clear is paramount. It took us several weeks to understand the intricacies of the DGSF programs, and it was the thousands of questions that helped us distill and present that information in a simplified way.