01

Gamifying microvolunteerism

Voluntopia is an innovative app concept that takes the idea of microvolunteering (volunteering done in small increments of time using just a smartphone), and incentivizes it with gamification. It makes volunteering in the real world the mechanism that you build a virtual city on your phone. I was part of a design team assigned to work on Voluntopia’s UI.

skip to deliverables

CLIENT

DESIGNATION

DURATION

Four weeks

SKILLS DEMONSTRATED

Competitive analysis, sketching, logo design, vector illustrations, iOS design, prototyping, style guide

Voluntopia

02

These were the three challenges my team focused on

Improve this map

The UX team delivered a detailed mid-fidelity city map, but it lacked brand value and felt more like an architectural mockup than a game. I designed a set of buildings and landscaping illustrations for the city map with consistent branding and a vivid, playful style that advanced the game aesthetic.

Voluntopia city map mid fidelity wireframe
Voluntopia Friends screen low fidelity wireframe

Make this screen more intuitive

The way the UI is styled on this screen, you would expect  tapping the circular button is for adding friends. But when you read the instructions at the top you realize that's not what these buttons do. I made this screen more intuitive by styling the UI to convey the action they perform, which in this case is to connect your city with your friends‘ cities.

Simplify these instructions

These instructions are long and difficult to understand, which is a deal-breaker because microvolunteering is new to a lot of people. Users will stop using it if it frustrates them. I redesigned them as a progressive walkthrough tutorial to give the user a more effective and enjoyable experience.

Wheelchair Accessibility low fidelity instructions

03

My teammates and I conducted competitive analysis research

We were designing for our user persona Jessica, a 20-year-old college student with a busy schedule. UX research showed that gamification incentivizes Jessica by providing validation for efforts, a way to measure progress, and social interaction with friends. My teammates and I looked at competitors to see if they used gaming principles or other incentives for engagement, and found a handful didn’t use any incentives. We called these the “low incentive” apps.

Low incentive apps used outdated design patterns

We avoided things like serif fonts, mismatching color schemes, skeuomorphic buttons, and springboard navigation, all outdated design patterns evident in the Salvation Army and Wheelmap apps.

The Salvation Army Family Store app screenshot
wheelmap.org app screenshot

High incentive apps used modern design patterns

On the other side of the spectrum were apps like Elbi and GiveGab that used more engaging design patterns like a casual tone of voice, and a playful color palette of primary and saturated colors. These were patterns we decided to emulate.

Elbi app screenshot
GiveGab app screenshot

Based on what we gathered from the UX research, we knew the high incentive apps were more attractive to Jessica, and were thus our primary competitors. To set Voluntopia apart from them, we decided that our approach to the city map, the UI for connecting with friends, and the microvolunteering task flow were most important to get right, hence the focus of our three challenges.

04

We defined our design principles to guide our approach

Let's play!

Voluntopia uses gaming principles to hook the user, so the app should look and feel like a game. Efforts are rewarded with seeing the process of buildings under construction. Users should see the potential for what they can do in the app

Microvolunteering is for everyone!

Voluntopia uses a color palette and style that is inviting and accessible to all ages and backgrounds. This means the app uses a casual tone of voice, warm bright colors, and emphasizes the ability to connect with friends and the Voluntopia community.

05

I sketched logo concepts to explore possible style directions

I began by dissecting the name “Voluntopia” into its component parts of volunteering and utopia. I thought of both parts as the coming together of three elements: self, place, and community. Cities are an embodiment of all three, so I sketched several logo concepts with prominent urban themes.

Voluntopia logo sketches 1
Voluntopia logo sketches 2
Voluntopia logo sketches 3
Voluntopia logo sketches 4

Next I mocked up two divergent logos and corresponding style tiles.

Style 1

Style 2

Voluntopia logo concept 1
Volutopia logo concept 2

I flipped the Boomtown Deco typeface upside down, and used them as buildings for a sleek futuristic look. I added orange-red to compliment the teal of the buildings.

I used a serif typeface and fine lines to evoke urban sophistication.

Volutopia style tile 1
Volutopia style tile 2

I chose colors of brick orange and brown to evoke a city, and styled UI elements with sharp corners to mimic brick and mortar. I used avatars and isometric building graphics to give a cartoon aesthetic.

I used live photography to move the app towards a real-world aesthetic. The style of buildings is more nuanced and complex, evoking a more sophisticated style that is still playful.

I went with the first style because its playful aesthetic was more appropriate for our persona Jessica, and because the second style felt pretentious and misaligned with our design principle “Microvolunteering is for everyone.” With my design direction chosen I iterated the logo design.

Voluntopia final logo

I used a city hall dome to tie the brand more closely with civic engagement, and changed the style of buildings to industrial brick.

After iterating the logo design I worked on executing my solutions to the three project challenges.

06

I designed a city map with strong branding and gamification aesthetics

The UX team delivered a detailed mid-fidelity mockup for the city map, but it had no brand value and resembled an architectural mockup more than a game, so I redesigned it. I believed that it was important to maintain the isometric perspective for the map, as opposed to a flat two-dimensional design, because it’s more immersive and it’s how successful city-building games like Simcity and Tropico do it. I designed the buildings and trees, arranged them on an isometric plane, and built a prototype to explore it all.

Voluntopia city map buildings
Voluntopia scrolling GIF of city map

07

I improved the user experience by designing intuitive UI

