J

Jozz Gomez

Work

About

Linkedin

J

Jozz Gomez

Work

About

Linkedin

J

Work

About

Linkedin

WORK

Empowering Giving: Mi Valedor's
New Donation Experience

Empowering Giving: Mi Valedor's
New Donation Experience

WORKFLOW

Market Research

Research Interviews

User Personas & User Flows

Design

Iterative Process

TEAM

Jozz Gomez

Deborah Howell (Mentor)

TIME

2024

8 weeks

SECTOR

NGO

Jump to Final UI

Overview

Mi Valedor is a social initiative in Mexico City that supports vulnerable communities through cultural projects and relies heavily on donations to sustain its work. While their offline presence felt vibrant and community-driven, the online donation flow lacked clarity, trust signals, and accessibility, creating friction at a critical touchpoint for revenue.

Overview

Mi Valedor is a social initiative in Mexico City that supports vulnerable communities through cultural projects and relies heavily on donations to sustain its work. While their offline presence felt vibrant and community-driven, the online donation flow lacked clarity, trust signals, and accessibility, creating friction at a critical touchpoint for revenue.

Overview

Mi Valedor is a social initiative in Mexico City that supports vulnerable communities through cultural projects and relies heavily on donations to sustain its work. While their offline presence felt vibrant and community-driven, the online donation flow lacked clarity, trust signals, and accessibility, creating friction at a critical touchpoint for revenue.

My Role

In this self-initiated project and as part of my UI specialization, I reimagined this experience, focusing on how a clearer, more transparent flow could better reflect the NGO’s mission and encourage giving. I led the research and design process: auditing the current flow, mapping pain points, and prototyping new solutions. With feedback from my mentor Deborah Howell, I refined the UX to highlight impact storytelling, reduce cognitive load, and build donor confidence.

The resulting proposal demonstrates how design can bridge the gap between mission and digital execution, making giving more intuitive and meaningful.

My Role

In this self-initiated project and as part of my UI specialization, I reimagined this experience, focusing on how a clearer, more transparent flow could better reflect the NGO’s mission and encourage giving. I led the research and design process: auditing the current flow, mapping pain points, and prototyping new solutions. With feedback from my mentor Deborah Howell, I refined the UX to highlight impact storytelling, reduce cognitive load, and build donor confidence.

The resulting proposal demonstrates how design can bridge the gap between mission and digital execution, making giving more intuitive and meaningful.

My Role

In this self-initiated project and as part of my UI specialization, I reimagined this experience, focusing on how a clearer, more transparent flow could better reflect the NGO’s mission and encourage giving. I led the research and design process: auditing the current flow, mapping pain points, and prototyping new solutions. With feedback from my mentor Deborah Howell, I refined the UX to highlight impact storytelling, reduce cognitive load, and build donor confidence.

The resulting proposal demonstrates how design can bridge the gap between mission and digital execution, making giving more intuitive and meaningful.

The Process

To ground the redesign in real user needs, I conducted six interviews with both Mexican and international participants aged 25–45. All participants had prior experience donating through digital-first platforms such as Kickstarter, Patreon, crowdfunding sites, and NGO websites, making them representative of Mi Valedor’s potential donor base.

From these conversations, I uncovered consistent themes:

  • Donors expect transparency on where their money goes, reassurance about payment security, and a frictionless mobile-first flow.

  • 80% of users mentioned that they are motivated to give when the story feels personal and the impact is clearly communicated.

These insights became the foundation for rethinking Mi Valedor’s donation experience with clarity, trust, and storytelling at its core.

The Process

To ground the redesign in real user needs, I conducted six interviews with both Mexican and international participants aged 25–45. All participants had prior experience donating through digital-first platforms such as Kickstarter, Patreon, crowdfunding sites, and NGO websites, making them representative of Mi Valedor’s potential donor base.

From these conversations, I uncovered consistent themes:

  • Donors expect transparency on where their money goes, reassurance about payment security, and a frictionless mobile-first flow.

  • 80% of users mentioned that they are motivated to give when the story feels personal and the impact is clearly communicated.

