How do we incentivize those who have had a positive volunteering experience with a service project to recruit and prepare others for new volunteering opportunities?
A DESIGNATION UX team laid the groundwork for this project. They designed an app that aggregated multiple microvolunteering services into one engaging product through gamification. The user built their own utopia in the form of a virtual city by completing real-world microvolunteering opportunities in a variety of categories, which would then unlock new features in the game, aptly named Voluntopia.
I was part of a team of three UI designers tasked by DESIGNATION to develop the branding and identity for the product. Over the course of four week-long sprints, we would design and implement high fidelity mockups, prototypes, a responsive marketing website, UI kit and style guide.
This project was my first exposure to user-centered design in an agile environment and challenged me to retool my design thinking. My graphic design experience had not prepared me for the rapid development and iteration that embodies successful UI/UX design, but I quickly adjusted my process to match the pace. In addition to improving my soft skills during user testing, I expanded my hard skills by embracing new software and design language. At the midpoint of the project, I changed directions and taught myself the ins and outs of Google’s Material Design. Additionally, I designed my files in Sketch for the first time after more than a decade of using the Adobe Creative Suite in order to familiarize myself with emerging software and learn its best practices.
We began working on Voluntopia by analyzing the work previously completed by our UX team for the project. This work included comprehensive research, interviews, prototypes and development of the key user persona.
“When I volunteer, I want to see the impact it has on the community. In the past, I've participated in poorly organized events where I was just getting in the way, and that wasn't fun. Now I'm skeptical of new service opportunities and need more information before committing my time.”
It was clear from the research that we needed to make Voluntopia an engaging, effortless and concise experience in order to make Jessica feel that her time and effort was valued.
Thorough visual analysis of the competitive landscape allowed us to identify common patterns and provided key opportunities for our team to differentiate ourselves. Our findings specifically focused on ways to retain users and make the volunteering process more fun as we began to build a framework around Jessica.
It was important for our team to use a consistent voice during our research and analysis because it would lead to stronger design principles before we diverged into style exploration.
Synthesizing the patterns identified key takeaways for us to leverage moving forward. It was clear that curating the experience to the user was a high priority and made the apps feel more personal, especially important because users were by nature already giving up their time and emotional output to others via volunteerism. Using lifestyle images fostered a sense of community and made the brands feel relatable as well. These insights revealed opportunities to retain users on Voluntopia, and led us to develop three unifying design principles that guided our group’s direction as we moved to individual style explorations.
I was informed that Voluntopia needed to be designed for the operating system that I personally owned in order to better test the prototype. For me, this meant that I needed to design for Android. I combed over Google’s Material Design guidelines and adapted my UI elements and palette to fit within its guidelines.
Learning a new design language in one night gave me confidence in my ability to work through potential roadblocks. I capitalized on an opportunity instead of getting derailed by circumstance.
I realized my initial logo explorations no longer matched my new material design style, however, and needed to be revisited. My sketches revolved around the concept of Voluntopia being a utopian ‘paradise’ in a tropical sense. After a few more iterations, I landed on a logo with a minimalist, on-trend treatment with soft shadows and a ribbon fold.
Within the framework of our design principles, I pushed the boundaries of the UX team’s concept into something more abstract as a way to distinguish Voluntopia from other service-based apps on the marketplace. My three style tiles explored divergent design directions that I felt would resonate with different aspects of our target user’s lifestyle.
User testing revealed a clear preference for the initial style tile based on its playful energy. While the second and third styles tested well visually, users felt that neither were viable because they failed to correlate strongly to mobile gaming. It became clear to me that the gamification aspect of Voluntopia was going to be the key differentiator. I thought back to playing video games as a kid and how easily I became captivated by the immersive Nintendo environments that I spent hours exploring. It was at that point that I decided to abandon the UX team’s original top-down, isometric city view from the wireframes (seen below) and explore something more fantasy-based.
Original UX city view
Improving the user experience
With branding established, I reviewed the UX team’s wires and sought out functionality concerns for our user, Jessica.
Based on the UX team’s research and insights, I felt that any redundancy or point of confusion had the potential to lose Jessica’s willingness to return to Voluntopia or share it with her social circle. It was imperative to streamline the app wherever possible in order to combat the assumptions surrounding the complexity and time requirement of volunteering. I discovered a pretty glaring issue with the overall concept.
In order to maximize incentive and retention amongst younger users, the UX team dedicated a significant portion of Voluntopia to social media interaction via Facebook. What if Jessica didn’t use Facebook, as an increasing number of millennials no longer do? The onboarding process included an email signup as an alternative, however it rendered the social aspect of the app useless unless she could invite friends to play a different way. That also meant one-third of the tab bar would result in an empty state or be disabled.
Before giving Jessica the option to sign up via email, I encouraged her to link her account to Facebook via a friendly reminder. To maintain the city-link functionality of the app, however, I also gave her the option to sync her email contacts. This way, Jessica would be more likely to engage her social circle and continue interacting with the app after first use. Consultation with the UX team revealed a simple oversight regarding the proposed changes, and after they agreed with my amendments I proceeded with making changes to the mid-fidelity wires.
I also removed unnecessary user preference options from the UX team’s wireframes. Originally, Voluntopia prompted Jessica to select whether she wanted to see “more of” or “less” activities similar to the one she had just completed. Based on the user flow, it took her four conscious decisions, including the act of carrying out the volunteering activity, before she saw that prompt.
The final screens were the culmination of four weeks of exhaustive testing and iteration. The floating city illustrations flowed seamlessly into material design conventions as well as advanced the simple playfulness that distinguished our product from other microvolunteering platforms. The changes to the UX wireframes ensured our users wouldn’t lose the opportunity to share their experience on social media, and let them navigate the app without effort. These decisions ultimately created a more viable product for our persona Jessica, and advanced the vision of Voluntopia.
The screens shown above only paint part of the picture. To get a full idea of the interaction design and functionality of the app, check out the prototype I built in Proto.io.
In addition to the native app, I designed a responsive marketing site for Voluntopia that highlighted its features and functionality.
I created a comprehensive style guide and UI kit that covers every aspect of the Voluntopia brand for future design and development considerations. Included in the guide are explanations about core values and brand voice as well as detailed breakdowns of UI elements.
The next steps I’d take for Voluntopia would involve defining the parameters of joining more than nine virtual cities together. Linking so few Facebook friends to your city severely limits the scope of the app and might stifle its growth. I would also explore illustrating some celestial elements that would permit or block the linking of cities, and reconfigure the Friends section to allow for unlimited sharing.
Using an agile design process was an eye-opening experience for me. I found it thrilling how quickly we were able to take a design from concept to execution, and how valuable the defined sprint structure was to shaping our products.
User-centered design thinking emerged as I progressed through the sprints, and I learned to set aside my personal biases about what was effective for the product. Voluntopia pushed me to break out of my conventional mode of thinking and molded me into a more valuable designer heading into my first DESIGNATION client project: Waaves
Operating in an agile environment made me rethink my approach to design, and forced me to embrace user feedback unlike ever before.
In addition to the design takeaways, I developed personal insights from this mock project. I loved the subject matter. To me, this was what design should be about. Design has the potential to create change in the world, and that responsibility shouldn’t be taken lightly. The UX team designed a creative solution to an ordinarily unexciting prompt, and I was eager to contribute to a meaningful product. This experience made me think about my career after DESIGNATION and how I could shape the community around me.