BRINGING FUN TO MICRO VOLUNTEERING THROUGH GAMIFICATION
Tools:
Sketch
Invision
Principle
Adobe Creative Suite
My Roles:
UX Design
UI Design
Illustrator
Timeline:
5 weeks
01 Problem Statement
Volunteering is a great way for individuals to make a difference in their community, but recent studies suggest that America is currently experiencing its lowest rate of volunteerism in the last two decades. Yet, most people will still agree that they care about their community and giving back to it. The disconnect between this sentiment and the statistics – whether it’s due to a lack of time, lack of immediate opportunity, lack of interest, or some other reason – is what my team was tasked to solve.
I was tasked to build a volunteer-facing mobile app that encourages users to get involved and evoke positive emotions towards micro volunteering. Our designs were built off the work from a previous UX team.
What is micro volunteering?
Micro volunteering is when individuals complete small tests, a few minutes to a few hours in duration, that are part of a larger product.
02 Discovery
Exploratory Research
Questions this poses:
How do we convey a satisfying “gaming” experience?
How do we make millennials feel positive and accomplished?
How can we appear serious and trustworthy, while also appealing and fun?
How do we onboard users without overwhelming them with all the gaming functions?
Primary User Persona
Visual Competitive Analysis
Gathering Raw Data
I narrowed down my scope to three direct and three indirect competitors. Direct competitors all focused on volunteering while indirect competitors focused on gamification elements.
Key insights:
Direct Competitors:
Colors are being used to convey a clean and concise experience
Primary colors in contrast with black/white
Large images and fun illustrations are gripping to pull in for information
Indirect Competitors:
Bright and energetic colors
Good balance between white space and visuals
03 UX Design
Fleshing out the wireframes and looking for areas of opportunity
UX Usability Test
I conducted a usability test on the current wireframes to see what did and did not resonate with the targeted audience. My assumptions were correct and results showed that the wireframes had a lot of problems that needed to be addressed.
The screens and illustrations were outdated and needed further revisions to create a compelling product
Users expressed the gamification elements laid out was boring and not something they would feel engaged with
Users were confused and did not understand the directions
04 UI Design
After going through the usability feedback, I moved on to the fun part of the process: the visuals. This is my favorite part because this is where I can express my creativity with no bounds.
Exploration sprints were crucial to the formation of my designs. Due to the many constraints such as time, I needed to act fast and dump as many ideas as possible. This exercise is an effective way for me to get inspiration flowing.
I wrote down words that came to mind when thinking about the application. I then compiled my thoughts and found interesting starting points to help spark ideas for my visual direction.
Moodboards
Moodboard #1
Fun, Quirky and Engaging
Since our target audience are geared towards millennials who are constantly plugged in. I wanted the user to have a sense of calm when they use the app through muted colors. I also wanted to make sure to have exciting graphics to captivate our young and busy audience.
Moodboard #2
Impactful, Participatory and Connected
The theme is inspired by different video games such as Sims, Crossy Road and Animal Crossing. I want to inspire users that volunteering can be stimulating but impactful. Elements will have a more 3D-feel which will make it exciting for users to want to volunteer.
Style Tile
Test, Iterate And Repeat
This round of interviews were focused on the desirability of the style tile. Desirability test includes initial impressions, gut reactions as well as success/failure to convey brand attributes
Key Insights:
Cartoony
Lots of whitespace
Dark CTA colors don’t match the lighthearted vibe
Adding cartoons have a fine balance between childlike and being a serious app
05 Solutions
The screens and illustrations were outdated and needed further revisions to create a compelling product
Recommendation: Create dynamic illustrations with 3D elements giving a clean and modern appeal
Users expressed the gamification elements laid out was boring and not something they would feel engaged with
Recommendation: Adding a tangible awards system through gems and a points bar to incentivize users to continually play and volunteer
Users found the mechanics unoriginal and boring
Recommendation: Simplify the mechanics of the app. The original mechanics asked users to complete tasks, which would then be rewarded with a pre-made city being built. Each activity completed would be an additional section to a building within the utopia home screen. Through usability testing, users expressed that this form of gamification was uninteresting and unoriginal. I believed it would best to pivot the gamification mechanics. After researching, and interviewing users, I determined that the most important factor was personalization. Each micro-volunteering activity is allocated with a points value. The more points a user has, the more items they are able to buy and customize their utopia.
Microinteractions
Examples of different microinteractions that I was able to explore. This portion of the process definitely helps elevate the product and bring the brand’s playfullness to life.
06 Final Thoughts
Coloring outside the lines and exploring all ideas
No rules were broken but it was a project that has allowed me to be creative in unconventional ways. I did not expect to enjoy the gamification portion as much as I did. The problems were a lot less straightforward than a usual application and it was great being able to explore not only visually but functionally as well.