These insights became the foundation for rethinking Mi Valedor’s donation experience with clarity, trust, and storytelling at its core.

The Process

To ground the redesign in real user needs, I conducted six interviews with both Mexican and international participants aged 25–45. All participants had prior experience donating through digital-first platforms such as Kickstarter, Patreon, crowdfunding sites, and NGO websites, making them representative of Mi Valedor’s potential donor base.

From these conversations, I uncovered consistent themes:

  • Donors expect transparency on where their money goes, reassurance about payment security, and a frictionless mobile-first flow.

  • 80% of users mentioned that they are motivated to give when the story feels personal and the impact is clearly communicated.

These insights became the foundation for rethinking Mi Valedor’s donation experience with clarity, trust, and storytelling at its core.

Meet Luis and Natalia

Based on the research, I created two representative personas to guide design decisions.

Luis reflects the individual donor motivated by personal belief in causes. He values initiatives that show tangible change, with a strong vision and a seamless donation process. For him, speed, clarity, and ease of contribution are essential motivators.

Natalia represents the corporate decision-maker tasked with identifying reputable organizations for her company’s social responsibility efforts. She prioritizes trust, transparency, and clear evidence of impact. For her, credibility at first sight is critical to move forward with larger-scale donations.

These personas helped me balance the needs of everyday supporters with those of institutional donors, ensuring the redesign addressed both individual motivations and organizational trust requirements.

Meet Luis and Natalia

Based on the research, I created two representative personas to guide design decisions.

Luis reflects the individual donor motivated by personal belief in causes. He values initiatives that show tangible change, with a strong vision and a seamless donation process. For him, speed, clarity, and ease of contribution are essential motivators.

Natalia represents the corporate decision-maker tasked with identifying reputable organizations for her company’s social responsibility efforts. She prioritizes trust, transparency, and clear evidence of impact. For her, credibility at first sight is critical to move forward with larger-scale donations.

These personas helped me balance the needs of everyday supporters with those of institutional donors, ensuring the redesign addressed both individual motivations and organizational trust requirements.

Meet Luis and Natalia

Based on the research, I created two representative personas to guide design decisions.

Luis reflects the individual donor motivated by personal belief in causes. He values initiatives that show tangible change, with a strong vision and a seamless donation process. For him, speed, clarity, and ease of contribution are essential motivators.

Natalia represents the corporate decision-maker tasked with identifying reputable organizations for her company’s social responsibility efforts. She prioritizes trust, transparency, and clear evidence of impact. For her, credibility at first sight is critical to move forward with larger-scale donations.

These personas helped me balance the needs of everyday supporters with those of institutional donors, ensuring the redesign addressed both individual motivations and organizational trust requirements.

User Flows

By mapping the user flows for Luis and Natalia, I was able to clearly visualize how each persona would interact with the donation process. This step helped me identify potential friction points and design smoother, more intuitive paths for completing their key tasks.

User Flows

By mapping the user flows for Luis and Natalia, I was able to clearly visualize how each persona would interact with the donation process. This step helped me identify potential friction points and design smoother, more intuitive paths for completing their key tasks.

User Flows

By mapping the user flows for Luis and Natalia, I was able to clearly visualize how each persona would interact with the donation process. This step helped me identify potential friction points and design smoother, more intuitive paths for completing their key tasks.

Design Strategy & Iteration

My design process moved from ideation to validation, ensuring each decision aligned with user needs and business goals. I began with sketches, user flow drafts, and low-fidelity wireframes, which helped me test structural concepts early and iterate quickly before investing in detail.

Design Strategy & Iteration

My design process moved from ideation to validation, ensuring each decision aligned with user needs and business goals. I began with sketches, user flow drafts, and low-fidelity wireframes, which helped me test structural concepts early and iterate quickly before investing in detail.

Design Strategy & Iteration

My design process moved from ideation to validation, ensuring each decision aligned with user needs and business goals. I began with sketches, user flow drafts, and low-fidelity wireframes, which helped me test structural concepts early and iterate quickly before investing in detail.

FIRST APPROACH

