top of page
Partners Hero.png

​Mobile app

​IMPROVE DONATION FLOW FOR PARTNERS

Refugee Crisis: Image

​BACKGROUND

CONTEXT

​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 DESCRIPTION

  • 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

  • Tools: Figma

Header Listen.png
​PROBLEM SPACE

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?

​PRIMARY RESEARCH

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. 

partners themes.png
PERSONA

​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.

partners persona.png
Header Design.png
SKETCHES

​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.

partners sketches.png
PROTOTYPE V1
partners v1 home.png
partners v1 myanmar.png
partners v1 donation options.png
partners v1 confirmation.png
Header Iterate.png
​USABILITY TESTING

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.

partners matrix.png
​IMPLEMENTATION OF TESTING RESULTS
partners v2 home.png
partners v1 home.png
partners v1 myanmar.png
partners v1 donation options.png
partners v2 myanmar.png
partners v2 donation options.png

​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.

partners v2 confirmation.png
partners v1 confirmation.png

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.

​FINAL PROTOTYPE
KEY LEARNINGS

  • 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.

bottom of page