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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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