Project Background
I partnered with a brand new nonprofit: The Center for Working Families. Their mission is to educate people with financial independence tools. They also aim to make housing more accessible to first time homebuyers. They also have career education services for individuals looking to upskill.
Time Frame
8 weeks
My Role
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping + Testing
Tools
UX Pilot, Figma, Canva, Squarespace, Wix
The Challenge
-
Brand new non profit doesn't have a lot of content to show on website.
-
When setting up a business, other priorities took precedence, so the website was not highest priority (meet infrequently)
-
Changing requirements/design decisions constantly .
My Design Process
Background
The Center for Working Families is a brand new non profit organization that had only been around 1 month. I needed to understand where this organization was in terms of their strategy so I held a meeting with their CEO to understand more of the company's vision, objectives, and needs.
CFW Stakeholder Interview
.png)
Based on the compiled information, the CEO is a mission-driven visionary who balances a passionate commitment to a generational cause with the pragmatic realities of leading a nonprofit.
She perceives financial independence as both an educational process and a critical human need in a housing crisis. While she struggles with a demanding schedule, her core focus is ensuring that the organization's unique value proposition is not lost in translation and that every external communication, like the landing page, clearly reflects the companies deep-seated values and achieves measurable, long-term impact.
Market Research
The next phase of research began with an exploration of current market trends and user needs. I conducted a competitive analysis of four other direct and indirect non profit organizations. All four competitors had varying features and catered to or met diverse needs.
CWF COMPETITOR ANALYSIS
Pain Points
People feel frustrated that they cant save money & build wealth.
People feel like they will never be able to afford a house.
People don't know what resources their community provides.
Personas
I gathered the data found from our competitive analysis and our pain points to create two user personas that represent our target audience
How Might We empower individuals to leverage our employment, community, and financial resources so they can achieve homeownership and financial independence
Wireframing
Iteration #1
I decided to use a new tool called UX pilot that would help me generate multiple layouts as a starting point. Here are my prompts and its generated output
.png)
Prompt #1
Design a non profit landing page. It should include "financial wellness", "community resources" and "employment" as its 3 pillars. There should also be a donate now button, and a contact form. Add some text underneath the hero image
Prompt #2
Make the hero image go across the length of the page and then put the text and buttons underneath.
_edited.png)
.png)
Prompt #3
Add this picture here and make the whole mockup background black
What our participants did not like
1. User did not like the layout of the information here. It felt cramped.
2. Users did not like this picture here. A suggestion was to use this picture on a following page.
3. Did not like the dark theme of the landing page.
4. Success stories are nice to have but since we are so new, we don't have feedback yet to include here.
.png)
Iteration #2
After more iterations, this is the hi fidelity mockup we decided to come up with. This was created in Squarespace and we left it in an unpublished state.
What we like about the design:
1. Hero image shows many people from diverse background all helping each other - this resonates with our mission statement.
2. "From Uncertainty to Opportunity" is an eye catching header that grabs the user's attention.
3. Liked the layout of the cards and how the bullet points convey the services we offer.
First Usability Study
I tested this high fidelity prototype on 3 participants. I wanted to test: visual design, content structure, and typos. The participants gave their feedback(right) that I used in the next round of iterations.
Iteration #3
After another round of iteration this was the next design we came up with.
What we like about the design:
1. The subheadings are now horizontal and easier to read.
2. We were missing an impact statement before we got to our services.
3. Liked the contact us and menu form better than the original design.
Second Usability Study
We held a second usability study in order to collect feedback of the newest design. Here are the results of the study:
What our participants did not like
1. Impact statement is just two text boxes, and thought the design was too basic.
2. Did not like this design, thought this design may be better on a following page and not the landing page.
3. Voted that they wanted this section redesigned.
4. Voted not to have our location on the landing page for privacy reasons.
Final Designs
I tested this high fidelity prototype on 3 participants. I wanted to test: visual design, content structure, and typos. The participants gave their feedback(right) that I used in the next round of iterations
Before
1. It's an impact statement but one that is not powerful enough
2. Text is just floating on the page, could use a design to enhance it
After
1. Added a "Did you Know" for some statistics to emphasize a point, and the arrows pointing to the logo show how we are at the center of all these issues.
2. Put our support initiatives text in a horizontal box. This improved the visual design of our message.
Before
1. Grid layout allows us to keep adding services and keep the layout cohesive.
2. Voted that since this is just the landing page, we do not need a button here.
After
1. The Z pattern with the color themes of the company enhances visual design of this section. Every participant rated highly of this redesign.
2. We removed the button because we do not need it now.
Before
1. The team wanted to highlight the community partners that they work with.
2. A contact us section gives potential clients a way to inquire about services
3. An embedded google map feature provides visitors with the physical address of the business in case they wanted to visit in person
After
1. Community partners went from just text to enhanced with circles around them.
2. Added a news and events page for upcoming career fairs and events.
3. Added a video of a couple moving into their dream home
4. Removed the Geolocation and made the contact us form smaller.
Putting it all together
The images below are what the final landing page that went live looks like (I had to make the image on the right smaller for readability)
Before
After
Key Performance & Indicators
Our KPI's come from the initiative by our client wanting to have at minimum a landing page to show potential clients for an upcoming career fair in October 2025. We were able to deliver on our promise of a website, flyers, and business cards. Check out or results below:
over a hundred users went to our site. About 64 users came from 2 different conferences.
).png)
We have recieved 15 submissions of people inquiring for support.
seconds is the amount of time people are spending on our website and viewing our services
Next Steps
The next steps for helping the Center for Working Families are:
Build out the following pages: Financial Wellness, Housing, CWF Cares, and Employment Services
Setup a CMS to manage blog posts, upcoming conferences, and job postings
Identify an areas of additional help e.g social media campaigns and outreach
Lessons Learned
My timeline for this project was very long and it still took me much longer than expected. This was my first real world project with a real client. Some of my takeaway’s are:
-
My Client wanted to change the website multiple times which delayed the launch. It was important for me to come up with tangible measurables that the client could use as a benchmark to success so we could move to the next parts of the landing page and ultimately an MVP that could go live.
-
UX pilot is a program that requires prompting for mockup generation. Prompting for mockup generation is still in its infancy. I would generate a mockup and it would still come out wrong. The problem with this is that I was paying for tokens so I would be spending tokens on output that I wasn't satisfied with. I ended up having to pay more to have more tokens and then I would also have to manually change things on the mockup to save on tokens and to speed up the process.
Prompting is a skill that needs to be mastered and I took a prompting course by IBM after this project.