Tracy Cheon UI Designer
  • Portfolio
  • Me
Picture

Voluntopia


Background

Voluntopia is a mock project. I developed a brand identity, high-fidelity screens, responsive marketing website, and a style guide. This project was completed in three weeks.

Voluntopia is a gamified microvolunteering mobile application. Micro-volunteering is a form of online volunteering that is typically done in small increments of time via a connected device or mobile phone.​ The research was done by the previous UX team.​

​Below is the UX handoff.​
Picture
Picture
  • Given research that volunteering engages citizens to create stronger communities, the UX team focused on incentivizing users who had positive volunteering experience.
  • In order to motivate those users while recruiting and preparing others for new volunteering opportunities, they came up with the idea of using gamification through micro-volunteering.  ​​
  • Gamifying microvolunteering sparks an interest in the users and curates new opportunities to give back to their community. It keeps existing users engaged by providing validation of their efforts and measuring their progress.​
Picture

User Persona

The UX team created multiple personas through their research and we chose to focus on Jessica as the primary persona. As Jessica is a millennial who is a college student who has time to volunteer, she covered our target users.​
Picture
Jessica wants to gain experience and make new friends. She also wants to feel like she is having an impact on the community and that her time is being valued.​

Wireframes

UX team provided us wireframes below.
Picture
Profile screen
​allows users to view their progress and edit their profile. 
Picture
Friends screen
There is also a social component which allows the user to invite friends through social media. 
Picture
Activity screen
The user can view their friends' updated activities.
Picture
Picture
Picture
Picture
On boarding screens
These four on-boarding screens explain Voluntopia. The heavy text with illustration needs to be consistent and align to one another.
Picture
Map screen
Each volunteering activity is linked to the virtual city that the user is building in Voluntopia. 
​
Picture
Instruction screen
This instruction screen is informational and needs to be visually comprehensive.
Picture
Civic center screen
Completing tasks in the game builds up certain parts of the city. 
​

Wireframes Refinement
​My team reviewed the wireframes and we found we could adjust the flow in order to make it clearer and more intuitive for the user to navigate. For example, we got rid of two buttons that ultimately have the same functionality and made changes to icons that are more universal. We also got rid of unnecessary arrow buttons and made the box section tappable.
Picture
Picture
Picture
Picture
Picture
Competitive Analysis
Our team looked into the visual competitors to gain insights on how other companies used their visual elements to communicate their brand values. We found websites that share similar concepts of volunteering because volunteering activity contains certain level of responsibility. Focusing on Sharing Life, VolunteerMatch and American Red Cross, we found the expression of genuine feelings in all three interfaces of the websites through colors.
Picture

UI Design Process

Logo

Because Voluntopia was also a gamified app, finding the right balance between seriousness and playfulness is important. Both Sharing life and American Red Cross carried seriousness and genuine feelings through photographs and VolunteerMatch took a different direction and more focused on the playfulness.
Picture
Picture

Inspirations and style directions
Picture
Mood board A
Style tile A
Direction A
I focused on the caring and kind personality of volunteering activity and delivered this feeling through warm colors with earthy tone. 

Picture
Mood ​board B
Style tile B
Direction B
In order to show the fun part of the gamified application, I used bright color with illustrative background. I received feedbacks that it looked too playful that volunteering characteristics were lost. ​

Picture
Mood board C
Style tile C
Direction C
The mint
 evokes a sense of consciousness and I used green to convey openness, acceptance and engagement. ​

Final Style Direction
My third style emerged from the fresh and cool feeling to a more interactive style with the addition of orange to the color palette through the process of iterations. ​I used rounded buttons and friendly typefaces to maintain the optimism. 
Picture

Mock-ups

Profile Screen
​I separated the sections of tracking and editing into two screens for the profile screen above.
Picture

Civic center screen
In order to give more clear visual hierarchy, I used icons and organized the spaces.
Picture
Activity screen
I gave more space and implemented the consistent customized icons. 
Picture
Map screens
This is the customized the map considering the structure and the position of buildings. I drew stylistically suitable map for Voluntopia branding and users can to zoom in and out.
Picture
Picture
Picture

Picture
Picture
Picture

On-boarding screens
I drew illustration for on boarding screens to support the content and to communicate the visual brand.
​
Picture
Prototype

Responsive marketing website

Marketing site was the primary way to keep existing users engaged and measure their progress to validate their efforts. As Voluntopia’s goals were to spark an interest in users and curate new opportunities to give back to the community, I made the background a faded picture of clasped hands in order to give the impression of support.
Picture

If we had more time,

  • explore the concept of combining the cities with friends, of how the virtual city would ultimately look like when multiple cities are combined together.
  • see how different themes of cities might work together.​

What I learned

  • design needs to be clear enough that users shouldn’t have to think about it. Because there were heavy on boarding screens in this project, it was essential to find a way to not overwhelm the users and still convey all the information successfully. Furthermore, it was a challenge to figure out how to create an adaptable design that would remain consistent as users explore more features and activities.
  • less is more. I learned to find the way to present text heavy screens with the minimum design elements and still successfully communicate the brand.
  • Portfolio
  • Me