A design challenge
Timeline: Five weeks

Tools: Figma, Sketch, Illustrator, Principle

Client: City Government

Roles: UI Designer, UX Designer, Project Manager


The Problem

Studies suggest that volunteerism is on the decline, although most Americans agree that they care about giving back to their community.

Our Challenge

The challenge for my team was to design an app that would enable and excite users to microvolunteer and recruit others too as well. Our designs built off the work from a previous UX team.


Domain Research

The previous UX team provided wireframes for a gamified, microvolunteering app. We wanted to research gamification techniques and the idea of microvolunteering in order to understand our problem space. Below is a summary of our findings.

Why Microvolunteering?

Social Programs are shrinking leaving new gaps for charities to fill. New volunteering strategies can help fill the need.
One issue was potential volunteers not hearing back from coordinators. Microvolunteering can increase volunteerism without creating an additional burden on coordinators.
With the right approach, microvolunteering can provide community connections between groups that might not normally have access to one another.

Why Gamification?

If done correctly gamification would mean the designers are assisting users to do volunteer work by putting it into manageable chunks and showing the user their progress.
There is a large body of models and research in game design to help  create meaningful fun and engagement. If applied thoughtfully it could enhance the user experience.

Competitive Analysis

We looked at three direct and three indirect competitors to determine how to best set  Voluntopia apart and what successful patterns could be adopted.

Direct Competitors

Indirect Competitors

Upon analyzing the competitors we noticed three axes of comparison that emerged: focus on the individual or community, profession versus playfulness, and the extent of gamification in the app.

Upon looking at the competitive landscape, we determined that it would be best to position Voluntopia as a playful, community-focused app that employs gamification techniques throughout.

Design Principles

My team and I created five principles to guide our visual designs for Voluntopia. These principles resulted from the domain research and competitive analysis.

Help the User Choose

Use color, size, and proximity to distinguish options for the user. Use a system of visual tags to help users quickly sort choices.

Explain with Visuals

Use informative pictures to clarify or replace instructions whenever possible.

Show User Progress

Use easy to digest visual tracking methods for users to see their progress.

Engage Through Fun

Use animations, illustrations, and play to create moments of delight wherever possible and appropriate.

Show the Community

Incorporate visuals and language that illustrate a larger community whenever possible and appropriate.

Design Explorations

I created three style tiles in order to test different possible directions our design could take.

The first style tile emphasizes the playful and kind aspects of Voluntopia through the use of rounded edges, soft greens, and cartoon influences. Here users feel that volunteering can be fun and easy.
The second style tile uses bright purples and paint splatters to convey a sense of energy and excitement. The painting elements give it a personal touch.
This style tile uses lots of white space and organized imagery of a city plan to give users a sense that Voluntopia provides a trusted clarity and organization of volunteer opportunities.

I tested user responses to the different style directions using methods from Microsoft’s Desirability Toolkit. The testing process involved adjective matching, which my team then organized according to whether the adjectives were positive or negative and whether they aligned with the Voluntopia design principles. The results can be seen below.

User Responses

The first style tile tested the best across all the categories so it was used going forward as a guide for the high fidelity designs. In this test, users selected adjectives from a pool that they felt fit the style tile. The adjectives had been predetermined by us as being positive, negative, or neutral. Also, some of the adjectves were flagged as “targeted,” meaning we felt they fit Voluntopia’s design principles.
User Impressions
Targeted Adjective Match
Positive Adjective Match
Negative Adjective Match
Friendly and fun
Clean and accessible
Energetic but busy
Fun but stressful

Initial Designs and Discoveries

Before creating mockups, we began with a critical evaluation of the wireframes given to us from the UX team. We conducted a round of user tests on the wireframes to validate the gamification concepts and confirm the usability of the microvolunteering activity flow. Our user testing uncovered two key issues:

Wireframe Issues

Confusion Over the App’s Purpose

Users generally reacted to the onboarding screens by saying that they would not read them and would instead skip through them quickly. Even for the users who read the onboarding screens there seemed to be some confusion over the gamification of the app. We addressed this issue by refining the language on the onboarding screens and trying to make them as succinct as possible.

