Voluntopia
Voluntopia through gamifications and rewards schemes aims to bridge the gap by providing micro-volunteering activities and tasks to enable people to volunteer their time, in short, convenient bite-sized chunks based on their personal interests.
The Challenge
The UK government’s volunteering department has asked our team to define the design system of their new app called Voluntopia that aims to get users excited about microvolunteering, while also encouraging real-world impacts via digital rewards and gamification. The UX Team laid the groundwork for this project.
Deliverables
Tools
Duration
Branding & Logo Design
High-Fidelity Mockups
Style Guide & UI Kit
Responsive Marketing Website
4 Weeks
Invision Studio
Sketch
The Approach
Research & Synthesis
We began working on Voluntopia by analyzing the work completed by the UX team for the project, examining the User Persona and Wireframes.
Evaluating the competitor space
Synthesizing patterns and trends identified key takeaways for us to move forward with our design and style direction. The usage of bright contrasting colors seemed to be a common pattern in most of the apps in this domain.
We also interviewed volunteers to understand their take on volunteering, their experiences using various volunteering apps, websites, and other channels for similar information.
Competitor and user interview analysis revealed a lack of proper volunteering app in the current market.
Key takeaways were the following:
- An app with customizable hours that can be dedicated to volunteering was absent.
- The gamification feature suggested was basically a distraction for the users.
- The app should include all kinds of volenteering activites, be it on location or directly thru the mobile.
Interviewing users who have some volunteering experience.
Style Explorations
After research and examining competitors, the team started working individually exploring our own styles for the application.
I began to explore potential stylistic directions with Moodboards. They helped me define the visual language and color palettes of the app.
Based on the moodboard, I then created style tiles to translate the aesthetic feel to more tangible UI elements and to communicate the essence of the visual brand.
Moodboard - 1
Moodboard - 2
Logo Design
A key challenge in this process was to design a logo that is simple yet effective. I created three separate logos for each moodboard. I enjoyed the process of sketching out concepts and ideating upon them.
Final
Combination Mark Logo for Moodbaord - 2
Final
Combination Mark Logo for Moodbaord - 3
Styletiles
We used Microsofts Desirability Toolkit to test the visual appeal for the style tiles created by our team. We had 9 styletiles on the wall with a set of words to be ticked by the users and also a comments section to add their views and suggestion.
The tests were a huge success and we had some key insights and suggestions from the users. I had a lot of suggestions for my stile tiles, with users showing negative appreciation to the logos and color palette and requested to come up with some new designs.
Two key takeaways from the Microsoft Desirability Tool Kit Test:
- Users highly rated styletile - 2 with illustrations and loved the concept of a map with pointers to nearby volunteering opportunities.
- Negative comments for green and red color usage and suggested for a new color palette that is fresh and energetic.
After consulting with my creative director and receiving feedback from user testing, I created a new style tile in which I kept most of the illustrations and UI elements of the third style tile but replaced the red with an orange color which is fresh and encouraging.
Thinking about Voluntopia's target users, I wanted to create something playful and engaging but at the same time trustworthy and safe. Based the those Ideas, I chose a color palette and style with orange as my primary color and black as accent color and a brand new logo too.
Orange combines the energy of red and the happiness of yellow and represents enthusiasm, happiness, attraction, encouragement, and stimulation of the emotions that were perfect for volunteering.
Chosen primary color for the app
New Logo & Styletile
Reviewing Assets and Improving User Experience
Next was examining the assets ‘the wireframes' provided by the UX Team. I reviewed the wireframes and found some areas that could be improved based on the feedback received from user interview.
Also based on the eye-opening results from user interviews we realized two key things:
1. Users were not at all interested in any kind of gamification in the app, neither were they interested in any form of reward system.
2. They preferred a plain simple app that shows them micro-volunteering opportunities personalized to their time and location. Thus it was all about flexibility and personalizations.
The End Result
The final screens were the culmination of four weeks of exhaustive testing and iteration. The changes to the UX wireframes ensured our users wouldn’t lose the opportunity to personalize their volunteering or charity interests and an app that is easy to understand and navigate without much effort.
Key high fidelity design screens:
