Nina Barnett
UX/UI designer

Making volunteering
fun and social

Increase millennials’ participation through gamification

“The dark and light colors guide my eyes
in the right places, and I also appreciated
the professional nature of the design.”
—Robin, Voluntopia user

CHALLENGE + PROCESS
ToolsSketch, InVision, Principle, Otter, ZoomTimeline5 weeks (4 sprints)TeamDimitri Andros, Brian Diaz, Jaime Jaquez, Robel PaguioAgencyFlatiron School

Tools

Sketch, InVision, Principle, Otter, Zoom

Timeline
5 weeks (4 sprints)

Team
Dimitri Andros, Brian Diaz, Jaime Jaquez, Robel Paguio

Agency

Flatiron School

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.

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.

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.

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

UX/UI, Product Design

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.”
—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
UX/UI, Product Design

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.

UX/UI, Product Design

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.


UX/UI, Product Design
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 did enjoy the friends screen and they all 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.”
—Naomi, Voluntopia user
RECOMMENDATIONS
UX/UI, Product Design
WHAT I LEARNED
We always had a planOur 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.

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.