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. |
|
- 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.
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.
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.
Profile screen
allows users to view their progress and edit their profile. |
Friends screen
There is also a social component which allows the user to invite friends through social media. |
Activity screen
The user can view their friends' updated activities. |
|
|
|
|
On boarding screens
These four on-boarding screens explain Voluntopia. The heavy text with illustration needs to be consistent and align to one another.
These four on-boarding screens explain Voluntopia. The heavy text with illustration needs to be consistent and align to one another.
Map screen
Each volunteering activity is linked to the virtual city that the user is building in Voluntopia. |
Instruction screen
This instruction screen is informational and needs to be visually comprehensive. |
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.
|
|
|
|
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.
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.
Inspirations and style directions
|
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.
I focused on the caring and kind personality of volunteering activity and delivered this feeling through warm colors with earthy tone.
|
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.
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.
|
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.
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.
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.
Mock-ups
Profile Screen
I separated the sections of tracking and editing into two screens for the profile screen above.
I separated the sections of tracking and editing into two screens for the profile screen above.
|
Civic center screen
In order to give more clear visual hierarchy, I used icons and organized the spaces. 
|
Activity screen
I gave more space and implemented the consistent customized icons. 
|
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.
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.
|
|
|
|
|
|
On-boarding screens
I drew illustration for on boarding screens to support the content and to communicate the visual brand.
I drew illustration for on boarding screens to support the content and to communicate the visual brand.
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.
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.