Research on Volunteering

We needed to get a better feel for Jessica. We looked into various volunteering organizations, and the people that participate in them. None of the designers really had a clear idea about the state of volunteering in the country. This research was necessary to put us on the right track for the challenge.

The takeaways from the volunteering research

• The amount of hours contributed to volunteering in the United States is on the decline. 

• Advances in technology and the widespread use of smartphones for daily tasks offer a unique opportunity for volunteer organizations to capture and engage mobile users.

• Microvolunteering tasks lend themselves to a wide variety of participants because they do not require specific skills, are quick to complete and, in some cases, many can be accomplished virtually. 

• We found that volunteers are more likely to participate in online volunteering if they are offered some type of reward. This gives them a sense of accomplishment and shows how their efforts are making an impact. 

• Those who are more extrinsically motivated can be encouraged toward taking action through gamification and the resulting rewards can offer “bragging rights” about their volunteer efforts.

We did visual analysis of a number of direct and indirect competitors

From our research, we decided to look into three competitors that worked with online volunteering, Chip’N, Nano, and Brightest, and two other indirect competitors, Duo Lingo and Fitbit, that offer a similar experience in terms of app use, but in slightly different markets.

• All of the apps we researched all had a modern feel and used bright colors to convey a sense of energy. 
• A majority of the apps used photographs to show examples of volunteering efforts. 
• Most of the apps used generous whitespace resulting in good content legibility. 
• The apps used a variety of cards, grids, and lists, and tiles to display information. 

In other words, we could do just about anything we wanted to do, just as long as it fit Jessica’s needs. 

We analyzed the research, and taking Jessica into account, we came up with a set of design principles.

Positive Reinforcement. We want to give users positive feedback after the completion of a volunteer task. This may be accomplished through engaging microinteractions or progress indicators. 

Spotlight on the Task. Users want to know what they are signing up for at a glance, so screens with volunteer opportunities on them will highlight the most useful information regarding the volunteer task. 

Keep it Relevant. Users receive prioritized lists of volunteer opportunities that align with their specific time availability, and location (as defined in their profile or during onboarding). Prioritization will be shown by typographical and color hierarchy.

My Design Explorations

My first step was to start thinking about Voluntopia in visual ways, taking into account the volunteering data, our analysis of the competition, the design principles, and of course, Jessica herself. My goal for building the application was to make it easy to use, visually appealing, and something that she would actually trust and be encouraged through. I broke the design explorations down into two parts. Part one is visual feelings and impressions: what I think might reach Jessica and other users. I reviewed color combinations and images, as well as concepts that I thought might work.

Part one: Designed before user testing

Moodboards

Moodboards are all about feelings. They’re sketchpads, scrapbooks and idea holders rolled into one. They’re helpful to gather things into one place, to sort and combine, and start the creative process. The moodboards were not tested with users, but reviewed in-house. We had just a couple of days to generate them so they’re rough. We (I?) generated three moodboards. All three boards had merit. Any of them could have been taken further. Bits and pieces where tweaked before moving into the style tile phase, but with just a couple of days to generate them, they would still be somewhat rough when presented to the user testers.

Part two: User testing style tiles

Style Tiles: User Tested

I iterated the moodboards, adding in actual created elements and not just the found ones. All of them tested well. I didn’t receive any really negative comments about the designs or colors. I did receive some negative comments about the readability of the smaller text, which I altered between user tests to see if I would still get those comments. Further testing eliminated those comments. These are the revised boards.

People generally had a strong opinion about the number 1, most loved it, but thought it might be too much. It was “fun.” The colors and the strong “pop art” feel went over well. It was hard to figure out what to do with the gaming aspect of the app, so I wasn’t unhappy not taking this one further. The second one was liked for the photos and how clean it was. The photos gave a good sense of helping and volunteering. It had a warmth to it, mostly because of the little kid and the firemen, and the hands forming the heart. Some of these elements made it into the final design, but this was ultimately passed over in favor of the third one.

The third was a hit for the illustrations that I had cobbled together. It would lead to me creating all the illustrations for the app, and figuring out a system for building the “city” in terms of the gaming aspect. It had warm colors and a strong texture to the background. The color palette was bright and friendly. People responded well to the blue. They also responded well to the images and the icons. I felt that this was the one that had the most potential. The illustrations did end up taking on more of a focus for the application. To hear more about the logo design and illustrations, please check out the case study for Voluntopia’s logo design.

My favorite user quote to come out of the testing was “I want this app to be real!”  

High-fidelity: Static Screens User Tested (V1)

The hi-fi screens where designed in pieces and parts, I was refining the logo, building the other parts of the “city”, and creating the map all at the same time. Some of the screens used the images given to me from the UX team. I was more concerned with the colors and feel for the screens and less about what the other images would be. I thought that as long as the final images matched for style, those parts would eventually come together. 

Feedback was generally positive for these screens. Some issues I didn’t take into account at this stage was conforming to the accepted norm of using the Facebook blue for the screen and the normal iOS architecture for some of the other elements. The entire thing read as a bit too dark. I needed to lighten things up some. I could see that the supplied art wasn’t meshing with the created art, but as I was going to change it for the final, it would do for the user testing.

I received good feedback on these screens.
The users used words like “Friendly” “Fun” “Engaging” “Inviting” “Appealing” “Attractive” Four out of the seven people
tested said it was even “Easy to use.” 

High-fidelity: Prototype, with Microinteractions (V2)

For the final screens I got rid of the orange. I brightened the entire thing by taking out much of the blue background. I rounded the edges on things, softening it up some more. The finished illustrations really started to tie things together. The green became my action color. It’s bright and stands out against the tan of the background. The icons for the navigation bar where simplified, and the black that I was using for the type was traded in for a deep red, which added some warmth. I introduced some other colors for the various categories of the volunteering experience. White was used on the cards to make the stand out against the tan background. Little pops of red added some focal points throughout. Here are the final versions of the screens.

Voluntopia, a city that Jessica would enjoy visiting!

The microinteractions and animations made the city come alive. The city builds itself. From a lonely tree, to a little town, to towering skyscrapers with the Voluntopia blimp-force making appearances over all the screens. Click on the phone to see then in action.

Jessica can use the app to help in all her volunteering efforts. She can clearly find and define the events she wants to participate in. She can see the tasks and understand the directions. She knows when things are completed. Joining with her friends, she can get that sense of community that she wants while making an impact. She can use the app to avoid the things that frustrated her. She can now schedule her volunteer activities to fit her lifestyle, advance her leadership skills, and gain the sense of community she desires.