On the friends screen you can connect your city with your friends’ cities. This isn’t intuitive in the UX wireframe. For my redesign I distinguished cities and friends by using isometric squares to represent cities, and circular avatars to represent friends. I added a separate “Search Friends” button to further distinguish the possible actions on this screen.

Voluntopia Friends screen low fidelity wireframe
Voluntopia Friends screen high fidelity mockup

08

I designed a progressive walkthrough instead of a screen full of text

The screen full of instructions was not effective in the original wireframe. My first approach was to design a mid-fidelity mockup with simplified body copy overlaying a map. This was an improvement, but it wasn’t enough. So I split  the instructions into manageable chunks, and built them into a progressive walkthrough.

Wheelchair Accessibility instructions low fidelity wireframe
Wheelchair Accessibility instructions mid fidelity wireframe

Original wireframe

Mid-fi mockup

Hi-fi mockup

Wheelchair Accessibility instructions high fidelity GIF

User testing wasn’t within the scope of this project, but I was able to measure the success of this solution at the final presentation when a panel of UI and UX professionals responded with overwhelmingly positive feedback.

09

These were the final deliverables

High fidelity mockups

High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1

I used strong branding in the signup and login screens to reinforce Voluntopia’s brand identity. City map illustrations with simple body copy give users a friendly introduction to the app.

High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen

I expressed my concept of utopia as self, place, and community through these three screens: Profile, City, and Friends. Your volunteering actions improve the place where you live, and connect you to your community.

High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen

My UI design provides validation for efforts, a way to measure progress, and social interaction with friends, the three gamification components that the UX research found incentivizes engagement.

Prototype

I successfully addressed the three challenges I set out in the beginning of the project. I improved the city map, made screens more intuitive, and simplified instructions. The final task was to showcase my solutions in a prototype. As a gamified app, I decided the prototype had to look and feel interactive, otherwise the big reveal would come across flat. I used video editing in Photoshop to produce the splash screen animation, and Proto.io to showcase microinteractions. The final result is a seamless prototype showcasing a dynamic aesthetic.

Having trouble viewing the prototype? You can also view it on the proto.io website

10

These are my final thoughts

Working on this project taught me that I can always grow as a designer. To achieve the desired outcomes I had to learn how to design isometric buildings, how to create an animation with Photoshop, and how to use Proto.io to show microinteractions. It also taught me that UI design is as much about designing a good experience as it is about crafting a beautiful interface, which I demonstrated with the improvements I made to the friends screen and the volunteering task instructions.

If I had more time to improve my work for this project I would conduct user testing to determine how successful my solutions are, and iterate my design. I’m particularly interested in desirability testing to see if the style of the city map buildings and landscaping are appropriate. For my next project, FetchFind, I incorporated user testing into my design process.

back to top

© 2017 by Felix Poon | All rights reserved

Felix Poon Instagram Felix Poon LinkedIn
Voluntopia city map mid fidelity wireframe
Voluntopia Friends screen low fidelity wireframe
Wheelchair Accessibility low fidelity instructions
The Salvation Army Family Store app screenshot
wheelmap.org app screenshot
Elbi app screenshot
GiveGab app screenshot
Voluntopia logo sketches 1
Voluntopia logo sketches 2
Voluntopia logo sketches 3
Voluntopia logo sketches 4
Volutopia style tile 1
Volutopia style tile 2

Voluntopia city map buildings
High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1
High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen
High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen

Voluntopia city map mid fidelity wireframe
Voluntopia Friends screen low fidelity wireframe
Wheelchair Accessibility low fidelity instructions
The Salvation Army Family Store app screenshot
wheelmap.org app screenshot
Elbi app screenshot
GiveGab app screenshot
Voluntopia logo sketches 1
Voluntopia logo sketches 2
Voluntopia logo sketches 3
Voluntopia logo sketches 4
Volutopia style tile 1
Volutopia style tile 2

Voluntopia city map buildings
High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1
High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen
High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen
Voluntopia city map mid fidelity wireframe
Voluntopia Friends screen low fidelity wireframe
Wheelchair Accessibility low fidelity instructions
Voluntopia logo sketches 1
Voluntopia logo sketches 2
Voluntopia logo sketches 3
Voluntopia logo sketches 4
Volutopia style tile 1
Volutopia style tile 2

Voluntopia city map buildings
High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1
High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen
High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen
Voluntopia city map mid fidelity wireframe
Voluntopia Friends screen low fidelity wireframe
Wheelchair Accessibility low fidelity instructions
Voluntopia logo sketches 1
Voluntopia logo sketches 2
Voluntopia logo sketches 3
Voluntopia logo sketches 4
Volutopia style tile 1
Volutopia style tile 2

High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1
High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen
High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen
Volutopia style tile 1
Volutopia style tile 2

Voluntopia scrolling GIF of city map
Voluntopia Friends screen low fidelity wireframe
Voluntopia Friends screen high fidelity mockup
Wheelchair Accessibility instructions low fidelity wireframe
Wheelchair Accessibility instructions mid fidelity wireframe
Wheelchair Accessibility instructions high fidelity GIF
High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1
High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen
High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen
felix poon design logo
Volutopia style tile 1
Volutopia style tile 2

Voluntopia city map buildings
High fidelity login screen
High fidelity signup screen
High fidelity onboarding screen 1
High fidelity Profile screen
High fidelity City screen
High fidelity Friends screen
High fidelity Accessibility screen
High fidelity task completion screen
High fidelity Notifications screen