Able, App for Volunteering

Able is a smartphone app aimed at connecting volunteers with organizations and making volunteering easy and satisfying.

I took a role of UX/UI designer on the team, and was responsible for creating user personas, customer journeys, user flow and both low-fidelity and high-fidelity prototypes within the brand visual guidelines that were provided by other team members.

Roles: research and branding; user personas; customer journey map; user flow; app screens (low-fidelity and high-fidelity); and the final clickable prototype.
Skills: UX research, whiteboarding, SketchApp, Principle, HTML/CSS
Timeframe: 6 weeks
Collaborators: Isabel Blue, Julia Rundberg

01. Description

Able is designed for busy people and people who are not very comfortable with mobile apps.  We aimed to make each screen contain as few choices as possible to minimize complexity.  To make it even less complex and distracting, we chose a very minimal UI and overall app branding.

Able UI - Image of a Screens
Image of onboarding user flow

02. Challenge and objectives

Challenge/Problem:  Create a scalable service that could contribute to social change. We chose to  create a smartphone app that would allow busy or not very tech-savvy people to find volunteer opportunities based on their location, skillset, and schedule.

Project Goals and Objectives: As a team, design a mobile app and supporting deliverables including research, branding, printed materials, video and a landing page. I worked on: research and branding; user personas, customer journey map, user flow, app screens (low-fidelity and high-fidelity),and the final clickable prototype.

Project Background and Description: When we first met as a team to discuss our concept for an app, we had many options in mind but most of them were relying on people’s desire to donate their skills and spare time, e.g. volunteer. We also realized that we all personally knew people who have very valuable skills but are very busy with they daytime jobs and don’t know if there is any easy way to share their skills and knowledge with society. Several people shared their stories with us: someone’s mother was retired and spending her free time on shopping. Someone’s friend spoke a second language and was wondering if he could help immigrants with translation but never had time to pursue it.. That’s how the idea of making a simple app for busy people was born.

03. Process

Step 1. Market research.

We started our research in two directions. First, we published a survey that targeted  our potential users by asking about their volunteer backgrounds and interest in volunteering. With 48 people responding,  the results were very encouraging: A lot of people admitted that a busy schedule makes it hard for them to volunteer but if there was an easier system and access to volunteering, they would do it more frequently. Most of the people also told us that they are definitely interested in volunteering and building their social network via volunteering.

At the same time we also researched other volunteer apps and services that are currently popular. I focused my research on these three: Golden Volunteer, Volunteer Match and Volunteer Connection. I signed up for both Golden Volunteer and Volunteer Match and I also have personal experience of working as a volunteer via other services such as AIESEC,  the world’s largest non-profit youth-run organization (specifically using AIESEC website to find an opportunity and successfully applying for it) and Workaway. Golden Volunteer is a good example of a volunteer app although we have found some different solutions for solving the same UI problems that both Golden Volunteer and Able had.

Step 2. Personas and customer journey whiteboarding.

After our research, as our UX designer,  I created 4 user personas based on our results: potential volunteers; people in need of help; social workers; non-profit organizations. We weighed the pros and cons for different strategies and decided that we won’t allow just any user to post volunteer opportunities because of potential fraud or abuse. Instead we decided to approve social workers or non-profit organizations (by making them submit pictures of their documents and other legal information) to post volunteer opportunities for people in need. It makes AbleApp an interesting UX problem from the point of two user flows: one of the social worker and one of the potential volunteer. As our initial goal was to focus on a simple app for busy people, we decided to focus on the volunteer user flow and experience. We whiteboarded the overall process for all of the publics involved, because we wanted to have a better understanding of how AbleApp actually works.

When this decision was made, we had chosen two personas and I was responsible for creating two customer journeys for them. Some of the pain points are similar to both of them but they start from different backgrounds and have different doubts and touch points with app’s marketing materials.


Step 3. Branding.

