Tools
Sketch, InVision, Principle, Otter, Zoom
Timeline
5 weeks (4 sprints)
Team
Dimitri Andros, Brian Diaz, Jaime Jaquez, Robel Paguio
Agency
Flatiron School
Nina Barnett
Product Designer
Engaging millennials
in micro-volunteering
Increasing volunteering rates through gamification
“The dark and light colors guide my eyes
in the right places, and I also appreciated
the professional nature of the design.”
in the right places, and I also appreciated
the professional nature of the design.”
—Robin, Voluntopia user
CHALLENGE + PROCESS
About the Project
Our team was tasked with creating and designing a Minimum Viable Product (MVP) for a mobile application that specializes in micro-volunteering and is intended to increase the volunteering rates among millennials.
My Role
I worked on design ideations individually, while concurrently working with four other designers on the research, usability testing, and synthesis stages.
Exploratory Research
User Interviews
Prototyping
Design Direction
Micro-interactions
Desirability and Usability Testing
Affinity Diagramming
Research Synthesis
Logo Design
Our process took a total of 5 weeks over the course of 4 sprints.
DESIGN RESEARCH
Regardless of the motivation, what unites volunteers is that
they find it both challenging and rewarding.
Exploratory Research
I enjoyed working on this to learn about the trends in volunteering, which then became the inspiration for my design solution.
Training and orientation will become more necessary as the virtual volunteer can contribute from anywhere across the globe
Millennials are dedicated to causes they care about and because of their technical savviness, are on trend to volunteer more, especially in fields related to their careers
USER INTERVIEWS + SYNTHESIS + IDEATION
Sarah and Jessica served as a basis for the user participation criteria, and are outgoing, creative, optimistic, and motivated.
Approach + User Sourcing
Due to COVID-19, all user interviews were conducted and recorded remotely using Zoom video conferencing software. Two team members conducted each interview, with one as a facilitator, and one as a scribe. After the interviews were conducted, Otter was used to pull a transcript of the interview recording.
Participation criteria
Between 20-35 years old
Currently or recently employed
Varied levels of volunteerism
Frequent smartphone user
Sourced participants
5 female; 4 male
78% volunteer rarely (1-2 times per year)
78% use their smartphones very often (3-6 hrs per day)
Evaluating and Converging Ideas
As a team, we did a Priority Matrix and a Rose, Bud, and Thorn Diagram together. Using these methods helped us prepare for affinity diagramming and synthesizing our data.
To understand what the top user-preferred designs had in common
To determine what design elements were higher impact and easier to implement going forward
INSIGHTS
I enjoyed taking the Affinity Diagram and using that as a basis to write the summary, since it allowed me to really understand what we got out of doing the user interviews.
Users prefer designs that are professional, current, and fun
Expectations: Easy discoverability, sense of community, and gamification elements
Design Principles
After synthesizing the data from the first round of interviews, our team came together and compiled these design principles, in order to keep our compass pointed in the right direction throughout the project.
How does it work, so far?
With this round of testing, we focused on desirability and early usability of our team’s high-fidelity app screens, and we got a sense of what’s working in regards to information architecture, navigation, consistency, and visual clarity.
HOME SCREEN
Users preferred a realistic feel over a gamey one, for the map illustrations
Users crave relatability in imagery and simplicity in layout
Users need clearer context and labeling to know what to do on all key screens. The clarity still wasn’t there for the navigation.
CATEGORIES SCREEN
Users like a list layout for simplicity, as well as a grid layout for glanceability
The navigation of the alternate view to find the volunteering category list was hard to locate
“Being able to collect a specific badge or do a certain
type of volunteering sounds fun to me.”
type of volunteering sounds fun to me.”
—Rory, Voluntopia user
How is the user completing
specific tasks?
With this round of user interviewing, we focused on the usability of each one of our prototypes, so we got feedback on one prototype, per user.
FRIENDS SCREEN
Wireframes were provided by our stakeholders
I changed the layout of the Friends screen because the eight circles limit the amount of friends the user can have
I also ended up going with a tab for a Leaderboard, to add a gamification element to the Friends section
DESIGN CONCEPTS
LOOK & FEEL
I created three diverse mood boards and style tiles, in order to explore a variety of solutions.
Modular, Playful, Happy,
Urban, Productive
Millennials will soon lead the way with current technology to use their mobile devices for real-time collaboration on-the-go, and more want to volunteer in fields related to their career, for shorter amounts of time (micro-volunteering).
I was inspired to use illustrations that are simple, two-dimensional shapes, to give the app a geometric feel reminiscent of busy city streets.
Friendly, Uplifting,
Inviting, Inclusive
Volunteers are the biggest financial supporters of a non-profit organization, so creating an app that feels friendly and warm could be essential to the organization’s future, and also offers some comfort in their busy lives.
I thought the user would relate to seeing photographs of people doing various volunteering activities, since this communicates a friendly and inviting feeling, along with the rounded corners of the buttons and icons, and the soft, uplifting color palette.
Unassuming, Resourceful, Adaptable, Dedicated
This design is inspired by the Boys and Girls Scouts, since millennials are team-oriented, motivated, scrappy, and reliable. In addition, volunteers put a high value on the act of service, mentoring others, and learning new skills.
The UI elements emphasize the team-oriented and scout-like qualities of volunteering, such as training and orientation, which has become essential for the virtual volunteer. These elements can be seen in the details on the map, and icons. Badges are a visual element to show the various levels of volunteering service.
SOLUTION
Features
The badges really fill me with pride, because the users liked that they provide a playful element for each category, while hinting at the scouts’ inspiration.
Users liked the artwork on the home screen, since it has a realistic and relatable feel, and also a bright, but not overwhelming, color palette
Users responded well to the professional nature of the design, and the readable sans-serif fonts
Users liked to be guided step-by-step
Users seemed to really like the onboarding process and found the prototype to be simple to use
Users enjoyed the friends screen and commented that it was “clean”, “simple”, and overall easy to use and look at
They enjoyed the thank you message at the end, which gave them a sense of accomplishment
My goal was to create an app that is modern, professional, fun, and also lets the user see their impact on the community. This product design achieves both the business goals and user needs.
“It’s very organized, clean, and professional
at the same time. It’s very fun. And, so, yeah,
I think it’s just easy. I feel like I would be able
to navigate with these designs.”
at the same time. It’s very fun. And, so, yeah,
I think it’s just easy. I feel like I would be able
to navigate with these designs.”
—Naomi, Voluntopia user
Design System
Instructions for the logo, typography, colors, iconography, illustrations, photography, UI elements, and micro-interactions are all part of the 34-page design system that I created.
RECOMMENDATIONS
WHAT I LEARNED
We always had a plan
Our team was on track to succeed right from the start because we delegated assignments, and used Trello to manage our workload. Our communication was timely in Slack, and working together remotely across two different time zones was seamless.
Having a great team
makes all the difference.
This project allowed me to learn how to diverge and converge on design ideations individually, while concurrently working with a team for the research, usability testing, and synthesis stages.
We were in synch to synchronize
To prepare for our meetings, we put our notes from the interviews onto a Mural board, where we came together for the Affinity Diagramming. I really enjoyed the process of seeing the themes and takeaways, and can only imagine how much more robust the information is when there’s a much larger number of participants.
We had each other’s backs
In order to have things run as smoothly as possible, sometimes we had to jump in during an interview to help our teammate with some unforseen technical glitch. We quickly learned to trust each other and rely on one another in order to tackle our demanding deadlines.
To learn more about me, I can be reached at
nina@ninabarnettdesign.com or 206.679.2409.