For the first design iteration, I translated research insights into low-fidelity sketches to define the core structure of the experience. My focus was on simplifying the donation journey and improving clarity between key choices. For example, I reduced the number of action buttons and created a clearer distinction between monthly vs. one-time donations, addressing users’ need for transparency and speed while supporting the NGO’s recurring-donation goals.

Beyond the flow itself, I explored how the site could better reflect Mi Valedor’s mission and build trust. The homepage concept prioritized storytelling, using cards to make ongoing projects, events, and campaigns more legible at a glance. I also drafted an account dashboard where users could sign in, review past contributions, and access receipts, features aimed at reinforcing trust and encouraging long-term engagement.

MID-FIDELITY

I began with the mobile experience to ensure a strong foundation for scalability, exploring different ways to structure the homepage and donation flow. A key challenge was deciding what users should see first to build trust without overwhelming them. After testing variations, I prioritized a clear hero CTA to donate, followed by an “About Us” overview and a preview of current initiatives. This helped me balance credibility with action.

For the donation screens, I iterated on hierarchy, button styles, and input placement to make the process as seamless as possible. Payment forms were kept familiar to reduce friction and speed up completion. These prototypes allowed me to validate that users could move through the flow with clarity and confidence.

COLOR AND VISUAL EXPLORATION

To ensure the redesign stayed true to Mi Valedor’s identity while modernizing the experience, I explored two distinct moodboards.

Moodboard A paid tribute to the NGO’s original branding, keeping red as its emblematic color but adding pink and yellow accents to celebrate the artistic nature of the project. The references included engravings by José Guadalupe Posada -honoring Mexico’s revolutionary-era printmaking- and Orozco’s volcanoes, symbolizing strength and resilience.

Moodboard B took a different approach, aligning more closely with visual trends in donation platforms. I explored a fresh palette of lime green, orange, and dark brown, representing renewal, hope, and growth. The moodboard drew inspiration from recognizable donation brands like GoFundMe and Kickstarter. Typography was bold and modern, designed to give the impression of a determined, action-oriented project.

In the end, I selected Moodboard A for the final design. Red’s association with Mi Valedor was a key trust signal for returning donors, and maintaining that connection felt essential. Rather than radically changing the palette, I decided I would incorporate storytelling element through photos of valedores, their workshops, and magazine projects.

MOODBOARD B

MOODBOARD A

Style Guide

I created a style guide that respected Mi Valedor’s original brand identity while elevating its digital presence for clarity and consistency.

The logo remained untouched to preserve brand recognition, but I developed two new variations for flexible applications across the site and social channels.

The final color palette was derived from Moodboard A, refined to one primary color and two complementary colors. This decision created a cleaner, more cohesive look while keeping the vibrancy and creativity that defines Mi Valedor.

For typography, I initially explored handwritten headers to express the crafty, editorial spirit of the project. However, usability tests revealed legibility issues, leading me to select a modern sans-serif typeface that improved readability without sacrificing character.

To complete the system, I built an icon set using a Figma library, selecting clean, intuitive icons that improved navigation and reinforced a sense of clarity throughout the experience.

Style Guide

I created a style guide that respected Mi Valedor’s original brand identity while elevating its digital presence for clarity and consistency.

The logo remained untouched to preserve brand recognition, but I developed two new variations for flexible applications across the site and social channels.

The final color palette was derived from Moodboard A, refined to one primary color and two complementary colors. This decision created a cleaner, more cohesive look while keeping the vibrancy and creativity that defines Mi Valedor.

For typography, I initially explored handwritten headers to express the crafty, editorial spirit of the project. However, usability tests revealed legibility issues, leading me to select a modern sans-serif typeface that improved readability without sacrificing character.

To complete the system, I built an icon set using a Figma library, selecting clean, intuitive icons that improved navigation and reinforced a sense of clarity throughout the experience.

Style Guide

I created a style guide that respected Mi Valedor’s original brand identity while elevating its digital presence for clarity and consistency.

The logo remained untouched to preserve brand recognition, but I developed two new variations for flexible applications across the site and social channels.

