Context: Capstone project for Springboard UI/UX Design Bootcamp
Timeframe: March - October 2021
My Role: In this solo project, I was fully responsible for every step of the process including research, design, and testing.
With constant news coverage on both TV and social media, and a steadily increasing general interest in activism, people are feeling inspired to make a difference in any way they can. However, donating can be hard, with convenience, safety, and budgeting still taking priority.
Microdonations — donations of one cent to five dollars — are a donation method that feels comfortable to most people who want to give. Microdonations are most commonly made with spare change. The app Change Jar helps people learn about charitable organizations and make microdonations directly from their smartphones.
App Functions:
Open sections below to view the full process
I conducted secondary research online, looking for the pros and cons of microdonations, to validate that this would be a viable direction for an app.
Findings:
To gather more specific information on how people donate, as well as how interested they would be in making donations on a smartphone, I created a survey using Google Forms. I distributed the survey online on Instagram, Facebook, LinkedIn, and sent it out to friends, family and neighbors. 55 people filled out the survey.
of responders use smartphones
have made 10+ mobile transactions
have donated within the past 6 months
of donors have donated using their phones
of responders use smartphones
have made 10+ mobile transactions
have donated within the past 6 months
of donors have donated using their phones
I reached out to 5 survey respondents for further interviews. The interviews were conducted over Zoom, and lasted about 30 minutes.
I took the findings from the interviews and wrote them on Post-It notes in order to create an affinity map. As a result, I was able to identify 6 major themes.
I determined that the key motivations behind donations are Pure Altruism, Inspiration from Stories, and Guilt. The top factors that impact the donation experience are Convenience, Comfort, Safety, and Security.
Motivations to donate:
I used quotes and ideas from the interviews to start defining my user types. The first empathy map represents The Activist, and the second represents The Frugal Idealist.
I created User Personas based on the Empathy Maps. Visualizing target users for the app helped me focus on designing for real individuals.
With a clear idea of the target users in mind, it was time to define the How Might We (HMW) Statements for this project.
How Might We...
With the HMW Statements defined, I took to my notebook to brainstorm the app that would achieve the users’ goals.
View full brainstorm and sketches
This sketch shows the change jar that I created in my initial brainstorm. I used this for the brand name and logo.
Small teeny tiny negligible amounts → Big difference
Let's all work together — Donation as teamwork
Go off teamwork/community theme → Work together w/ your friends or randomly assigned group (Like Fitbit, Duolingo)
Definitive, achievable goals
Not: Let's raise money for hunger ← Nebulous
Yes: $5 is a meal for someone in need.
I mapped out user stories in two ways: by making a flowchart, and by creating a spreadsheet.
This flowchart shows the different steps people take when deciding that they will make a donation. This is based on the stories I learned from the interviews.
MVP stands for Minimum Viable Product— or the most essential features of an app. These specific goals were chosen based on the user stories.
I used this spreadsheet to organize potential user stories, so I could turn abstract goals into actionable items that would appear in the app.
Next, I made user flows to show how the users would navigate through the app.
During this part of the process, I defined the app’s red routes. These are the key sequences of actions that users take while navigating through the app. Here, the red routes are:
Groups:
Donate:
I compiled the concepts from the User Stories Spreadsheet, as well as the routes of the User Flows, to determine what pages would be needed for the app.At this point, I dropped the idea of including the functionality for creating groups for this project, because it would take significantly more time to develop than I had allotted.
I identified 3 apps with similar themes and goals: Coin Up, ShareTheMeal, and Kiva. I mapped these apps in a spreadsheet to analyze how they performed in three heuristic categories:
Next, I sketched the screens for my red routes. Below are some of the sketches that I contemplated the most, followed by all of my original screen designs.
All Sketches
Cause List
Categories
Cause Page
Payment
I used Figma to turn my sketches into wireframes, making them more readable and professional. Then I set up simple interactions between screens.Once I had a working, low-fidelity prototype, I reached out to 6 people I knew to test it. These participants were asked to follow a series of tasks that corresponded to each red route, and to narrate their experience and expectations while they did so.
Tasks:
Findings:
The cards for causes (below) were set up with three buttons: bookmark, select, and “view more”. Instead of pressing an individual button, users attempted to press the whole card.
Changes:
Using the changes determined from the first round of usability tests, I made digital wireframes.
All Wireframes in Figma
.jpg)
Before moving forward and committing to any design decisions, it was important to assure that potential edge cases — like having too much or too little text — could be accounted for. Here are examples of how the designs would account for edge cases.
I created wireflows to show the navigation through the wireframes.
View Wireflows
Brand Name: Change Jar
Mission: Inspire people to take little steps towards positive change, together.
Brand Personality: Change Jar is a warm, earnest place, where people believe in the power of unity, and appreciate the value in even the smallest of actions.
Brand Attributes: Altruistic, Encouraging, Grateful, Teamwork-Oriented
I chose photos that convey a sense of joy, coziness, hope and a world of possibility. The goal UI aesthetic was “warm minimalism.” I attempted to achieve simplicity, but in a way that still seems personable and welcoming. These screens use color sparingly, but intentionally, which became a source of inspiration for me.
I decided to make a logo that was mostly type-based, to stay succinct and simplistic. I added a stack of coins to create an easily recognizable symbol, and a visual representation of the main purpose of the app: small donations.
Using this visual inspiration, as well as the User Personas and platform goals, I decided on the fonts, colors, imagery and other elements I would use for the Change Jar app.
Click or swipe through my style guide pages in the slideshow below.
These are the first screens I designed, testing out the styles I selected. After sketching and wireframing, I made significant changes to the Categories page. When it once had icons in large boxes, I turned it into a narrow, stacked list to improve readability.
I have experience in checking for accessibility as I design, so I was monitoring factors like button size and contrast ratio throughout the design process. However, when I scrutinized my initial designs, I still found some aspects that needed changing. For instance, I needed to select a darker brand color so the logo could be used on a white background, and I needed to distinguish groups by label, not by color.
With accessibility in mind, I went on to create the rest of the screens needed for the main user flows in Change Jar. I made a couple edits to the existing screens, like giving the Home page a more minimalist design that optimized space, and adjusting the content width of the progress bar on the Single Cause page to create a more uniform margin.
To create microinteractions and animated screen transitions, I used InVision Studio. I included microinteractions for:
In InVision Studio, I went through all of my high fidelity screens and added interactions. I connected the paths through the app, and made the buttons interactive. With the screens combined into one prototype, it was now possible to click through the app and navigate through the red routes.
I wrote out a test plan, defining the goals of the test, my general research questions, and test participant criteria. Next I created a test script.
I recruited 5 participants. This round of usability tests was all conducted in person, because I wanted to see exactly how people reacted to the app. During each test, I explained the broad premise of the app, then had participants attempt three tasks on the prototype, and finally, asked them some open-ended questions.
The test participants highlighted some areas of the app that could definitely use improvement. I worked to make changes so that the app would flow the way users expected it to. For the screens below, the original designs are on the left and updated designs are on the right.
Buttons are no longer anchored to the bottom of the screen. Instead, they have a specified position among the rest of the content.
The Groups page now has a description of what “groups” are.
I recruited 5 new participants to try the usability test with the updated app. I used the same tasks and questions with the second test, to be able to draw direct comparisons between reactions to each prototype.
I conducted 2 of these usability tests over Zoom, having the participant share their screen, so I could see how they interacted with the app, as well as their facial expressions, at the same time. I found this method just as effective as testing in person.
The app updates went over very well. This time, every test participant was able to complete every task smoothly. The updated navigation menu had the most positive impact at all, speeding up how quickly each user could complete the tasks.
View the Change Jar Prototype
By studying microdonations, people’s motivations to donate, and the ways people intuitively navigate through the donation process, I was able to create an app that helps people easily set up small donations. This process lasted from March through October, and helped me learn and solidify several skills, especially UX research and building animated interactive prototypes. If I were expanding the app, I would like to further investigate gamification, to create an app experience that uses positive reinforcement to keep people donating, the way DuoLingo works for language learning or Fitbit for exercise. But for now, the app is functional, pleasing, and intuitive, and left those who tested it feeling accomplished and proud.
View the Change Jar Prototype
