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.
88%
reduction in time spent to grasp the foundation’s mission.
2.5x
improvement in user comfort scores when using the website
400%
enhanced clarity in understanding donation methods.
jump to solution
Overview:
Duration
April - June 2022 (10 weeks)
April - June 2022 (10 weeks)
Tools
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)
Insight
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.
Divided content into digestible, intentional sections; highlighted backgrounds to direct users' attention to key info.
Impact
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).
- 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.
- 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.
- Unified 'programs' and 'events' under 'Our Programs' to clarify their sequential structure.
Impact
- Simplified nav items from 7 to 4.
- Program discovery rate grew from 20% to 100%, implying more intuitive navigation (from testing sessions).
- 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
Insight
- 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.
- 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.
- Added a common "Register your family" CTA.
- Displayed program info upfront.
Impact
- User understanding of the program's family-centric nature boosted by 95%.
- 60% more users understood how the program works.
- 60% more users understood how the program works.
Participant quotes from the usability tests of the redesigned registration form
Insight
- Users assumed each age group required a separate registration.
- Users found certain input fields as unnecessary and invasive.
- 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.
- Reduced text input, set only key fields as mandatory, and added accommodation options based on client insights.
Impact
- All users understood family/individual registration options.
- No one reported the form to be cumbersome. 90% valued and would use the new accommodation features.
- 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
Insight
- 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.
Impact
- 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
Insight
- 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.
Impact
- Inclination to recommend the website to others increased by 60%, indicating higher trust.
Outcome and feedback
Words from the client
“Thank you for sharing your amazing transformation of our website! Our staff and board are so impressed by the quality of work you’ve delivered, and we’re confident that your efforts will help more families walk toward a life of money wellness. Your impact will ripple for years to come.”
Debbie Todd
Dollars and Good Sense Foundation
The Cha-Ching team ❤️
Reflection and learnings
Designing with intention & purpose
01
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.
02
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.
03
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.
