Product designer
stm hero.png
 

PROJECT OVERVIEW

Eliminating confusion and distrust for donating money in a 2-week sprint

 
 

CLIENT

ShareTheMeal is a crowdfunding smartphone application that enables users to make small donations to specific World Food Program projects.

ROLE

Individual Product Designer (No Affiliation)

TIMELINE

2weeks

PLATFORM

iOS Native

 
 
 

The Problem

How can we build trust?

The unclear hierarchy of information and disorganized placement of call to action in the app have caused significant friction and lack of trust when users try to donate.

 
 

0

out of 5 people were able to finish a donation without  questions

1

out of 5 people were able to understand donating destinations

1

out of 5 people were able to understand monthly donation

 
 
 

The Solution

Clarity builds trust. Trust leads to action.

  • Help users create mental maps of the donating destinations by replacing redundant pictures and CTAs.

  • Clear confusion on monthly donation project by redesigning the information architecture and reducing redundancy

 
 
 

DELIVERABLES & RESULTS

Fighting against global hunger with absolute confidence

 
final 3 screens.png
 
number.png
 
 
 

CONTEXT

Breaking trust is easy. So is building it.

After several rounds of testings, we have learned an app is the most convenient way to donate, but not the most assuring media to donate money, therefore

  • Trust is the most important element to initiate donations in this case.

  • Having clarity is found to be the easiest way to generate trust.

 

SEARCH ITERATIONS

Painful User experience = Painful Business

After guerrilla testing, synthesizing, and prioritizing top business needs and user needs, 2 main pain points have been narrowed down.

 
 
stm bizvuser.png
 
 
 

Pain Point 1:

Where did my money go?

 
Red circles show where the same donation projects appeared with slightly different names

Red circles show where the same donation projects appeared with slightly different names

 
 

Same donation projects have appeared in different tabs with slightly different names in different tabs. This causes users’ confusion on the donating destinations of their own donations.

 

IDEATION: Walking into the map and knowing where you are donating

 
PP1.1.png
 

Showing users where the donating destinations are on a clear map before go into donation details will eliminate confusion and increase confidence in initiating donations.

ITERATIONS: Building Clarity—Location

 
A map with clear information before users dive deep into specific projects gives users assurance to their donation destinations.

A map with clear information before users dive deep into specific projects gives users assurance to their donation destinations.

 
 

FINAL DESIGN

BEFORE

 
PP1 before.png

AFTER

STM-PP1.gif
 
 

Pain Point 2:

CTA = Calling Too much Action

 
 
All circles are CTAs in different types. Red circles are main CTAs; Yellow circles are monthly donations CTAs.

All circles are CTAs in different types. Red circles are main CTAs; Yellow circles are monthly donations CTAs.

 
 

In the first two tabs, there are repetitive CTAs to redundant projects. The CTAs for monthly donation program (yellow circles) are even misplaced in different levels in the information architecture as well.

ITERATIONS: Building Clarity —- CTA

 
The main CTA mixed in the bottom bar was changed to a single floating button on the donating project information without other insignificant options. This reduces the distraction for users and is more likely to initiate action.

The main CTA mixed in the bottom bar was changed to a single floating button on the donating project information without other insignificant options. This reduces the distraction for users and is more likely to initiate action.

 
 

FINAL DESIGN

BEFORE

 
PP2 before.png

AFTER

STM-PP2.gif
 

RECAP

Building trust by trimming off the extra

BEFORE

PP2 Flow.png

AFTER

stm sfter flow.png
 

Initiating donations is difficult enough. That is why we should be mindful about the steps users have to take to make the decision. The decisions are made based on trust, and having clarity is the easiest way to build trust in a palm-size device.

 

PROTOTYPE

Trust instilled donation made simple

In the original app, there is too much redundancy that causes confusion. The disorganized information hierarchy also breaks the trust between users and the app/organization. By building clarity and consistency throughout the app, I was able to establish trust between the users and the product which, in turn, accelerates the donating process.

 
proto.gif
 

Validation Test

OK. OK. Sure!

After the final round of usability testing with complete new users, what I have heard the most is “OK. OK. Sure!”. This means the users are using the least cognitive effort to go through the app and finish their donation.

 
 
number.png
 
 
 

RETROSPECTIVE

Test. Test. Test

 
 
Me, pretending not afraid of talking to strangers.

Me, pretending not afraid of talking to strangers.

FACT: People are nice (mostly). Guerilla tests with strangers is where I got my most insights from for the project. I did a few more tests than I planned simply because the people who talked to me were very nice. I was also severely dehydrated from all the nervous sweating.

 
 

You can’t save the whole world (yet), so focus (now).

Like all designers, we start re-designing with good intentions and great ambition to help. However, it is very easy to be lost in the weed when it is an individual project and there is no one pulling you out. So focus on the problems that you are capable to solve throughout the project is key.

Also me, putting together the affinity map.

Also me, putting together the affinity map.