The final color palette was derived from Moodboard A, refined to one primary color and two complementary colors. This decision created a cleaner, more cohesive look while keeping the vibrancy and creativity that defines Mi Valedor.

For typography, I initially explored handwritten headers to express the crafty, editorial spirit of the project. However, usability tests revealed legibility issues, leading me to select a modern sans-serif typeface that improved readability without sacrificing character.

To complete the system, I built an icon set using a Figma library, selecting clean, intuitive icons that improved navigation and reinforced a sense of clarity throughout the experience.

Final UI

Homepage

Overlapping text and busy visuals on the original homepage made it difficult for users to quickly focus on key information. Redesigning this screen became essential to create a smoother, more welcoming first impression for potential donors.

The new layout prioritizes clarity and storytelling: it opens with a bold visual and concise mission statement, followed by a clear call-to-action to donate. Below, dedicated sections highlight ongoing initiatives and the team behind the project, turning the homepage into a trust-building moment that invites deeper engagement.

A key decision was to use Mi Valedor’s own photo archive rather than stock images, showcasing valedores in their real environments and creating a stronger emotional connection.

Visually, I introduced a clean layout with pink accents to guide attention and reserved red exclusively for key actions, reinforcing its role as a donation signal.

Homepage

Overlapping text and busy visuals on the original homepage made it difficult for users to quickly focus on key information. Redesigning this screen became essential to create a smoother, more welcoming first impression for potential donors.

The new layout prioritizes clarity and storytelling: it opens with a bold visual and concise mission statement, followed by a clear call-to-action to donate. Below, dedicated sections highlight ongoing initiatives and the team behind the project, turning the homepage into a trust-building moment that invites deeper engagement.

A key decision was to use Mi Valedor’s own photo archive rather than stock images, showcasing valedores in their real environments and creating a stronger emotional connection.

Visually, I introduced a clean layout with pink accents to guide attention and reserved red exclusively for key actions, reinforcing its role as a donation signal.

Homepage

Overlapping text and busy visuals on the original homepage made it difficult for users to quickly focus on key information. Redesigning this screen became essential to create a smoother, more welcoming first impression for potential donors.

The new layout prioritizes clarity and storytelling: it opens with a bold visual and concise mission statement, followed by a clear call-to-action to donate. Below, dedicated sections highlight ongoing initiatives and the team behind the project, turning the homepage into a trust-building moment that invites deeper engagement.

A key decision was to use Mi Valedor’s own photo archive rather than stock images, showcasing valedores in their real environments and creating a stronger emotional connection.

Visually, I introduced a clean layout with pink accents to guide attention and reserved red exclusively for key actions, reinforcing its role as a donation signal.

Donation Flow

In the original design, the donation flow missed key trust-building elements and included confusing UI patterns (such as buttons that didn’t function as expected), creating friction at a critical conversion point.

In the redesign, I adopted a clearer structure inspired by successful donation platforms, presenting straightforward steps, transparent messaging about where contributions go, and a breakdown of payment details to reassure donors.

To make giving easier, I added three preset donation amounts plus a custom option, reducing decision fatigue while still allowing flexibility. For corporate users like Natalia, I designed the ability to view invoices and download receipts, supporting compliance and encouraging repeat contributions.

Donation Flow

In the original design, the donation flow missed key trust-building elements and included confusing UI patterns (such as buttons that didn’t function as expected), creating friction at a critical conversion point.

In the redesign, I adopted a clearer structure inspired by successful donation platforms, presenting straightforward steps, transparent messaging about where contributions go, and a breakdown of payment details to reassure donors.

To make giving easier, I added three preset donation amounts plus a custom option, reducing decision fatigue while still allowing flexibility. For corporate users like Natalia, I designed the ability to view invoices and download receipts, supporting compliance and encouraging repeat contributions.

Donation Flow

In the original design, the donation flow missed key trust-building elements and included confusing UI patterns (such as buttons that didn’t function as expected), creating friction at a critical conversion point.

In the redesign, I adopted a clearer structure inspired by successful donation platforms, presenting straightforward steps, transparent messaging about where contributions go, and a breakdown of payment details to reassure donors.