With this concept in mind, our team worked on  branding while developing customer journey maps. As the UX designer of our team, I advocated for more accessibility in our design, by changing our color scheme: our original branding idea was to have black type and icons on one of five background colors, but each type of task would always have only one color associated with it. It meant that user would have to look at (and read from) a screen with the same background color for a few minutes. In my opinion, our initial color scheme was too bright for it, so together at our team’s meeting we changed the colors to a different set. While designing the high-fidelity prototype for this app, I spent enough time looking at each screen and at the same background color so I can say that my eyes weren’t tired of the color palette that we ended up choosing.

Step 4. User flow.

While considering  the needs of both of our personas (boomer Helen and millennial Marcus) I used the data from Marcus for our prototype. The flowchart for onboarding was an interesting exercise on error handling and possible decisions that user could make at different points. While working on  the customer journeys I made an assumption that people might have a lot of doubts, especially at the point of background check (which is a whole different UX problem) and I compared this to other apps. While I have not yet found a perfect solution, helping people find as many answers as possible without making them to decide right away, is the right direction.  There are now multiple ways that allow the user to achieve their goal. I would need a lot more user testing, including a real situation when people would really pay for the background check to confirm this.

Step 5. Low-fidelity screens, clickable InVision prototype. Iteration.

Based on this user flow I have created a low-fidelity prototype that eventually included 63 screens (not all of them different, some of them very similar to show specific taskflows in detail). I have created screens for the following taskflows:

  • Onboarding (including test search, creating account, identity check step 1, identity check step 2 and start of background check step 3). I have made some screens for error handling and also gave users opportunity to stop the process at any time with an option to come back and finish it later as an ideal AbleApp experience requires detailed customization).
  • Profile customization: schedule (time when available to volunteer)
  • Profile customization: skills
  • Search for volunteer opportunities
  • Volunteer opportunity: add to favorites, share, apply
  • Favorites, calendar screens

I have tested it on a couple of people (choosing potential users is easy because AbleApp is targeted towards a very broad audience). For example, I had to do two iterations on a schedule task flow. In my first version I had a matrix-type schedule screen that was inspired by what I saw in other apps, for example, Golden.

After user testing I had encountered an issue: my matrix didn’t allow to specify time periods in a very detailed way. I had time ranges (for example, 12pm-6pm, 6pm-12pm etc) but the user asked me what if they want to be available in some different time ranges. I rebuilt the same screen with dropdowns and after the second round of showing it to potential users I simplified the screen even more which was so much closer to our initial goal!

Step 6. High-fidelity screens based on brand guidelines.

When I was working on low-fidelity screen, our branding expert created 2 examples of app visual design based on the brand guidelines that she created. Our user flow consisted of 63 screens, and I have designed a high-fidelity prototype based on two screens that I was given. Of course, I had to make a lot of design decisions myself within our brand styleguide recommendations, and it was another challenge that I really liked about this project. Sometimes it is really hard to keep everything simple and monochromatic but I think we did a nice job of staying close to the initial concept that we had in mind.

Principle Mock-Ups

As an addition to the project, I decided to learn Principle and animate some of the screens with this software. Such details are obviously very important to interaction design, although in case of Able I thought that it should stay rather minimal and smooth.

04. Solution

Able is a smartphone app aimed at connecting volunteers with organizations and making volunteering easy and satisfying. Onboarding includes customization options that allow a high level of personalization for notifications and volunteer postings that are offered to user. It is designed for busy people and people who are not very comfortable with mobile apps.  

We aimed to make each screen contain as few choices as possible to minimize complexity. Most of the screens have only one prompt for a user. To make it even less complex and distracting, we chose a very minimal UI and overall app branding.

See InVision prototype.

Overall I found this project to be a great educational experience. I think we almost achieved our goal, but there is still a lot of room for improvement. Also the social worker’s user flow has very different challenges to offer which could be very interesting from the perspective of UX designer.