General Assembly provided an opportunity to study the UX Design process which culminated in the ideation, design and prototyping of an app dedicated to mobile philanthropy.

The Problem: How do you make philanthropy mobile?

With millions of apps competing for users’ dollars, it seems there should be an app that makes giving back convenient, easy and gratifying.

But what does the user want?
For a designer, this is the most important question to ask and find answers to.

Discovery: Know the client, know the product

Doing the homework is fundamental.

Preparing business model canvases help focus what the attention should be on.

Understanding what the minimum viable product must be leads to more questions.

Discovery: Know the competition

Doing a competitive analysis will help to distinguish just what it is that’s being proposed to the user that they can’t get anywhere else.

Discovery: Know the user

Researching the market through surveys and interviews helps to elucidate what the users’ tendencies and desires are.

Formulating personas aid in further distilling the particularities of the user, pinpointing the focus on what the design should include or eliminate.

The Cause user would be a busy urbanite giver who is informed about current issues and feels that trust is important when making a charitable donation.

Design: The Flow

User flows illustrate what journey the design is taking the user on.

Here the user’s “happy path” is shown. How many screens and action prompts will the user encounter in order to make a donation?

It’s a treasure map of sorts.

Design: Lo-Fi Sketches

Using the “happy path” flow as a guide, lo-fi wireframe sketches begin to zone out the interface.

Design: Card Sort

Performing a card sort with users helps formulate the information architecture of the app.

What makes sense for the user? How can the information be organized to make it convenient, easy and gratifying for the user to make a donation?

Design: Navigation

Once the architecture is sorted, navigation sketches show how the sections will be organized. Taxonomy and hierarchy become meaningful. Everything must have a name and place.

Design: Wireframing

Hi-fi wireframes give a more concrete sense of what Cause will look like and how the user will interact with the interface.

Design: Prototyping

Wireframes turn into a working prototype where the user interface is developed further and interactive elements are placed within the front-end to ensure a smooth experience.


Valuation: Testing to get it right

Testing the initial prototype of Cause revealed that users wanted more information about the charity they might donate to, if it was possible to donate amounts other than the designated ones, and that the overall speed of the experience left an underwhelming effect.

Photos were important but it was more important to give users the opportunity for more interaction. This translated into asking a question at the start of the experience that the user could answer through their generosity.

Valuation: User empathy

Further testing revealed that users wanted three things: an experience that was interactive, substantial and memorable. Calibrating the design in order to achieve these was necessary.

Above all, designing to delight was the imperative.

Test Version 1.1