Close
Type at least 1 character to search
Back to top
[movedo_title heading_tag=”h1″ heading=”h1″]

Volunteering doesn’t have to be one-size-fits-all.

[/movedo_title]

[movedo_empty_space][movedo_single_image image=”1186″]
[movedo_single_image image=”1207″]
[movedo_empty_space height_multiplier=”3x”][movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

Speakable promote social engagement through technology.

[/movedo_title][movedo_empty_space]

For instance, their Action Button allows people to instantly take action (e.g. signing a petition, making a donation) right from an article they’re reading.
[movedo_title heading_tag=”h2″ heading=”h1″ animation=”grve-fade-in” el_class=”serif-text”]

Our mission – creating Speakable’s next product.

[/movedo_title][movedo_empty_space height_multiplier=”2x”]

ROLE

UX researcher, interaction designer & visual designer. In a team of 3 for research, solo designer afterward (class project).

 

OUTPUT

interview transcripts and synthesis, empathy maps, persona cards, clickable wireframes, style guide, high-fidelity mock-ups, pitch deck.

 

[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in” animation_delay=”100″ animation_duration=”fast”]We started by talking to people.[/movedo_title][movedo_empty_space]
We ran user interviews to understand how people went about volunteering and donating, what motivated them, and their overall sentiment around it. From there, we used empathy maps to capture, categorize and prioritize user needs.
[movedo_empty_space height_multiplier=”3x”]
[movedo_single_image image_type=”image-popup” image=”375″ grayscale_effect=”grayscale-image” shadow=”small” el_class=”border-column”]
[movedo_single_image image_type=”image-popup” image=”376″ grayscale_effect=”grayscale-image” shadow=”small” el_class=”border-column”]
[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

Conveying the essence of our “personas”.

[/movedo_title]

[movedo_empty_space]
The empathy maps helped me outline user profiles to refer to through ideation and design. To support that, I went for a layout that communicates the essence of each persona at a glance.
[movedo_single_image image=”377″ el_class=”border-column”]
[movedo_single_image image=”378″ el_class=”border-column”]
[movedo_empty_space height_multiplier=”2x”]
[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

The research validated some of our initial hunches.

[/movedo_title]

[movedo_empty_space][movedo_title heading_tag=”h4″ heading=”h4″]

Making a donation or signing up to volunteer online is generally tedious

[/movedo_title]

These forms often count many fields, and sometimes request information users might not be willing to share at that point. Plus, a lot of us dread having their inbox inundated with newsletters after signing up.

[movedo_empty_space][movedo_title heading_tag=”h4″ heading=”h4″]

People want to see what impact their donation truly makes

[/movedo_title]

Allowing users to navigate by “cause”, as on the sketches above (not by NGO) was a good call- we had noted that donation forms might be too long, tedious, repetitive – and that indeed appeared in the research.

[movedo_empty_space][movedo_title heading_tag=”h4″ heading=”h4″]

Making an impact makes us feel really good

[/movedo_title]

Donating or volunteering makes people feel good about their action, their impact in the world and themselves.

[movedo_empty_space height_multiplier=”2x”]
[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

What we hadn’t considered, or had incorrectly assessed.

[/movedo_title]

[movedo_empty_space height_multiplier=”2x”][movedo_title heading_tag=”h4″ heading=”h4″]

Alignment between personal skills + tasks

[/movedo_title]

If a feeling of accord between one’s skills and their tasks when volunteering, how about a platform that matches volunteers with events based on their skills and interests?

[movedo_empty_space][movedo_title heading_tag=”h4″ heading=”h4″]

Organizer’s stress

[/movedo_title]

We focused on the volunteer’s perspective, but volunteering events could benefit from facilitation on the organizer’s side as well.

[movedo_empty_space][movedo_title heading_tag=”h4″ heading=”h4″]

Room to self-manage

[/movedo_title]

Giving volunteers direction during events shouldn’t mean they are micro-managed.

[movedo_title heading_tag=”h2″ heading=”h1″ animation=”grve-fade-in”]The key needs our research revealed.[/movedo_title]
[movedo_empty_space height_multiplier=”2x”]
[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

#1

[/movedo_title][movedo_title heading_tag=”h4″ heading=”h4″]

Clear visibility over how donations are used

[/movedo_title]

What are donations contributing towards, and what impact are they making (e.g. one month of tuition for a young girl to learn how to code)?

[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

#2

[/movedo_title][movedo_title heading_tag=”h4″ heading=”h4″]

More alignment between volunteering opportunities + volunteers

[/movedo_title]

It’s much more motivating and exciting to go volunteer when you know that: 1) it supports a cause that is important to you, 2) your specific skill set is needed (versus just anyone with a pulse). Right? It also makes it less tempting for volunteers to bail on their commitment.

[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

#3

[/movedo_title][movedo_title heading_tag=”h4″ heading=”h4″]

A way for NGO’s to specify what they need

[/movedo_title]

To enable the previous points, NGOs need a way to specify what they need: be it certain skills for volunteering events, or target amounts of money for donations.

[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

Translating these needs into product features.

[/movedo_title][movedo_empty_space]

With good starting points from the interviews, I hand-sketched options in quick iterations. As these stabilized, I moved them to Sketch and iterated on interaction, and how the different components would work together.
[movedo_single_image image=”1338″]
[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]Styling the thing.[/movedo_title][movedo_empty_space]
[movedo_single_image image=”1189″ el_class=”border-column”]
I used  Speakable’s primary colors and tone as starting points to create a visual brand that feels like the Action Button’s sister: related, but different.
[movedo_single_image image=”1193″ el_class=”border-column”]
After applying the new styling to my wireframes, and adjusting where necessary, I finalized the key screens of the flow.
[movedo_single_image image=”1329″]

Tell us what matters to you.

Tell us where you shine.

[movedo_single_image image=”1326″]
[movedo_single_image image=”1327″]

We’ll show you volunteering opportunities that are meaningful to you.

You go out there and change the world.

[movedo_single_image image=”1336″]
[movedo_title heading_tag=”h2″ heading=”h2″ animation=”grve-fade-in”]

Packaging + pitching to Speakable’s founder

[/movedo_title][movedo_empty_space]

Packaging the design assets and the story behind my feature into a 5 minutes pitch to Speakable’s founder and CEO, Jordan Hewson.
[movedo_empty_space height_multiplier=”3x”][movedo_title heading_tag=”h4″ heading=”h4″]

Feedback

[/movedo_title]

Jordan had amazing feedback to share. For instance, she loved the donation tracker idea. But she also challenged it – how about times when donations go towards NGO’s running costs? Will users get the same feeling of making a difference than if the money had gone towards buying blankets for the homeless people of NY? She also really picked up on the matching of people and causes through skills.

[movedo_empty_space][movedo_title heading_tag=”h4″ heading=”h4″]

What next?

[/movedo_title]

My classmates and I all shared our artifacts and recommendations with Speakable to support future ideations. I’m genuinely excited to see what they come up with in the near future. And who knows, some of our features might be in there!