MATCH4IMPACT

PROJECT TYPE:
UX/UI

LOCATION:

London, UK

DATE:
2025

ROLE:
Lead UX/UI Designer

LINK:

Project Figma File

This UX/UI case study outlines the research, design, and development process behind the creation of the app Match4Impact that aims to bridge the gap between volunteers and organisations by offering a more personalised, efficient, and rewarding.

Welcome to MATCH4IMPACT

Where volunteering & causes align:

Many existing volunteer platforms fail to cater to individual skill sets, availability, and interests. This leads to mismatched opportunities, lack of engagement, and an overall unsatisfying experience for volunteers.

Problem Statement:

“How might we allow volunteers to track their impact, while also making volunteering more rewarding and personalised?”

Goal:

Create personalised volunteer opportunities based on preferences and skills.
A seamless, clutter-free user experience with intuitive navigation.
Reward-based engagement with Impact Points, mentorship programs, and certifications.

Design Process

User Research & Insights

Conducted six user interviews to understand volunteer behaviours, motivations, and pain points.

Performed affinity mapping and empathy mapping to synthesise user insights.

Key Findings include:

Volunteers seek flexibility – fit within their schedules.

Personalisation is essential – opportunities aligned with their interests and skills.
Recognition matters – certificates, badges, and leaderboards encourage continued engagement.

Pain points include:
Unclear event details and expectations.
Poor communication with organisers.
Limited filtering options for relevant opportunities.
Lack of structured tracking for volunteer progress.

Wireframing & Prototyping

Did a competitive analysis for other applications to see where they fall short.

Developed an Information Architecture and User Flow with the focus on "Lula"- The Enthusaist.

Developed low-fidelity wireframes to outline the core experience.

Iterated designs based on user feedback to improve impact and reward recognition accuracy and readability.

Created an interactive high-fidelity prototype using Figma.

User Testing & Refinement

Conducted usability tests with 20 diverse participants to evaluate the app’s interface, navigation, and overall user experience.

Majority of users found the app easy to navigate.
Implemented feedback to refine UI clarity and enhance notification preferences.

Added resources for users to learn more about organisations.

Key Findings & Takeaways

User research is critical in identifying pain points and guiding design decisions.

Iterative design and testing improve usability and enhance the overall user experience.

Personalisation and engagement strategies are key to retaining volunteers.

Further refine filtering options and add AI-powered recommendations.

Enhance gamification features to boost user participation.

Expand usability testing with a larger user base before launch.

User Persona

Lula - The Enthusiast

Age: 24

Occupation: Graphic Designer

Location: London, UK

Pain Point:

Struggles to find short-term, flexible opportunities!

“I want to use my skills to help others, and get exposure and recognition, but finding the right opportunity is tough and time consuming.”

What She Needs:

Personalised recommendations and easy scheduling tools.
A filtering system to find relevant opportunities.
In-app messaging, and in-person volunteering options.

Flo – "The Newbie"

Age: 21

Occupation: Student

Pain Point: Struggles to find short-term, flexible opportunities.

Solution: Personalised recommendations and easy scheduling tools.

Mike – "The Passionate Tech"

Age: 33

Occupation: Tech Teacher

Pain Point: Wants to use coding skills for social good but struggles to find targeted opportunities.

Solution: Skill-based matching and long-term engagement tracking.

Colour & Typography Style Guide

Blue Colour

Primary – #3377FF

This vibrant royal blue is excellent for creating a sense of trust, confidence, and reliability. It’s commonly used for its professional and calming tone.

Black
Colour

Primary – #000000

Represents elegance, sophistication, and power. Often used in luxury brands or minimalist interfaces.

Grey Colour

Secondary – #E9E9E9

Neutral and balanced, grey represents practicality, stability, and minimalism.

Blue Colour

Secondary – #85ADFF

Conveys calmness, clarity, and friendliness. Ideal for health, wellness, or educational apps.

Aa
Poppins

Large Text
- Font Size: 20 px
- Line Height: 28 px
- Weights: Bold, Regular

Medium Text
- Font Size: 18 px
- Line Height: 25.2 px
- Weights: Bold, Regular

Normal Text
- Font Size: 16 px
- Line Height: 22.4 px
- Weights: Bold, Regular

Small Text
- Font Size: 14 px
- Line Height: 19.6 px

Logo Design

Designed the logo by integrating the number 4 with a hand symbol to represent human connection and support, while embedding a heart motif to emphasise compassion and purpose-driven volunteering.

The fusion of these elements visually communicated the app’s mission: connecting people with causes that matter.