Introduction

Background

We designed a smartphone app called Volunteerly to make it easier for people to find local volunteer activities that fit their schedules, interests, and skill set. It can be difficult to locate worthwhile opportunities in the disconnected ecosystem of volunteer platforms available today. In order to address this issue through a human-centered design approach, our team, consisting of Nuzhat Tabassum Nawshin (me), Jenna Kraus, Zenghui Wang, and Ayesh Chandrasekera started this project during LIS 470: Interaction Studio in Fall 2024.

Disclaimer

This project was a group effort conducted as part of an academic course. All design artifacts and solutions reflect the collaborative contributions of our team.

My Role

As a core team member, I actively contributed to every stage of the design process, including contextual inquiry, affinity diagramming, ideation, storyboarding, sketching, wireframing, prototyping, and final presentations. Specifically, I focused on synthesizing insights from users into actionable solutions and designing the interactice mockups.

Overview of Design Process

The final project was completed over 8 weeks of part-time effort, with weekly assignments covering one design stage per week, alongside other coursework. Our process followed the design thinking framework, moving through the phases of empathize, define, ideate, prototype, and test. This case study will narrate our journey, sharing the tools and methods we used, key design decisions, and the outcomes that shaped our final product.

Empathize: Gathering Insights

Research Objective

Our goal was to understand the barriers individuals face when searching for volunteering opportunities and to uncover the features that would make this process more engaging and efficient.

Methodology

We conducted contextual inquiries with eight participants (university students from different backgrounds, age range between 20-30 years old) who are interested in volunteering for different causes. Through interviews and observations, we captured insights about their behaviors, challenges, and preferences. For example, users

Define: Distilling the Problem

Themes Identified

We made an affinity diagram to distill the five primary themes that emerged from our contextual inquiry:

1. Lack of personalization and relevant filtering options

2. Time and location preferences

3. Unclear role descriptions and expectations

4. Navigation and ease of use

5. User engagement and impact reflection

Problem Statement

New and existing community members seeking meaningful volunteer work need a user-friendly, personalized platform that provides clear role descriptions, flexible scheduling options, and opportunities to connect with others.

User Needs

Using a needs statement format, we identified key user needs:

1. Users need a centralized platform to find volunteering opportunities by specific skills, interests, and values to find relevant roles

2. Users need a way to search for opportunities by time and location

3. Users need a platform with clear, detailed role descriptions

4. Users need an intuitive and efficient navigation system

5. Users need to share volunteering opportunities and to feel connected to their community

Ideate: Generating Solutions

Brainstorming

Our team permorfed a brainstorming session during the Studio session where we generated over 30 ideas using the "How might we..." prompt.

How might we make it easier for users to find local volunteer opportunities?

We narrowed our ideas down to three core solutions:

1. Simplifying connections to opportunities and communities

2. Using geolocation for nearby opportunities

3. Consolidating volunteer listings on a single platform

Sketching

Each team member took one of the generated ideas and created three distinct sketches to explore different ways to develop the concept further. After presenting our designs to the group, we critiqued one another’s work and integrated the feedback into a final sketch for each idea. Here is a summary of our contributions:

Idea 1: Simplifying connections to opportunities and communities

Final Design: Combined the step-by-step selection flow with a map-based interface with clear dividers for readability

Idea 2: Utilizing geographical location to find opportunities nearby

Final Design: Included a results page showing opportunities near the user and an opportunity details page emphasizing walking/driving distances and adding a description section

Idea 3: Organizing opportunities into a singular platform

Final Design: Covered a 'Me' page, a 'Search' page, and an 'Organization' page with enhanced navigation by incorporating a four-part navigation bar and back buttons for improved usability

Storyboarding & Paper Prototyping

Building on the sketches, each team member created a storyboard to demonstrate how users would interact with the proposed designs in real-life scenarios. These storyboards depicted user flows and highlighted key moments in the interaction process.

Storyboards:

