Cause Hero

Making volunteering for causes fun

Duration: 1 week (Oct 2017)
Tools: Paper & Pencil, Sketch & Marvel


Overview

The purpose of this project was to help the United Nations come up with a way to tackle real-world problems (such as hunger, pollution, etc.). The UN wanted college students to actively participate and contribute towards solving real-world problems. Through user research, we identified that although people did care about issues, they lacked the motivation to do so. Over the one-week-long design sprint, we brainstormed and proposed an app that aims to solve it.

We createdCause Hero’ — A gamified experience for iPhone that motivates people to contribute to causes. It encourages them to volunteer in exchange for (virtual) rewards, allowing them to share accomplishments and compete among peers.

Team

Suleiman Ali Shakir, Arya M Das, Pavan Purohit & Pooja Gurudatt.

My Role

  • Helped the team in problem identification and ideating the solution
  • Created a gamification framework that relies on extrinsic motivation factors to engage users
  • Designed the app UI governed by a consistent style guide that aims to invoke warmth and goodwill among users

Process

Over the one-week design sprint, we started the week by defining the problem to solve. Then we performed Contextual Inquiry via user interviews on-campus to understand students better and their thoughts for contributing to society. As key takeaways from the interviews, we attempted to understand our target audience and that helped in creating personas. This, in turn, helped influence the kind of solutions we want to build.

We iterated over several quick, disposable hand-sketches to validate our ideas. Then, we created a low-fidelity mockup on Atomic.io which was transformed into a high-fidelity design with Sketch and ultimately put together as a prototype on Marvel. On the final day, we reviewed our findings from the user testing, presented our solution to a panel and discussed opportunities for future improvements.

Process followed over the 1-week design sprint

Research

Our team of 4 split into 2 pairs and started off in parallel with short, unstructured user interviews. By asking general questions around the theme of social causes and volunteering, we wanted to get a feel for our audience first. Then, we grouped back to discuss our findings. This led to informed decisions over what kind of questions we want to be asking in specific.

Next, we prepared a standard set of 3 questions to ask and continued with interviewing.

  1. What cause(s) do you care about?
  2. Have you taken any efforts towards contributing?
  3. What would get you /others to take action?
Performing user interviews — Rutgers, NJ

Findings

The common, recurring answer that we found amongst everyone was that people did care about various causes. They had specific causes that they care about most. But they weren’t actively doing anything about it. They were held back because of peer influence. They would help if their friends did and if volunteering was something fun and a trendy thing to do.

  • People are willing to volunteer if their friends will join too
  • People expect a tangible reward for their efforts
  • Need for recognition
  • Majority users are not motivated
Students care about causes but don’t have the motivation to do something about it. Lack of motivation was the real problem to solve.

Personas


Problems to address

  • How might we get students to care about causes?
  • How might we create a system around it that is engaging and motivating?
  • How might we bridge the gap between organizations and people who want to help?
How might we get users to invest in something fun?

Ideation

Each member of the team came up with an idea that could possibly help solve users problems. For this phase, we adopted the design sprint structure used at Slalom. the four of us quickly sketched our ideas on paper and then “pitched” it to the team. The team critiqued and voted for each idea. We then gathered feedback and iterated again in pairs, producing 2 ideas each.

We used the ‘8-Up Grid’ method to quickly put our ideas on paper folded into an eight-cell grid, within a minute.

At the end of this iteration, we chose the best ideas that were potential solutions to our problem. We then took our feedback and ideas, combined together to create one sketch.

Proposed Solution

We proposed the following features for the app, based on Contextual Inquiry and ideation:

  • Gamification — to help with motivation and engagement
  • Social media integration — boost peer involvement
  • Events posting — help people find events nearby
  • Volunteer-only events (no donations) — keeping in mind financial constraints for students

Low-fidelity Wireframes

We took the best parts from an amalgam of ideas and finally created one single concept.

User Journey

We opted for a simple Bottom Tabs based navigation, globally accessible from the home screen.

Onboarding Experience

From our personas, we knew that they would volunteer if it was something ‘fun’ to do. The biggest concern that we tried to address was — How do we get users to invest in something fun?

For that, we created a story with the user at its center. We created a hook for people by telling them about the problems of the world. There’s this hero whose trying to solve them. But needs YOUR help to do it! So you go on ‘missions’ with your hero. Which in other words, is volunteering in causes.

We wanted users to invest in the journey of this virtual hero. So that even if they don’t feel strongly about causes, they would still participate because they want to see this hero level up and reach greater heights
We attempted to tell this story via our app’s onboarding. It also serves as an opportunity to tell users what the app is about, what you can do, what do ‘Missions’ mean and more.

Final Designs

The high-fidelity mockups were designed using Sketch and the prototype was put together in Marvel.

iPhones users were the clear majority, making iOS the natural platform of choice to design for. We opted for a clear, minimalist UI that would be simple to use, allowing typography and imagery to shine. Our color palette consisted of a single tone of orange to signify warmth. The brand color was used sparingly to bring attention to certain parts of the UI.

The Gamified System

  • Volunteer for a cause — by going on ‘Missions’
  • Reward System — Points & Badges
  • Grow your Hero — Level up by participating in Missions
  • Leaderboards — Encourage competition

User Testing

My team and I discussed the goals we wanted to measure in the user testing phase. We decided upon certain flows and tasks that we wanted users to perform and test the same. This would reveal to us if our design work or whether it needs improvement. The tasks that were tested are:

  1. How would you join a mission?
  2. Once you’ve joined a mission, what do you do next?
  3. How would you know more about your current avatar (hero)?
  4. Where to see how you’re doing against your friends?

Feedback

Most users found points and rewards to be motivating. But how long the gamification system is actually capable of keeping them engaged is to be fully seen.

“I like how the app focuses on taking part in causes. If I had to donate money instead of volunteering — then I wouldn’t be using the app. Because as a student I have more time than money.” — User 1
“Liked the icon and graphics. They’re clear & understandable. I visually enjoy the app very much!” — User 2

Prototype

Key Takeaways

  • It is essential to mockup the interface early — gives you clear insights on how to structure the app in terms of layout placement, copy and information architecture.
  • Respect users mental models — Users do not have patience and they get frustrated when something doesn’t work the way they assume it would. Using standard, natural mapping for common controls is a safer bet than trying to reinvent the wheel.
  • You can never be too sure about your assumptions — Users will always surprise you. For example, inconsistency between the share icons on Android & iOS. We didn’t label the filter icon assuming it was clear enough, but one user failed to identify it correctly.
  • Have a goal for User Testing — You cannot test the ENTIRE app and every possible scenario. Hence, it works better if we predetermine measurable goals and journeys that we want to evaluate.

Future Possibilities

  • Sync achievements with LinkedIn
  • Partner with local places to reward users (as opposed to virtual rewards)
  • Integrate with calendar — for upcoming events
  • Maps navigation to volunteering venue