Client: Indigo

Role: UX research and design

The Challenge

Americans gave an estimated $358.38 billion to charity in 2014 which marked the fifth year in a row where giving went up. 9.5% of the charitable giving was done through an online platform, with a little over 6.5% of the donations being made through a smartphone or tablet browser. That means $23.3 billion was donated through a mobile device, yet there is no well established mobile application that makes donating through smart devices simple. We were challenged with creating high fidelity wireframes and a clickable prototype in a 15 day period that consisted of three design sprints.

SPRINT 1

The Approach

Indigo, a company looking to create a mobile application to create a place where nonprofits can be listed in one place and donated to easily, came to us for help. They needed:

 • An easy to navigate interface        

 • A way to seamlessly donate           

 • A three click check-out

 • A way to motivate users to reengage with the app

 • A place to incorporate fundraising

At the time of kickoff, Indigo had three designs, two of which were active. The applications looked and functioned completely differently on Android vs iOs, and they had a third set of incomplete wireframes.

In researching on boarding patterns and ways that popular apps list search results, I was able to ascertain that: 

1. On-boarding isn’t popular.

2. Fundraising is a major trend.

3. The ability to share campaigns or causes was almost unanimous among competitors.

4. Campaigns needed to be incorporated into the app.

5. Users needed the option to share the campaigns on social media.

Through heuristic evaluations and analysis, we wrote the problem statement.

“Indigo needs a seamless donation process. Indigo needs to provide motivation for the users to return to the app in order to increase donations. Some assumptions to improve the donation process are an updated on-boarding process, payment method, and donation tracking system.”

Whiteboard session 

I facilitated and designed a whiteboard brainstorming session with the team and the stakeholders to delve deeper into their assumptions and needs. We developed user types and tried to find ways to make these users open the app. We needed users to initially engage with, and then return to the app. We did two minute sketch sprints to discover what solutions the stakeholders had in mind. Each member picked a screen to sketch, and had two minutes to redesign it.

The whiteboarding session was very successful, and we gained new insights through the process. The stakeholders were very engaged and excited to be a part of the process.

Armed with this knowledge, we wrote an interview script and began to recruit interview participants.

Interviews: What motivates you to donate?

We interviewed seven people. Three interviewees were current app users, three were frequent donors, and one was an expert in the nonprofit field. 

From the frequent donors, we were trying to understand what motivates them to donate and by what means they do so. We asked what made a nonprofit trustworthy and what made an app trustworthy. We inquired about how they felt while they were donating, if they knew how their money was being used, and if they would share their donations on social media.

From the current users of the app, we wanted to know the likes and dislikes. A surprising amount of what the users told us about their frustrations with the app weren’t what the stakeholders had prioritized. Indigo was priding itself on the easy to locate tax records, while the users were weren’t able to find them. Although they liked that their payment information was saved, and there was no need to re-enter it upon every donation, they were frustrated by needing to sign in every time they opened the app. 

There were several trends that we were able to find from the affinity diagram. Both the expert, current users, and frequent donors had very clear frustrations and motivations.

Based on this information, we wrote a new problem statement that would guide our design principles.

PROBLEM STATEMENT

“Indigo donors need a story, connection and social engagement in order to feel confident that their donations are being used in a transparent and trustworthy way. Indigo needs the donation process to be seamless and have reasons for the user to return.”

We then drew up proto-personas based on the information we gathered. The personas drove our design decisions for the rest of the project. They were an important part of the process, because they were representations of the users we were serving.

SPRINT 2

After the research phase, the team began the design phase. Wanting to explore every idea possible, we each sketched separately. I knew that I wanted to create an easy to use interface with a quick pay option. I needed a way to sort nonprofits by category and by distance, and to add a campaign section. Pulling inspiration from crowdfunding apps and the best features from the competitive analysis, I was able to create a flow that addressed these issues. After a day of sketching, we reconvened to share our ideas.

While having unique ideas about some of the features in the application, the heart of each design seemed to be similar. Wanting to explore our concepts further, and refine the details, we each turned our sketches into digital wireframes. After we each completed an entire flow of wireframes, we created three clickable prototypes in InVision.

After conducting usability tests with several potential users,  we knew what to change in the next iteration, and which features were the favorite in each version.

We then had our second meeting with our clients. They were again pleased with the results. After meeting with them, we decided that our ideas were similar enough that we should combine them and create one prototype and set of wireframes as the final deliverable to the clients

SPRINT 3

Revisiting the notes from usability testing, key features we needed to include were:

1. Set amounts to tap and donate rather than just a place to manually enter a number.

2. A way to distinguish featured nonprofits.

3. A news feed with updates on the progress of campaigns and the activities of nonprofits.

4. How nonprofits and campaigns would be automatically populated upon opening the app.

5. Distinct ways to search, filter, and sort.

6. A profile with receipts and saved payment info.

7. A way to incorporate the quickpay button.

Incorporating the list of needs, we combined our designs into one prototype, andput it through a round of user testing. The quickpay button was placed on the favorites screen, ensuring it would be available to existing users. Placing a flag on featured nonprofits distinguished them from the rest, and a banner at the top of the home screen to highlighted a cause (i.e. Breast Cancer Awareness Month.) The user profile page contained a chart that showed donations made in each month. Creating a link on the receipt page allowed users to access their receipts by email.

We then had a client meeting and delivered the final product. They were extremely pleased with the product, and gave very positive feedback. We had some ideas for future considerations, including a possible chat feature for nonprofits to connect with each other and with donors.

Prototype:     https://invis.io/R25WWYUJB  (Since the prototype, the company has legally changed their name.

CONCLUSION

I created the quickpay button with the users in mind. The quickpay button was seen as extremely useful and the client expressed that it was a great solution to a business and user pain point, and will definitely be implemented in the final product. While I was a major contributor to the final project as a whole, the quickpay button was my most unique contribution. 

Building a mobile app for nonprofits was a learning experience. The platform was based on an e-commerce model, but wasn’t selling anything. This unique problem required critical thinking to tackle. Facilitating the whiteboarding session with the stakeholders was a first time experience, but a tool I'll use often.