Introduction

Despite living in the “city that never sleeps”, many New Yorkers still want to find the time to give back to their community. Enter DoGoodr, an app that helps New Yorkers help each other.

DoGoodr is an aspirational product that I built in 2019 while studying UXDesign at General Assembly in New York City.

Role: end-to-end UX Design including User Research & Testing, Data Synthesis, UI Design & Prototyping, Usability Testing

Tools: Sketch, Adobe CC: Illustrator/Photoshop/Indesign, Invision, Craft, OptimalWorkshop

Research

“If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.”
-Albert Einstein

In order to understand what was needed by users, I began by examining the problem. I conducted a quick screening poll of 18 peers about their past volunteer experiences, their methods and feelings while doing so.

That allowed me to come up with some insights about the subject and a direction for my research. I started to formulate hypotheses around the subject.

How might we make it easier for people to sign up for volunteer projects in their community?
How might we increase the number of volunteers signing up for projects?
How might we make it easier for volunteers to sign up for projects on a mobile device?
How might we make it easier for volunteers cancel a project/manage their schedule on a mobile device?
How might we make it easier for volunteers to sign up with their friends for a projects?
How might we allow volunteers to share their projects on social media, encouraging friends to sign up with them?

From those questions, I wrote a preliminary problem statement

Potential volunteers need a way to sign up for volunteer projects on the go because it comes up in conversation when out with friends and they enjoy doing community service with them.

User Interviews

After creating a research guide with clear goals and discussion guide questions, I interviewed 5 users: all busy, working NYC residents who had a desire to volunteer in their free time. All interviewees had volunteered in the past and were looking forward to more opportunities.

Data synthesis

Method: Affinity Mapping

INSIGHTS from User Interviews

5 different motivations
5 different search criteria priorities
5 different environments (on mass transit on a mobile phone, at work on a desktop computer, at home on a phone or tablet)
5 users expressed frustration with the search feature
4 users wanted more variety in project choices

Problem Statement

From these insights I revised and simplified my problem statement.

In NYC, potential volunteers have a hard time finding a program in their community to participate in.

Personas

Two personas were created to ensure any solution created would be based on the needs and goals of users. A complex, well-defined persona was kept top of mind to empathize with and understand the user:
Reena, a 38 year old physician’s assistant, and Manny, a 28 year old human resource specialist.

Exploratory Analysis

Method: Competitive Analysis, Feature Prioritization Matrix

My next step was to look at the other options available to users. This was visualized in a Competitive Analysis Table.
Using a Feature Prioritization Matrix, considering High/Low Impact and Expected/Unexpected Features, I was able to choose features I would include in my MVP, the minimum viable product.

Information Architecture

Method: Open Card Sort
Tools: Optimal workshop.

From there, I worked on the Information Architecture with a remote open card sort. The results informed arrangement of the content in the product’s site map.

Ideation and Usability Testing:

Methods: User Interface Design, Rapid Prototyping, Wireframes, Interactive Prototypes, Usability Testing

Tools: Sketch, Illustrator CC, Photoshop CC, Invision+Craft, Rainbow Spreadsheet, paper & pencil

Wireframes, Prototypes and Usability Tests

From my User Interview data, I decided to tackle a search flow for my users. In order to make the search easier, I created a more graphics heavy Visual (UI) Design. I began by sketching out some ideas for icons to replace the text used on competitor products, and drafted rough paper wireframes for the key screens.

The low fidelity Wireframes were created in black and white using Sketch with their Craft plugin. This allowed me to begin the process of testing my hypothesis that users wanted a quick way to search for volunteer projects. I used Invision to make a clickable Interactive Prototype for my usability tests.

After creating a User Scenario to test a sample task flow, I tested this low-fi prototype in person with one user and I discovered some revisions to the content that I should make going into the next step.

I next created medium fidelity Wireframes with Sketch; adding color and graphics from the early stages of visual design exploration. Graphics and icons were finessed using Adobe Illustrator CC.

With a revised User Scenario and sample task, I tested an interactive prototype with 8 users; 3 of whom were in my target group.

Usability Tests results showed some serious usability issues with my product. I used a Rainbow Spreadsheet to look for patterns in the research:

Results and insights from usability tests:
14 tests, 5 users from target group
• 9 out of 12 missed “Right Now” search
• 9 out of 12 missed “Time” search option
• 12 out of 12 missed “Subway” search option

Iteration and (more) Usability Testing

Iteration 01
In order to differentiate “Right Now” from “Search with Filters”, I added Onboarding Screens and an “Info” popup.
“Time” and “Subway” search options, which were almost completely ignored during testing, were made larger. Further tests showed the size change still did not make the options prominent enough. My next solution was to put both options on the same screen resulting in a longer scroll on the mobile version, something I had previously assumed to be a point of frustration.
I also added more color to give clear visual clues and “Back” buttons and “Active Filters” to facilitate the navigation.

Results from Iteration 01
Usability tests were conducted with 2 final users and successful results were shown. These users were able to complete the task easily and enjoyed the UI of the product. The longer scroll on mobile was not a pain point for mobile users, and my assumption was corrected. However, I noted 2 comments from these users and decided to make some final revisions.

Iteration 02
One user told me that the “Search this weekend” search would be understood easier with clearer language. I renamed that filer to “Search right now” and added a ”Featured Projects” filter for monthly themed projects, a feature that was popular with other competitors.
Both of my final test users also pointed out that most NYC residents would use a native map app on their phone to find travel directions. Since searching by “Subway Line” was redundant, I changed that search filter to “Search by neighborhood” to narrow the search results.

Results from Iteration 02
Informal usability tests were conducted on Iteration 02 with 3 additional users and results were successful. These users were also able to complete the task and expressed that “Search by neighborhood” filter was a logical choice for local residents. All 3 expressed delight at the visual map for searching by NYC borough.

View a video of the Invision Prototype

User Task: Search for and sign up for a volunteer project helping school kids with their homework on a Tuesday evening in the Upper West Side.

Next steps

Build out remaining sections of the website

Test additional user flows with interactive prototypes with different user groups

Design a responsive layout for desktop and mobile