Volunteering in Vancouver: a UX Case Study

UX design is uncharted territory for me as a graphic designer, but it’s an increasingly relevant and necessary skill in the design industry. So this winter, I took the plunge and completed my first UX design course at Red Academy.

The UX Essentials class is a good overview of basic UX principles. The project goal is to create a mid-fidelity prototype solution for a problem that helps Canadians; I chose the topic of solving a problem for non-profit organizations and charities. I’ve been involved with non-profit organizations in the past, from volunteering as a graphic designer for a local organization in Vancouver, to working with larger entities in my previous job, so this was definitely interesting for me.

Defining the Problem

There were plenty of problems to tackle within the non-profit world, so I needed to be specific about my problem space early on:

  • The platform solution has to be an app. An app is not a website, so don’t try to cram too many solutions in.
  • The problem has to have something to do with non-profits and charities.
  • The final deliverable is a mid-fidelity prototype.
  • The course is only five weeks! Pick and choose your battles.

I had to be very specific with my problem space. I also needed to do some research to make sure this was an actual problem. The last thing I wanted was to make something that wasn’t necessary in the first place. So, I turned to my roommate.

My roommate was quite involved in the volunteering and non-profit community. From her past experiences, she mentioned a reoccurring pain point of finding it hard to get enough volunteers each year for the Folk Festival. Was this a unique problem, or was this something the non-profit community struggled with too? I found some stats from Statistics Canada to back this up:

So now I had my defined problem space. This is where my hypothesis started to take shape:

User Surveys

I needed to get a better sense of my intended audience. User surveys is a great way to gather quantitative answers, determine pain points and fill in the gaps about the user. I developed a 10 minute survey in Google Forms that helped answer some of these questions for me:

They are giving you their time and attention. Make sure you respect their time by being clear and professional: state what the survey is for and how long it will take, address any privacy concerns, leave a point of contact for any questions, and thank them for their time.

I received 25 responses and ended up spending a couple of days staring at my bedroom wall, rearranging the data to find meaningful information. Some of the key results I pulled:

A larger percentage of the users don’t have a recent memory of volunteering. If they had the time to help, they would first ask friends or Google as their first resource.

User Interviews

User interviews is more in-depth method to ask “the why” behind the actions, and help create a more empathetic perspective towards your users. After interviewing 5 participants, I gained some very helpful insight to pair with my survey findings:

This was great insight! My users need more transparency and flexibility in order to improve the chances of following through with volunteering.
People have the best ideas! Give your participants opportunities to speak their mind and to be the experts in the conversation.

From the surveys and interviews, I came to a turning point for my app:

My app can’t change someone’s actual volunteer experience, but there’s an opportunity to improve the experience leading up to and after the volunteer shift.

Primary User Persona

Meet Sam and Jonathan; these personas are all of the responses bundled up into one place; they’re the ideal users I’m designing for.

Sam is my primary persona that I’ll always be coming back to: will this solution actually benefit Sam, or is it just a cool function? With this in mind, I started working on a list of features for the MVP.

User Flow

Creating a user flow was definitely a learning curve! Before I jumped into the wireframes, I needed to define the end goal. No frustrating dead ends! I had to make sure every action was a necessary step that would make volunteering sign-up as easy, flexible and transparent as possible.

Get everything out on paper, and then slowly back to organize, reduce and clean up the flow. It’s helpful to get a second pair of eyes to walk through your flow and find any flaws in your logic.

Competitor Analysis

I analyzed a few apps to get a better sense of what good search patterns looked like, and what an good flow for scheduling an event looked like. I looked at: Golden, a very similar search and volunteer app, Give Blood, an app created by Canadian Blood Services, and Etsy, an online shopping app for independent shop owners.

Wireframes

After finalizing the MVP list and user flow, I started creating screens for each of the actions. The class structure didn’t allow for much time to teach us Sketch, but I taught myself some basics because this was a big takeaway I wanted to learn from this class.

The trickiest part of creating these wireframes was deciding how much of the screens to flesh out. Would placeholder copy be enough here? Would the user have enough information on the screen to make their next decision? In this phase, I spent a lot of between InVision and Sketch, testing the user flow and fleshing out just enough to make the scenario seem real.

Below are a sample of my very first set of wireframes!

Some samples of the first set of wireframes. These didn’t work out very well after my first user testing.

Unfortunately, after my first (of 8) user tests, I found a lot of flaws in my wireframes. Simple design decisions led to confusion, doubt, and a poor experience. A few of the bigger issues I discovered:

  1. Task-oriented flow: Because my tester was given a specific task, they found it frustrating that the browse function was the only clearly visible action available. The search function needed to be just as accessible.
  2. Sign-up button: When my tester finally understood that “Count Me In” meant signing up, they hesitated when a second screen popped up asking “Are you sure?” I knew the language and process behind the sign-up step needed to be revisited.
  3. Home button: The upper-left home button was a hard reach. The inVision prototype ended up skipping slides instead of opening up the menu. This led to a realization that the 4 options hidden in that menu could be visualized differently.

I decided to make a solid second version before running a test with my 7 other users. Below is a snippet of how some of my wireframes changed:

In this second version, a clear search bar has been added on the homepage, the home menu options are now at the bottom of the screen, and the sign-up button language is simplified.
Don’t get too attached to your ideas. It’s all an iterative process that’s meant to improve the solution and make life easier for your users.

Usability Testing & Findings

For all 8 of the in-person user tests, I set up the same 4 tasks for my testers to complete. Each task is meant to help me understand whether my prototype was accomplishing what I needed:

My findings to these questions:

  1. Everyone was able to search and sign up for a volunteer event. But when a friend was involved in the planning process, some did not sign up immediately (and instead saved the event information to take back to their friend).
  2. Everyone was able to find the events page, but the event info needed to be more thorough and detailed. Four people was still looking for more preparation details such as equipment needed, or if any training sessions would be necessary.
  3. Two people followed the user flow path I had originally planned out, while 5 people had very different (organic) tactics. Some wanted to search by familiar organizations, while others wanted a more tailored search that accommodated their schedule.

The user testing was such a fun part of the process! Being able to see an idea transformed into a working prototype and seeing everyone’s individual responses to the product was an amazing experience. Here’s my final prototype if you’re curious:

https://invis.io/SPFQWP0W3RZ

Next Steps

Creating the prototype was a lot of fun! But of course the product is far from perfect. In order to improve my original objective (create a scheduling app that allows busy Canadians to sign-up for one-time volunteering events), some of my next steps would be looking at how to further improve these areas:

The five week course at Red Academy gave me lots of opportunities to think critically about my decisions as a designer, design experiences that put the users first, and put my presentation skills to the test. I’m excited to start applying this approach to my work and create more meaningful conversations in the design field.

I’d love to hear from you! Are you a fellow designer thinking about trying out UX? Do you have any thoughts about how I could improve this project? Feel free to email me your thoughts at hello@lan-yan.com.