Voluntopia

Gamifiying Volunteering

Timeframe

4 Weeks

Client

Chicago Volunteer Association

Responsibilities

UI Design, Interview Planning, Research, Usability Testing, Desirability Testing, Rapid Prototyping, Stakeholder Presentations

JUMP TO FINAL PRODUCT

Project Overview

I, along with 2 fellow UI designers, was tasked to finalize the visual design of a volunteering app from the groundwork laid by a DESIGNATION UX team. This mock application—fittingly named Voluntopia—would allow users to complete quick micro-volunteering opportunities on-demand to build their virtual city.

Ultimately, our goal was to create a product that allows time-strapped users the ability to volunteer and incentivize participation through gamification.

Our team conducted research & user interviews collectively, but each designer would each be responsible for creating and presenting their own designs for each sprint.

Introducing Jessica

Our provided persona was Jessica, a 20-year-old college student eager to volunteer but frustrated by the steps to get there. To fully immerse ourselves with Jessica and her frustrations, I wrote down her persona on an always-present whiteboard facing our team's desk to ensure every decision we made moving forward would serve Jessica, not ourselves. In the graphic below, you’ll see what we stared at for 2 consecutive weeks, and learn all about Jessica and her motivations and frustrations with the volunteer space.

Jessica Lane

20 year old college student

Motivations

  • Get better acquainted with her community.
  • Discovering new & fun social experiences.

Frustrations

  • Unable to find volunteer activities that accommodate with class & work schedules.
  • Unsure of her impact.

Wants

  • To feel like she’s making an impact.
  • To find well-run organizations.
"When I volunteer, I want to see the impact it has on my Community"

As we fully internalized Jessica's frustrations and motivations, we conducted a visual competitive analysis of the landscape. This allowed us to find effective patterns, opportunities for differentiation, and hone in on creating a product that Jessica would actually use.

The Competitive Landscape

To design the most compelling product, we studied not just in-category competitors but pulled from entire unrelated applications as well. Great design patterns are present throughout and casting this wide net was crucial in yielding the strongest insights.

We began with applications that provided micro-volunteering opportunities. Micro-volunteering is far from ubiquitous, and the lack of competitors confirmed this. The few applications that provided these opportunities often only supported one form of participation (often through fundraising or spreading awareness). The few applications applications that did present unique ways to volunteer only allowed to do so for a single organization.

Voluntopia was wholly unique in that it was a volunteer directory, sourced from numerous third-party organizations, that supports many ways to participate, allowing users to take photos to document wheelchair-accessible locations, volunteer for afterschool tutoring programs and anything in between.

We documented our analysis on a spreadsheet where we could quickly compare competitors to form insights. We summarized the major takeaways from each competitor in the slider below.

In Category Influences

Be My Eyes

Users accept calls from the visually impaired for assistance.

X

X Bland palette & UI elements did little to engage me.

Charity Miles

Users fundraise for their desired charity based on physical activity.

X

X Content cards looked unpolished & inconsistent.

X Unlabeled bottom navigation added ambiguity.

Elbi

By donating to charities to users earn credits that can be used to buy goods.

X

X Only allowing for horizontal scrolling felt restrictive.

Out of Category Influences

Apple

Fitness application that tracks physical activity.

Bold Color scheme gripped my attention.

Ring icons were informative, looked great, and made me want to take action.

Forest

Productivity app that grows a tree if users resist touching their phone.

Screens were explicitly clear in its purpose.

Illustration style looked fun & made me want to use the app.

Go Fund Me

Crowdsourced fundraising application.

Content was easy to skim and understand.

Card housing structure enhanced visuals.

With these best—and worst—design practices thoroughly examined, we created our design principles; foundational standards that every following design decision would strive to meet.

Design Principles

Be Delightful & Intuitive

Users should know how to use the application the very first time, and be delighted by the visuals & interactions that follow.

Unify Users Around a Goal

Get users invested in volunteering through encouraging positive and consistent interaction with peers.

Make Users Care About the Cause

Always tell users the impact of their actions and reinforce the organization's mission at large.

Style Exploration

Led by our Design Principles, we went on to create style tiles; an early representation of the visual identity Voluntopia could take. We sourced our interviewees to resemble Jessica as closely as possible; all aged 20-30 and expressed the desire to volunteer more but couldn't due to time or other barriers.

Each designer created 3 style tiles totaling in 9, and we recorded a variety of qualitative and quantitative metrics to derive the most effective elements of each style-tile. In the slider below, I show my 3 style tiles along with a major insight from this round of desirability testing.

Interview Structure

6Interviewees

60Minutes

RemotelyConducted

The Playful Child

Winner
"I feel like I could use this app immediately"

This can only be described as the full embrace of joy and playfulness. Upon revealing this style tile, 83% of interviewees audibly expressed their delight. Users believed all on-screen elements were clear in their intended purpose and scored this style tile for an average rating of 4.7/5.

Muted & Sophisticated

"The icon style feels too far removed from Volunteering"

With a muted purple & gray palette, this style tile leaned more mature while still capturing the youthful spirit of the city-building game. Users, however, were largely indifferent to this style tile, expressing that the muted tone didn't 'delight'. The added complexity of the isometric icon style added little value and detracted from the core purpose of the application.

Happy & Green

"I think this application would make me feel comfortable interacting with others"

I wanted to replicate Forest's simplicity & functional clarity here. Users suggested that the on-screen elements were effective it fostering a communal atmosphere. Users felt that this was similar to the 'Playful Child' style-tile with a less pleasing palette and illustration style.

