top of page
Mobile mock 1.jpg

Compassion Connection

Project Type: UX/UI (Mobile App and Responsive Website) 
client: Fictional (Online Course)
role: Graphic Designer
tools used: Figma, Adobe Illustrator
figma-icon.png
adobe-illustrator-icon.png

Description

This project was part of the UX Design Google Certificate program on Coursera. The objective was to design a mobile app and responsive website that connect people with volunteer opportunities in a simple, engaging, and efficient way. I named the product Compassion Connection to reflect its mission of promoting community involvement and social good. Acting as the UX/UI Designer, I handled all aspects of the design process, including user research, wireframing, prototyping, testing, and final mockups. The goal was to eliminate the frustrations and time-consuming nature of searching and registering for volunteer opportunities by offering a centralized platform with a streamlined user experience.

Process

The design process began with in-depth research to understand the target user—people passionate about volunteering but often discouraged by the fragmented process of finding and applying for opportunities. I conducted an online survey using Survey Planet to collect insights on user pain points and motivations, gathering responses from 25 participants. I also compiled secondary research to outline the typical demographics, behavior patterns, and motivations of volunteers. Using this data, I defined user personas, created empathy maps, and mapped out a comprehensive user journey, identifying critical touchpoints and potential improvements. For the design phase, I started with paper wireframes to quickly generate layout ideas before transitioning to low-fidelity prototypes in Figma. I tested these prototypes through usability studies to identify friction points in the user flow, then iterated based on feedback. My design focused on solving core pain points: centralized volunteer listings, a streamlined application process, and clear impact tracking through a "Achievements" section. I also built out a responsive website design for tablet screens to expand accessibility. After a second round of usability testing, I refined the high-fidelity prototypes and created final mockups to showcase the completed design.

Reflection

This project was an invaluable experience in applying the full UX/UI design process to a meaningful social cause. It deepened my understanding of user-centered design and the importance of empathy in crafting digital experiences. I learned how to streamline complex user journeys, create effective wireframes, and iterate based on real user feedback. Compassion Connection not only taught me the technical skills of prototyping and testing but also reinforced the impact well-designed interfaces can have in driving community engagement and social good.

tablet mock 3 comp.jpg
tablet mock 4.jpg
mobile mock 8.jpg
mobile mock 5 comp.jpg
bottom of page