top of page

MyTree

UX DESIGN: EMOTIONAL EMPATHY

An emotional design solution to help and encourage users plant trees.


 


PROJECT OVERVIEW


Problem Context

  • Many city people struggle to find space and time for planting trees.

  • Trees could be planted by farmers/volunteers in villages while city people can support it through donations.

  • There are in fact a few sites which perform the same functionality but the users complain of non engaging, commerce-like experience to an emotional and noble cause.


Solution



PROCESS


Research


To generate insights, I contacted people from a diverse sets of genders and communities.

  • I grouped them into three broad categories:

  • A set of questionnaire was used to conduct quantitative research over them.

  • I talked to a few of them using telephonic interviews to conduct qualitative research.

  • I tried to therefore, get to the why and not just what and how of the problem.


Empathize & Define

  • Defining the problem statement

To enable remote tree plantation while keeping the emotional experience engaging and encouraging more people to plant trees.

  • User Point of Views (POV) to capture needs and expectations

    1. To plant trees by investing little time.

    2. To know where my tree is being planted.

    3. To see that my money is used fairly.

    4. To convince my friends to plant trees.

  • "How do we" questions

    1. How do we see that the user trusts us?

    2. How do we see that people enjoy their experience of planting trees?

    3. How do we make most information available on the landing page itself while keeping the design minimal?

    4. How do we get users to raise a fund?

  • User personas Two primary users:

1. Landed on the site through a google search.


2. Word of mouth: already aware of the context.


  • User journey maps



Ideate

  • Sketches of concepts and ideas were drawn.


  • User flow diagram to illustrate the user flow within the application


  • Low fidelity wireframes



Prototype


A high fidelity prototype was iterated several times over user testing cycles.


**Prototype has been displayed in the solution section of this page.**



Testing

  • Used low-fidelity prototypes to feature test animation concepts.

  • Observed a few users as they tried the high-fi prototype in person.

  • Remote testing through Maze:

  • Conducted A/B tests on animation features of the site over different iterations.

  • Took senior designers' feedback using the same mediums and collected heuristic evaluations to iterate prototype over multiple cycles:



SOME DESIGN DECISIONS


Emotional Empathy and gamification combined

Users can experience the joy of planting a tree, not just donating the amount for one.




Establishing Trust



Intension based assistance

As the priority for a donation page is to give more information first in order to establish trust, I put the knowledge related links on the left according to natural eye movement sequence.



Interact with the prototype


If you wish to see this in larger view, click here.

Or see the website journey as a user through this short video:



REFLECTION OVER LEARNING

  • Emotional gratification and gamification leads to a more fulfilling user experience.

  • Further improvement of the solution is possible by A/B testing the time frame of animation for different users.

  • Animation should be polished through animation software. This solution focuses on forming a fundamental conceptual solution.

  • Qualitative user research gave more direct insight on the interaction design part of the application.

  • Low fidelity prototype testing is important for feature testing as users may now focus on areas that are not being tested in a high-fi prototype test.

  • Sometimes isolated features may give positive test results but may not perform ideally when put together hence affirming the importance of high fidelity tests.

 

Thank you for reading,

Have a nice day🙂 !

 

bottom of page