Idea 1: Explored how a user selects preferences, waits for results, and invites a friend to join

Idea 2: Illustrated the use of geolocation to find opportunities, emphasizing accessibility

Idea 3: Focused on the integration of filtering mechanisms and the detailed presentation of organizations

Paper Prototypes:

We each came up with our own paper prototypes and tested them with one person each. Then we collaborated on creating paper prototypes for the selected design ideas. These prototypes included:

Login and registration flows

Map-based search interfaces

Event details and feedback screens

Insights:

We identified areas for improvement, such as clarifying button placement and enhancing information hierarchy. These insights directly informed our next phase of work.

Wireframing

Following the paper prototyping phase, we transitioned to digital wireframes. Using Figma, the team collaboratively developed low-fidelity wireframes to refine the layout and structure of key screens:

Key Screens Developed:

Landing page: Welcoming user to the app

Registration page: Users start by registering entering basic information, with clear validation steps to enhance personalization

Map page: Features map-based search options for browsing nearby opportunities

Event page: Highlights key information such as event time, location, organizer details, and registration options

Profile page: Allows users to manage personal information, view saved opportunities, and adjust preferences

Insights:

We found the need for coming up with a consistent layout design, color palette, button designs, adding more screens in-between screens for improved navigation flow and adding back buttons for easier movement between screens for the interactive mockups.

Prototyping

Design Decisions:

To ensure a cohesive and intuitive interface, we made several key design decisions before creating the high-fidelity mockups. We found a logo for the app and chose a name that indicates the app's purpose but is also welcoming enough. We chose a color palette that we all felt was soothing and energizing at the same time, having our braod range of target users in mind. The fonts were selected focuing on readability, with sans-serif fonts used consistently across all screens.

High-fidelity Mockup Designing:

Using Figma, we transformed the wireframes into high-fidelity mockups, ensuring a polished and interactive user experience. Key steps included:

Creating a basic layout for main screens

Adding interactions and transitions for a seamless navigation experience

Developing in-between screens to enhance the flow between major actions (e.g., confirmation pages, loading screens)

Restructuring information across screens to improve accessibility and clarity

Key Iterations:

Using Figma, we transformed the wireframes into high-fidelity mockups, ensuring a polished and interactive user experience. Key steps included:

Navigation Enhancements: Integrated a persistent navigation bar and back buttons for consistency

Layout Adjustments: Reorganized content on the Event Details Page to prioritize crucial information, such as event time and organizer details

Interaction Design: Added hover states, animations, and transitions to make the app more engaging

Next Steps

While we think the Volunteerly project currently addresses the basic user needs, there are several areas for future exploration and development:

Conduct formal user test with a diverse group of users to validate design decisions and identify potential pain points with the current design

Developing a working prototype, repeating user test and polishing the final design

Enhance accessibility and user comfort by providing customization options such as- dark mode and allowing users to change design elements like background color, map layer, font, audio option, etc for better accessibility

Integrate advanced filterong mechanisms, such as recurring event options and skill-based searches, to accommodate diverse user preferences.

Add collaborating functionalities for group volunteering, event discussions and posting feedback within the app to foster a sense of community

Enable integration with external platforms such as- popular calendar apps and social media platforms for easier event scheduling and sharing

What Was Learned

About users: Volunteering decisions are often motivated by a sense of community and ease of access
About the design process: Iterative testing and feedback is invaluable for refining navigation and features
About myself: I got two major gains from this project: gained confidence in translating user insights into actionable designs, and learned to use Figma and improved my prototyping skills

Conclusion

Volunteerly was a collaborative exploration of user-centered design principles, culminating in a functional and engaging prototype that addresses key challenges faced by volunteers. This project significantly expanded my understanding of interaction and UX design by strengthening my foundational knowledge of design thinking processes and terminology while providing an opportunity to learn an industry-standard tool, Figma. The course and this project marked a transformative milestone in my journey as a budding UX designer.