Voluntopia

Volunteer from anywhere by completing small tasks that benefit your community and the people around you

Table of Contents

Role
UI Designer
Team
Jee Hyun Kim, Youssef Saab
TimeTable
5 Weeks, June — July 2020
Tools
Figma
Miro
Notion
Outputs
Market Research, Moodboards, Style Tiles, User Testing, Design Principles, High Fidelity Mockups, Interactive Prototype, Micro-Interactions, Usability Test Report, Design System

Project Background

A New Way to Volunteer

Small steps can deliver powerful changes over time.

What if we could put this into practice to promote change in our communities?

Recent studies suggest that America is currently experiencing its lowest rate of volunteerism in the last two decades. Despite this fact, most people care about making a difference and giving back to their communities, but they either don’t have the time or find it to be a daunting commitment.

Target Audience

The primary target audience for this project was young, busy professionals of the ages 20-35 who have the lowest rates of volunteerism and need extra motivation to get involved.

The project brief at hand introduced us to two personas — Jessica Lane and Sarah Boulders. Understanding their needs and pain points allowed us to succinctly frame the project challenge.

The Challenge

"How might we create a frictionless app experience for users that re-engages them in the volunteering space, maximizes their time, and evokes positive emotions towards community involvement?"

Kickoff

Micro-Volunteering — The Key 🔑

Micro-volunteering is when individuals complete small tasks, a few minutes to a few hours in duration, that are part of a larger project. It was a key concept that laid the foundation for our product because we needed to create an experience that maximized the time of our users.

In order to put the project into context, we began with domain research.

We needed to determine why low rates of volunteerism exist.

Discoveries

Roles Lack Interest

No One Asked

No Time

Competitor Research

The competitive analysis was a beneficial next step because it helped us assess what the current volunteering market landscape looked like while identifying trending insights and patterns that could possibly inform our visual design strategy.

We specifically paid attention to how visual elements are being used to impact the experience, the feelings and impressions that they established, and what was working/not working.

Explorations

Ideation + Divergent Concepts

Keeping in mind research insights, I began the ideation process. While creating moodboards and style tiles, I focused on identifying what colors and elements could be used to engage users on the topic of volunteering.

Moodboards

Style Tiles

User Testing Goals

#1  Gain insight on what users think about both volunteering and micro-volunteering

#2  Evaluate preferences on the design, layout, and features of our style tiles

#3  Strategize to decide which design direction each team member would be taking

Round 1

User Testing Findings

22%of users

had a pleasant experience

89%of users

prefer to volunteer in a group

66%of users

never used a volunteering app

Apps users kept referring back to, citing their simplistic, modern, and straightforward approach. This was an indication for my team to look at these apps and let them serve as a basis for our designs.

In Hindsight

Testing our style tiles with users resulted in subjectivity. Instead of trying to decipher which of the nine style tiles users liked best, we could have shifted our approach by asking users to thoroughly explain their statements.

Arriving at a Direction

Although testing produced some beneficial takeaways, I decided to look back at research to determine a design direction. Something that made Deed stand out from the other platforms was the use of bright and inviting colors. If I wanted to achieve the project goal of re-engaging users in the volunteering space, bright and expressive colors was the way to go.

Design Principles

After interviewing multiple users and getting feedback as a team, we determined that the following ideas and principles would be essential to our design language. They focus on visual design as well as our overall design process.

Be Methodical

Stick to a smart organization system. Information should be structured, straight-forward, and easy-to-find.

Be Genuine

Design with a user-centered mindset. Our designs should do what they say, exhibit openness, and shouldn't contain secretive or unethical patterns.

Practice Adaptability

As we’re designing, it’s inevitable that mistakes will occur. Keep on improving and moving forward, iterate as often as possible, be open to change, and take feedback as constructively as possible.

Take A Contemporary Approach

Align with user needs and preferences by implementing a contemporary aesthetic that includes recognizable, polished design patterns.

Design For Fulfillment

Our volunteering platform should allow users to feel accomplished and provide them with ample opportunities to make an impact.

Design For Interactivity

Volunteering is a social activity and it's critical to allow users to invite friends or connect their existing social media platforms to the app.