Extreme Vibrancy & Playfulness

Users responded well

Desirability Testing: Notable Takeaways

I chose to fully embrace Voluntopia's spirit of gamification, but my partners did not. As a result, all three designers presented highly divergent style tiles and the data collected from these 6 remaining style tiles yielded equally informative insights for the following steps in my design process. We received a ton of data on our target demographic's preferences and what our style tiles communicated without suggestion. Below are the two main takeaways that I took from this round of testing.

"There are so many other apps that look like this, why would I use this?"

4 out of 9 presented style tiles adopted more conventional UI practices, with visuals not unlike a social media app. While these style-tiles didn't test poorly, users expressed that these visuals did little to lure them. Because we were getting users to engage in a new behavior—micro-volunteering—meeting industry standards wasn't enough. Our designs needed to go above and beyond the norm in the User Experience, which I fully accounted for in my first design principle 'Be Delightful & Intuitive'. After completing all 6 interviews, a clear trend emerged; bolder designs rated more favorably on all parameters than conventional designs.

"I want to feel like I'm helping someone, not playing a game"

While users scored my highly gamified style tiles favorably on all parameters, 66% of users expressed explicit disinterest in 'playing a video game'. This could have invalided Voluntopia's entire premise, and I was faced with a dilemma: to completely abandon the existing UX materials or to further test the city-building concept. I chose the latter, determining that our interviewees had not seen a product developed enough to justify the removal of Voluntopia's core value proposition.

Improving UX

The wireframes provided by the UX team were an excellent starting place but had some glaring flaws that I felt required fixing. We didn't have time to conduct another round of usability testing to validate our proposed changes, so I implemented my remedies into my High Fidelity Prototype and structured my interview plan to properly test for usability & conceptual improvements in the following prototype testing rounds. Through 2 weeks, our team produced and tested 2 high fidelity prototype iterations.

In the slider below, I present a major deficiency in the UX-provided prototype on the left, and my proposed solution on the right. All changes were tested and validated through 2 rounds of conceptual and usability tests.

World/City Screen Iterations

v1.0

v2.0

v3.0

Final

One tap access to all Categories

X

Users are forced to drag to show hidden categories before being accessing it.

All categories are shown and are accessible upon landing through the planet icons.

World Interactivity & Personalization

X

Items can't be customized and function only as a level indicator. Avenues for customization & interactivity that increase users' connection to their world are missing.

Users can interact and name their items—as Bart the giraffe and Jeffery the toucan are so gracefully showcasing—which delighted 100% of interviewees.

On-Screen Access to Task List

X

Users are forced to enter a category to browse tasks and aren't given an option to browse all tasks free of category filters.

Users can browse a full category indiscriminate list of tasks directly from the world/home page on the drawer below. 

Closing a Task Modal

X

100% of users had difficulty figuring out how to close this modal, stating that the icon was difficult to find.

100% of users were able to complete a task unprompted after replacing X icon with a destructive CTA button below.

Friends List

X

Friends are shown unintuitively & require another tap to access interactions.

Friends are shown on a traditional list along with all possible interactions.

Final Flows & Interactions

In the section below, I'll be showcasing each major flow and its micro-interactions. I conducted all usability tests via Sketch Cloud. Due to its limited prototyping capabilities, I was unable to properly animate the prototype and properly test micro-interactions during testing.

The animations seen below were created via Principle and Adobe XD. I was able to present a top to bottom flow of the entire prototype in my final stakeholder presentation.

Onboard

A short & engaging onboard that quickly tells users what to do and expect from the application. I initially opted to not have an onboard in my first prototype, but 50% of users didn't understand the purpose of the world or how to navigate it upon first entering the home page.

1

Planet Traversal

The Planet can be horizontally scrolled where a category is represented by a monument (a budding sprout for the environment, bed for home, etc). These pillar pillars also act as progress indicators, upgrading as users level up in their respective categories; this is shown further in the sections below.

2

Browsing Categories & Tasks

All tasks, independent of category, can be browsed from the world/home page, or category-specific categories by entering the hub. Users can also enter sibling category hubs through the slider nav on the drawer.

3

Completing a Task

Card information architecture shows relevant information and encourages participation. Users are rewarded with real Chicago monuments, rather than generic items, to feel rooted in the community they're volunteering in.

4

Friends

Users revealed that they'd be likelier to return to Voluntopia if it provided fun ways to interact with friends. Because unlocking items served as Voluntopia's primary incentive for task completion, I added the ability to share and receive gifts. Allowing users to be able to experience the joy of giving & receiving gifts from friends would increase retention.

5

Upgraded Planet

As users continue volunteering, their category monuments will grow. At Level 5, what was once a budding sprout has become a tree. Here a user enters and browses and enjoys her upgraded environment and housing hubs.

6

Parting Thoughts

Embracing the Storm

I poured my heart and soul into Voluntopia, despite knowing that this was just a mock application. Although the project required only 2 prototype iterations, I iterated my prototype 5 times, conducting mini usability tests to address issues raised by peers and myself. 

Additionally, getting the planet to properly spin was infuriating. The target hotspots would appear in random areas, requiring constant workarounds to make it work. Coming from a business and entrepreneurial background, it could be argued that most of that was wasted time, and that I should have been completing something else that yielded more value. But I could not be more proud of my final rendition of Voluntopia—it's the most unique, feature-rich, and challenging application that I’ve ever had the privilege of designing, and I’ve become a significantly stronger and resilient designer for it.