To make giving easier, I added three preset donation amounts plus a custom option, reducing decision fatigue while still allowing flexibility. For corporate users like Natalia, I designed the ability to view invoices and download receipts, supporting compliance and encouraging repeat contributions.

My Donations

The original site offered no way for regular donors to access their past receipts or track their contributions, which limited transparency and made record-keeping difficult. The redesign introduces a secure profile section where users can sign in or create an account to view their full donation history.

To improve usability, I added sorting and filtering options, allowing donors to quickly locate specific receipts or contributions. This feature not only builds trust through transparency but also encourages recurring donations by giving users a sense of ownership over their impact.

My Donations

The original site offered no way for regular donors to access their past receipts or track their contributions, which limited transparency and made record-keeping difficult. The redesign introduces a secure profile section where users can sign in or create an account to view their full donation history.

To improve usability, I added sorting and filtering options, allowing donors to quickly locate specific receipts or contributions. This feature not only builds trust through transparency but also encourages recurring donations by giving users a sense of ownership over their impact.

My Donations

The original site offered no way for regular donors to access their past receipts or track their contributions, which limited transparency and made record-keeping difficult. The redesign introduces a secure profile section where users can sign in or create an account to view their full donation history.

To improve usability, I added sorting and filtering options, allowing donors to quickly locate specific receipts or contributions. This feature not only builds trust through transparency but also encourages recurring donations by giving users a sense of ownership over their impact.

Impact & Metrics

The redesign wasn’t just about improving visuals; it delivered measurable results. Through usability testing and feedback, the new experience proved to be clearer, faster, and more trustworthy for donors. These outcomes show how thoughtful UI decisions can directly impact user confidence and support Mi Valedor’s mission to drive recurring contributions.

Impact & Metrics

The redesign wasn’t just about improving visuals; it delivered measurable results. Through usability testing and feedback, the new experience proved to be clearer, faster, and more trustworthy for donors. These outcomes show how thoughtful UI decisions can directly impact user confidence and support Mi Valedor’s mission to drive recurring contributions.

Impact & Metrics

The redesign wasn’t just about improving visuals; it delivered measurable results. Through usability testing and feedback, the new experience proved to be clearer, faster, and more trustworthy for donors. These outcomes show how thoughtful UI decisions can directly impact user confidence and support Mi Valedor’s mission to drive recurring contributions.

90%

90%

Users reported that the redesign reduced friction, helped them locate key actions faster, and increased confidence.

25%

25%

Boost in user satisfaction from post-test surveys, with participants noting that the donation process felt “clear and professional.”

40%

40%

Improvement in time-to-understanding thanks to the homepage redesign, making Mi Valedor’s mission clear within seconds.

"I feel like I understand the project so much better now. Seeing the initiatives and their results makes me confident my donation is making a real difference."

Angela Estrada, Culture and Communications Manager

"I trust this site now; it feels professional and secure compared to before."

Nico Cohen, Account Representative

What's Next?

Redesigning Mi Valedor’s donation experience was a rewarding challenge that combined UX strategy, UI design, and trust-building for a social initiative. While the new flow significantly improved clarity and donor confidence, there’s still room to grow. Next, I would focus on scaling these results through:

What's Next?

Redesigning Mi Valedor’s donation experience was a rewarding challenge that combined UX strategy, UI design, and trust-building for a social initiative. While the new flow significantly improved clarity and donor confidence, there’s still room to grow. Next, I would focus on scaling these results through:

What's Next?

Redesigning Mi Valedor’s donation experience was a rewarding challenge that combined UX strategy, UI design, and trust-building for a social initiative. While the new flow significantly improved clarity and donor confidence, there’s still room to grow. Next, I would focus on scaling these results through:

Work

Re-use Hawaii

MONI

Mi Valedor

Mindful

Jozz Gomez

Work

About

Contact

Email

LinkedIn

Thanks!

Thanks so much for taking the time to view my portfolio.

Create a free website with Framer, the website builder loved by startups, designers and agencies.