Design Execution

Wireframe & Usability Evaluation

Before diving into visual design, we evaluated the wireframes and usability test report from the creative brief. Understanding prior pain points users encountered allowed us to make informed design decisions when building out our screens.

The original wireframes took a gamification approach but I made a pivot from them because I thought this wouldn’t appeal to many users.

Why?

#1  There's a time commitment associated with games. This would hinder the target audience (young, busy professionals) from using the app.

#2  While interviewing users, no one mentioned games when talking about apps they use on a daily basis.

Initial Designs

Round 2

User Testing Findings

01

Trusworthiness & Authenticity

Small things such as including the source of the organization in the volunteer opportunities screen increased trust among users.

02

A Sense of Achievement

Users said the vibrant confirmation screen that popped up after completing a task resulted in excitement to continue using the app.

03

Scannable Information

Referring to the instructions screen, users mentioned having clear, short, digestible nuggets of information helps with readability.

Familiar Patterns
"I really like the Apple Maps UI and it's familiar to a lot of people. What if you could take some hints from it for your map screen?"

Katie S. — End User

Refinements

Assembling The Missing Pieces

User testing helped lay the foundation for iterations and additions. One thing in particular that I needed to do was design an onboarding process.

Why?

We discovered in our first round of testing that several users had no prior knowledge of micro-volunteering. Since this was the main concept of the app, we needed to successfully introduce it in a series of onboarding screens.

Onboarding Screens

Other Additions

Map Screen Refinements

What Changed?

Home & Civic Screen Refinements

What Changed?

Micro-Interactions

It’s the little things that turn a good digital product into a great one, which is why I created micro-interactions for Voluntopia. They added visual enjoyment and enhanced the user experience.

Final Testing

Our last round of user interviews focused on testing the usability of our solutions. To get the most out of these interviews, we created a set of scenarios and tasks that outlined key flows we asked users to go through.

Bias/Constraint
There was a bias we experienced during testing. Since each of the three prototype had a similar flow, the prototype that was tested first was at a disadvantage. In other words, by the time users got to the second and third prototypes, they were more comfortable with the flow. We tried our best to combat this by having each team member switch up the order in which they tested the prototypes.

Round 3

User Testing Findings
&
Future Plans

01

Social Media Integration

Allow users to share that they completed a micro-volunteering task to their social media platform of choice.

02

One Size Doesn't Fit All

Give users options. For example, allow them to easily switch between grid/list view on the home screen and show activity instructions in various formats (text, video, GIF).

03

Balanced Onboarding Approach

The onboarding process should be concise but also successfully introduce users to the app and its features.

04

Rewards System

People need incentives to use the app. A robust reward system would increase engagement and retention.

Final Solution

Creating An Impact In The Market

Prototype

Outcome

The project impacted the overall volunteering landscape because it introduced a solution into a marketplace with a lot of potential. My team collected some helpful data to see how users would integrate Voluntopia into their daily schedules.

Results

"This app is catered towards a particular audience. If I was dedicated to helping the world change and knew that I was truly making a difference, I would definitely find time for this app, but some people just don't care."
"I could carve out a couple of minutes every day for this app, especially if I'm passing by places (daily commute) where there's outstanding tasks."
"I like how the app offers small tasks to complete so that I don't have to commit too much of my time. It feels good to help others within a short time."

Design System

As a final step, I created a design system for Voluntopia. It provides context to guide current and future design decisions while serving as a foundation for later iterations.

Reflection

Minor, Yet Mighty Lessons

Research + Reasoning = 🏆

Every design decision and outcome should be grounded in research and reasoning. Even though research can be time-consuming, it’s vital to take the time to do it because it will make design decisions easier.

Communication = Major 🔑

Communication is underrated and it's important to seek alignment on all fronts with team members.

Why x100

This may seem simple but just like communication, critical thinking is overlooked. Throughout this project, I learned how to frame deliverables with clear context and also thought about the "why" behind several decisions.

Design for Accessibility

I learned more about accessibility and took steps towards designing for it. Sure, I still have a long way to go, but I'm glad I didn't completely disregard it. It's important to be mindful of accessibility and in the future, I would like to expand my knowledge on it.