UX Case Study

Angeles de Medellín

UX Research Information Architecture UI Design Prototyping Responsive Web

Challenges

The Angeles de Medellín Foundation’s website was built on a basic template with poor navigation, unclear information hierarchy, and no mobile optimization. These issues made it difficult for users primarily potential donors, volunteers, and community members to donate, volunteer, or learn about the organization, directly limiting engagement and community support (meaning financial contributions, volunteer participation, and overall involvement with the foundation’s mission).

Objectives & Goals

This redesign project began when the Angeles de Medellín Foundation requested an updated website to better communicate their mission and encourage community involvement. As part of a college capstone project, a group of us were assigned to lead the redesign effort.

Our main goals were to:

Redesign the website to improve overall usability and accessibility, ensuring that people of all ages and abilities can easily navigate and engage with the site. These aspects were identified as essential to creating a more inclusive and effective user experience.
Simplify navigation and content structure so users can quickly find key actions such as donating, volunteering, or learning about the foundation.
Develop a visually engaging, up-to-date, and responsive website that reflects current web design standards and provides a seamless experience across devices, including mobile, tablet, and desktop

Description of GIF — The original ADM website offered little guidance for users with no clear calls to action, minimal transparency on how donations were used, and external redirects that interrupted key user goals: donating, volunteering, and learning about the organization.

Our Process

Discover

Conducted a heuristic evaluation and task-based walkthroughs to identify usability pain points.

Define

Analyzed insights from similar nonprofit sites to benchmark best practices and prioritize requirements.

Ideate

Sketched wireframes and created multiple visual iterations exploring different layouts and CTAs.

Design

Created and prototyped responsive pages in Figma for testing and user feedback.

Discover & Define

To understand the foundation’s existing website and identify improvement areas, I conducted a heuristic evaluation and task-based walkthroughs with four participants representing different age groups and tech familiarity levels. These methods helped uncover usability issues that directly affected engagement and trust.

Key Insights:

Navigation Confusion: 3 of 4 users struggled to find Donate or Volunteer (avg. task time 45+ seconds).
Weak Information Hierarchy: Important actions blended with general content.
Visual Inconsistency: Mixed fonts, colors, and button styles lowered credibility.
Mobile & Accessibility Gaps: Layouts didn’t scale on small screens; several pages failed basic WCAG 2.1 checks.

Key Takeaways:

Keep navigation simple with ≤ 5 main categories.
Make Donate and Get Involved highly visible.
Use impactful visuals and concise storytelling to build connection.
Apply consistent typography, color, and button styles.
Design mobile-first and ensure accessibility compliance (WCAG 2.1 AA).

These insights shaped the redesign strategy. Prioritizing clarity, inclusivity, and a trustworthy digital presence aligned with current web standards.

Sketches

Outcome

The redesign was built using Next.js and Tailwind CSS, ensuring performance, scalability, and responsiveness across devices.

We conducted two rounds of user testing with 6 participants representing a mix of ages and tech familiarity. Success was evaluated by task completion rates, time on key actions (Donate, Volunteer), and overall satisfaction ratings.

Key Results & Feedback

Navigation & Clarity: 100% of participants completed core tasks without assistance.
Storytelling & Engagement: Users noted that the site “feels more welcoming and easier to understand” and “makes it clear how to get involved.”
Accessibility: Participants appreciated larger buttons, clear labels, and readable text on mobile.

Lesson Learned

Iterating based on real user feedback highlighted the importance of testing early and often, even with a small group, to catch usability and accessibility issues before full-scale development. Stakeholder feedback confirmed that the new site better communicates the foundation’s mission and effectively encourages donations and volunteer sign-ups.