IMPROVE DONATION FLOW FOR PARTNERS
Facing the challenge of using our design skills toward a social cause, my teammates and I designed a mobile app for a nonprofit called Partners, which focused on refugee crises around the world. All of us were passionate about this social cause and thought a mobile app would help attract future donors for this organization, which only had a website.
Project type: team of 3 UX designers
My role: research, design, presentation
Duration: 1-week sprint
Skills: UX research, UI design, usability testing, accessibility testing
Partners Relief & Development is a charity organization that provides emergency relief for communities of displaced families during acute crisis events such as the Myanmar, Rohingya, and Middle East crises.
The organization already has a website, but there's currently no mobile app, so we thought we'd create a mobile app to attract new donors, who might want to learn about the crises and donate on the go.
How might we create a seamless mobile donation experience to motivate novice philanthropists?
We interviewed 9 people from various walks of life. They were of different ages (24-60) with various education backgrounds and working experiences (photographer, teacher, medical manager, UX designer, maintenance worker, freelance designer, team leader, accounting admin, server). Some were more experienced in researching social causes and donating to nonprofit organizations than others, but all 9 interviewees were not familiar with Partners and had not donated specifically to the refugee crises.
Four themes arose from the interviews.
From the interview insights, we developed a persona of Holly, who is an inexperienced philanthropist. She wanted to help the refugees but didn't know how and found the online information daunting.
We then looked for inspirations from other nonprofit apps to see how their donation flows would look like. Each of us then spent some time sketching individually and then came back as a team to vote on the UI elements that we would like to see in the final prototype. Decisions were made through dot voting.
We conducted 5 testing sessions, each of which lasted 15 minutes. From the 5 tests, a few issues were found:
Accessibility issues (colour contrast)
Unclear buttons (Learn more, Get notified)
Confusing donation options (Amazon Smile, Birthday Fundraiser)
All comments were organized into a design prioritization matrix and implemented for V2.
IMPLEMENTATION OF TESTING RESULTS
Accessibility and spacing were improved on the home screen. The confusing Learn more section was replaced by the organization's mission.
The Myanmar Crisis page also saw improvement in accessibility (no more white text on yellow background or red text on black background). Text size was also increased for more visibility.
Confusing donation options were clarified and/or removed.
The modal also became more accessible with black, larger texts on yellow boxes.
Finally, we fixed issues with spacing and font sizes on the donation confirmation modal.
Designing for a new device for an existing brand was challenging at first. We had to constantly refer to the logo, colour palette, and typography of the Partners website.
UX writing for nonprofit organizations was different. We tried to 'sell' the stories of the refugees rather than any commercial products.
If we had more time, we would have got another round of testing to refine the prototype further. One round of testing was sufficient for this 1-week sprint, but 2 rounds would have been even more insightful.