Microvolunteering Activity Difficulty

The original microvolunteering activity consisted of having a user answer only one question to determine if an entire building is wheelchair accessible or not. Users responded by saying that they did not know how to assess an entire building. We improved the activity by breaking it down to a series of more simple and straightforward questions taken from the ADA guidelines.

Visual Explorations

After the usability issues were improved and the visual direction established, I iterated on the finer points of the visual designs in order to best achieve the design goals.

Color palette refinement

The initial designs of the activity cards made use of a lot of colors from the Voluntopia city illustration. The result was busy and not as cohesive.

Map Illustration

Users responded positively to the illustrated map that they could move around, but the illustration was sometimes reading as a little bland. I iterated on the illustration by adding more elements, but it was then a bit too much. The final iteration struck a balance so it feels interesting but not too busy.

Microvolunteering Questions

Iterations on the Volunteering questions dealt mainly with the clarity of the answer buttons. Coloring the buttons according to their answer was misleading since users felt a green “Yes” was always a positive response. Additionally, too many color variants was visually distracting.

Final Solution

The final designs tried to emphasize the fun and gamifiied aspects of Voluntopia through the prominent incorporation of illustration. For the microvolunteering activity, the primary focus was on making the task clear, succinct, and meaningful.

Key Screens

Illustrations and animations are used to show the fun and gamified nature of Voluntopia. The map can be moved by the users and serves as a main navigation screen.

Instructions are kept minimal but clear. The goal is for users to be able to understand how to use the app quickly and easily.

The microvolunteering activity consists of straightforward questions that users can answer without expert knowledge. The activity is designed to file potential issues with the ADA so users can make an impact.


A prototype was created using Figma and Principle as a tool for user testing and as documentation of some of the intended animations. Feel free to try it the prototype by clicking the button below!

*Note: if the images are not loading for you in the prototype try opening it in an incognito window or clearing your cache. (This is a known bug in Figma.)

The following video shows a walk through of the main user flow from first opening the app to completing one microvolunteering activity.

Try the Prototype


A majority of users responded positively to the purpose of the app as well as the look and feel. Many users felt that they would use the app in place of many phone games, but would feel good about providing a service to the community.

"I would feel better about wasting time on my phone.”
- Leah, User Tester

Users responded positively to the aesthetics of the app as well.

“There’s a good range of colors that make it fun and exciting without being too busy.”
-Kate, User Tester

In general, the idea of gamifiying the progress through improving the Voluntopia city was motivating to users.

“It definitely would keep me coming back if I knew had to an improve this area, and I could compare with my friends.”
-Leah, User Tester

I think one of the biggest lessons I learned during this project was about scope creep. There were so many exciting opportunities to have grand ideas about lots of illustrations, animations, and gamification in addition to the ideas about how to make the app most effective at helping the community. I feel good that ultimately as a team we were able to cut down to the most essential components of the app: introducing the map concept and creating a viable volunteer activity flow. It would have been easy to get swept up in the gamified aspects of the app and neglect the user feedback about the volunteer activity being too difficult. Our final solution was a drastic improvement to the original, but with hindsight, I would say that we could have prioritized the volunteer activity flow earlier and saved ourselves time.


Next Steps

Microvolunteering Activity Improvement

The microvolunteering activity of assessing handicap accessibility issues for a building could be expanded to include questions about the interior of the building. Questions could also be sorted according to type.

More Microvolunteering Activities

The purpose of the app is to have a repository of many microvolunteering activities. A critical next step for the project is to concept and design some more options.

Game Testing

The gamified parts of Voluntopia need to be tested further. Determining exactly how much effort is optimally required for a user to level up is one key example of the type of game testing to be done.


The scope of this project did not include designing a logo or establishing brand attributes. Creating a logo and including it's specifications in the style guide is a crucial next step.

People in Illustrations

During testing, users responded positively to the inclusion of people in some variations of the map illustrations. Due to this positive reaction and the design principle of showing the community, it is recommended that some illustrations of people be incorporated.

Back to Top