Improving engagement and accessibility for finEQUITY.org
As a Product Designer, I was responsible for improving engagement and accessibility for new and returning users, developing the Style Guide, creating the Information architecture and design strategy, wireframing, working on microcopy, collaborating with cross-functional teams, and leading the team of 5 designers.
What is finEQUITY?
finEQUITY.org helps people affected by incarceration manage money gaps, build financial stability, and access free, fair financial services. It connects users to financial coaching, credit building, and debt management tools to make their reentry smoother and faster.
Figma, FigJam, Discord, Hemingway App, Google workspace, Framer
My Responsibilities:
Content strategy
Information Architecture
Creating microcopy
Developing the Style Guide
User research
Wireframing
Cross-functional collaboration
Leading the team of 5 designers
Competitive analysis
Content audit
Timeline
November 2024 - February 2025
Background
The main goal of finEQUITY is to fight the economic hardships and financial struggles faced by families impacted by mass incarceration in the United States.
A key feature of the platform is its free reentry financial resources for returning citizens.
I joined the project in its first phase, where the focus was on developing the design strategy, information architecture, and a full site redesign.
What was the problem?
finEQUITY's partners expressed concerns that the website does not look reliable to them to donate and support the organization. The website looked outdated. Additionally, they wanted to see clear descriptions of how this initiative works.
After conducting the content audit, our team revealed several other issues including:
The website hierarchy was inconsistent, and important sections, like the Coach Portal, were not easily accessible.
There was no clear proof of impact, making it hard for participants and partners to understand the organization’s effectiveness.
The language was difficult to read, often at a 12th-grade level or higher.
It was unclear what types of partners finEQUITY collaborates with.
How could we solve this problem?
Complete the redesign of the website.
Create more engaging microcopy and action-driven CTAs.
Create the Content Style Guide to maintain clarity, consistency, and accessibility across all written content on a website or digital products.
Develop the Information Architecture to create a clear structure and hierarchy of the content.
Show the real impact! Use success stories, testimonials, and data to highlight how finEQUITY has transformed lives.
Information architecture and sitemap
I began by working on the information architecture (IA) and creating a site map to make navigation intuitive and content easily accessible. My goal was to improve user flows, reduce friction, and ensure that key information was easy to find.
To achieve this, I focused on structuring the site map, ensuring that related pages were logically grouped and easy to navigate. I conducted a content audit, analyzed user needs, and collaborated with cross-functional teams to refine the overall site structure.
I established five primary pages, refining their titles for clarity. Once the primary structure was set, I organized the secondary pages, bringing greater structure and hierarchy to improve the user experience.
Toolbox
As you can see, in the toolbox:
Dark green indicates primary pages
Light green represents secondary pages
Light grey is used for external links
Dark grey is used for footer content
Content description
Additionally, I added content descriptions for each primary page to provide clarity about its purpose and function, and as a recommendation for cross-functional teams.
By reorganizing content, standardizing navigation labels, and developing a clear site map, I enhanced both usability and engagement. Eventually the sitemap served as a helpful tool for a successful web development process. It provided a clear vision of how the structure of the future website should look and all cross-functional teams referred to it during our work on the website.
To better understand how to improve the content for finEQUITY.org, our team conducted a competitive analysis by reviewing similar organizations' websites. Our goal was to identify content gaps and opportunities for differentiation to enhance finEQUITY’s microcopy and overall messaging.
We compared the tone and content of each competitor’s website. The main categories we used for our analysis were unique value proposition, type and quality of content, voice and tone, readability and accessibility, and navigation.
Competitive analysis of four direct competitors
Based on our competitive analysis, we propose the following recommendations to enhance the content, voice, and tone of the FinEquity website:
Balance text-heavy pages with more visuals and infographics.
Adopt a tone that is professional and formal, while incorporating empathetic undertones.
Use inspiring, inclusive, and action-oriented language.
Enhance navigation and call-to-actions.
Integrate a mix of content, such as data visualizations and testimonials from participants.
Prioritize accessibility improvements to ensure inclusivity for all users.
Content strategy and solutions
Once we analyzed the competitors' websites, we started working on the Content Style Guide to standardize tone and voice and create clear guidelines for CTAs, headings, accessibility, and formatting for the new website.
As a team, we decided that the Content Style Guide was a living document. It will be updated in the future to reflect changes in brand identity. This guide served as a reference for writers, designers, and stakeholders, helping to maintain a unified voice across all digital content.
For the first draft, we have decided to include guidance for: Target Audience, Mission and Vision, Voice and Tone, Grammar, Web Elements, Inclusive Language, and Accessibility. Additionally, we added examples of preferred vs. non-preferred language to guide contributors in maintaining consistency.
Parts of the Content Style Guide with examples
Defining the brand voice and tone
Based on finEQUITY’s mission, we established a voice that is clear, educational, empowering, and supportive while ensuring the tone remains approachable and reassuring for justice-impacted individuals.
finEQUITY’s mission is to fight the economic hardships and financial struggles faced by families impacted by mass incarceration in the United States. finEQUITY wants to help those returning home and their families succeed and remain in their communities.
Developing the Content Style Guide
Here are the main points we included in it to ensure consistency, clarity, and accessibility:
• Standardized headings, CTAs, instructional text, and labels, ensuring they were action-driven and easy to understand.
• Incorporated best practices for plain language and a 5th-grade reading level, ensuring inclusivity for diverse audiences.
• Standardized sentence case usage for headings to improve readability and accessibility.
• Standardized date formats, number usage, bullet-point structure, and capitalization rules.
• Worked closely with UX researchers and stakeholders to ensure we avoided jargon and complex terms to reduce cognitive load for users.
At this stage of the design process, we translated initial research insights into low-fidelity wireframes to establish the core structure of the future website. Keeping the designs simple and focused on functionality, we prioritized layout, navigation, and key interactions to ensure we were following the created sitemap. These wireframes served as a blueprint for early feedback, allowing for quick iterations before moving into higher-fidelity designs.
Lo-fi wireframes of the four main pages
Microcopy enhancements
With the lo-fi wireframes in place, we had a solid foundation for the product’s structure and user flow. At this stage, I began refining the experience by incorporating microcopy to enhance clarity, usability, and engagement. Starting with key touchpoints, such as navigation labels and CTAs. I created copy docs to work on each page individually.
Copy docs for About Us page and Header & Footer
I worked on the copy to make it more accessible, which is why I rewrote it at a 5th-grade reading level. This ensured reentry citizens with low literacy could quickly understand key information without frustration.
Since many previously incarcerated participants may feel overwhelmed by financial reentry, I added emotional reassurance in key areas of the site.
For example: “We’re here to provide the tools and support you need to succeed.”
One of my goals was to create the action-driven copy. So I used short, direct labels and more engaging CTA buttons.
For example:
“Enter email address” instead of just “Email address”
"Improve credit score” instead of “Learn more”
I worked on making key information more visible and incorporating bullet points and lists to the copy.
Components highlighting key information
Usability testing is key! Each iteration of microcopy, shaped by real user insights, drives lasting impact!
Usability testing and findings
To validate our design decisions and ensure the redesigned website effectively met the needs of our target audiences, the UX Research team conducted usability testing. We developed key tasks aligned with real user goals, such as navigating the site to find reentry services, identifying the costs of the program, and understanding how trustworthy, legitimate, and safe does finEQUITY seem to users.
During successfully conducted 7 moderated usability sessions, we observed user interactions, identified friction points, and gathered qualitative feedback on clarity, navigation, and overall experience.
Since during the project, I collaborated closely with cross-functional teams, I was able to incorporate some user feedback immediately after the UX Research team conducted usability testing.
One major change was rewriting the copy across several pages to communicate that finEQUITY’s services are free.
UXR findings
High-fidelity wireframes
After gathering insights from usability testing and refining the microcopy, we moved into the high-fidelity wireframing stage to bring the final design vision to life. We focused on implementing key improvements based on user feedback. The microcopy was polished to ensure clarity and consistency. This stage allowed us to validate design decisions before moving into development, ensuring the website was both user-friendly and visually compelling.
To ensure a smooth handoff, we provided detailed annotations and design specifications for the development team, outlining interactions and content logic.
With the high-fidelity designs and detailed annotations in place, the development team brought the vision to life by building the final version of the website. Through close collaboration, we ensured that the implementation stayed true to the design, maintaining consistency in layout, interactions, and microcopy.
