BeCauses Dedicated Mobile App and Responsive Website

As part of my Google UX Designer certification course I was tasked with creating a mobile app and responsive website for social good.  I worked on the design from concept to completion.

The Product:  BeCauses is a website with a dedicated mobile app that helps users find, research, and support charity organizations that address social issues important to them. 

The Problem: We noticed that many people have strong beliefs regarding social issues but are reticent to act on them because they lack resources to properly research and learn about organizations that are in line with their beliefs and understand how to support their work.

The Goal: Design a website with a dedicated mobile app that will allow users to browse charity organizations by cause, conduct research on these organizations, and donate or volunteer if the organization is in line with their beliefs.  

Time Frame: 6  Weeks

I initially conducted a competitive audit of 2 charity finder websites; a direct competitor and the other an indirect. I then proceeded  to conduct user interviews with people between the ages of 18-40 that have previously donated or volunteered at non-profit organizations or made postings on social media about social issues in the past year.  These interviews were then used to create empathy maps  to better understand the user and their pain points.  The user group dispelled many of my initial assumptions.  The user group was more well versed in some aspects of charities organizations such as fund usage. The user group also wanted to be able to see and understand how their contributions would be used in a charity organization.

Dedicated Mobile App:

Low Fidelity Prototypes:

Low fidelity prototypes were created in Adobe XD based on the paper wireframing.  These were meant to address some of the user pain points identified during the research portion of this project.  

*The interactive low fidelity prototype can be viewed here.

I conducted two rounds of usability testing.  The findings from the first study were used to guide my design from wireframe to mockup.  The second study used a high fidelity prototype and revealed what aspects of the mockup needed refinement. 

From wireframe to mockup (usability study 1):

High Fidelity Prototype Refinement (usability study 2):

High Fidelity Prototype :

*The interactive High fidelity prototype can be viewed here.

Progressive Enhancement and Use Cases:

With the dedicated mobile app completed I used the progressive enhancement method of thinking to begin ideating on an accompanying website.  While considering use cases, I thought that based on the user interviews the desktop app could be more focused on the research portion of the organizations while the mobile app was more focused on the participation aspect.  

The high-fidelity prototype of the BeCauses website can be viewed here

I would like to continue ideating on this design and finishing the user journey for the other branches of the sitemap that aren't part of the main user journey.  After that I would like to run another usability study to discover issues with the more complete website.