Example

Doctors Without Borders

Donate & track your donations using the mobile app.

The iOS mobile app informs donors how the donations are distributed & provides them with the option to donate using the mobile app. This solution encourages users to trust Doctors Without Borders, & as a result feel more encouraged to donate.

Before diving in, here is a…

Logistical overview:

  • Project type:

    Academic

  • Duration:

    5 day sprint (February 2022)

  • Role:

    UX Researcher & UX Designer

  • The Team:

    Me, 1 PM, 8 Engineers & 2 Visual Designers

  • Platform:

    iOS (Mobile App)

  • Contraints:

    Tight timeline & WCAG AA Standards

Project Brief

Over the duration of 5 days, the UX Design bootcamp I attended (BrainStation) assigned me to work with 4 additional UX/UI Designers. We were required to complete a digital design project for an existing non-profit or NGO—after careful research and deliberation we chose Doctors Without Borders. We were tasked with conducting research and creating human-centered designs based on iteration and feedback.

The Design Process

I approached the project in a non-linear fashion, using a design-thinking process. User-centered design was at the heart of all my decisions, so naturally, iterations based on multiple rounds of feedback was imperative.

Empathize

Problem Space

We began by researching using the internet in order to understand if there were existing pain points affecting potential Doctors Without Borders donors. The following is the problem space, which was founded through preliminary research:

Trust is a barrier to donating, and less than half of millennials are doing so.

Secondary Research

After understanding the general problem space, we conducted further internet research in order to have a more robust understanding about the matter and potential Doctors Without Borders donors. The following are a few snippets of our main findings:

  • percent of millennials donate—they also prefer to donate via mobile device.

  • percent of participants in a study didn't trust that organizations would spend their money well.

  • countries around the world have a critical shortage of healthcare workers, a deficit of 2.4 million doctors and nurses.

Primary Research

In order to better understand the barriers that potential Doctors Without Borders donors may face we conducted interviews with 5 potential donors, with the goal of understanding the following:

  • If applicable, what their current donation process entailed.

  • What their biggest pain-points were.

  • What motivated them to donate or abstain from donating.

When conducting interviews we created a casual and judgement free environment⁠—the following are further details about the interview:

  • The Who

    Millennials aged ~25-35, who are Canadian residents, and are familiar with the using a mobile device.

  • The Method

    The interviews were decontextualized⁠—the product wasn’t used for the interviews.

  • The How

    The interviews were conducted over video call and took place in the manner of open-ended questions.

Define

Primary Persona

The primary persona was created after interviewing participants. The following persona reflects the frustrations, behaviours, goals, and characteristics of the participants that were interviewed:

Design Challenge

The interviews and the persona helped to inform the following design challenge:

How might we educate millennials about Doctors Without Borders initiatives so that they have more confidence when donating?

Research Synthesis

Due to time constraints we were unable to create a formal Affinity Map, instead we quickly discussed what we learned from the interviews and the Primary Persona, in order to help define the users’ needs. The following are a few key take aways that we kept in mind as we continued the design process:

  1. Millennials would like to be better educated about where the donation funds are being allocated before choosing to donate.

  2. Millennials need to feel that they can trust the company before they donate.

  3. Millennials would prefer to donate to a cause that they care about.

Ideate

Task Flow

Due to time constraints we were unable to create user stories to help inform our Task Flow or to address all of the users’ needs. Instead we quickly discussed and created a Task Flow that would best address a couple of the key issues and needs we synthesized from the interviews. The following Task Flow Diagram helped to inform content components and the connections between them:

Story Board

In order to understand how users would interact with the Doctors Without Borders app we created a story board.

The story board illustrates Elizabeth’s (Primary Persona) journey. She was a past volunteer and donor for Doctors Without Borders journey. During the pandemic she re-discovered the Doctors Without Borders app. The stories that she reads on the app rekindle her passion for helping others so she decides to donate again.

Prototype

Solution Sketches

After creating multiple exploratory sketches, we came up with the following solution sketch because it seemed to best address the users’ needs:

Mid-Fi Prototype

The solution sketch helped inform the initial mid-fi prototype below (Note: the prototype is version 1 of 3):

Test

Usability Testing

Note: typically the usability testing would be conducted with greyscale prototypes, however due to severe time constraints and the sprint schedule set by the program the usability testing was done using a colour injected prototype.

2 rounds of usability testing, each consisting of 5 users was conducted in order to obtain practical real-time feedback—the feedback was incorporated to improve the design.

The usability testing was based on 1 persona, and users were provided with the following scenario:

As a Millennial and Doctors Without Borders donor you would like to donate money using the application. You are a brand New User, however you’ve already created an account.

Feedback based Revisions

Major Change One: Larger Text

Problem: Users found some of the text in the original prototype to be a bit too small.

Solution: We increased the font size where relevant.

Major Change Two: Default Contribution Button

Problem: The contribution button defaulted to “Monthly” contributions in the Original Prototype, however users mentioned that they would prefer for the button to default to “One Time” contribution.

Solution: The default button was set to “One Time” contribution in the revised prototype.

Refine

Brand Development

By incorporating user feedback we were able to update the current branding to be more appealing to the millennial users.

The following colours were pulled from the current Doctors Without Borders website and slightly modified according to user feedback, and the following chosen typeface resembles the sans serif typefaces on the current website:

  • Primary Colour

    #E22F2F is used for the active button states, some decorative elements, and some typography.

  • Functional / Supporting Colours

    The functional/supporting colours were used for the background, text, tool bar icons, and input fields.

  • Brand Typeface

    To appeal to the millennial users, a modern typeface with sans serif characteristics was chosen.

High-Fi Prototype

The high-fi prototype was the culmination of research, user input, UI and mood board inspiration, and multiple rounds of feedback based iterations.

Future Plans and Reflections

Future Plans

The following future plans for the app were made with the users’ needs in mind:

More Usability Testing

Due to time constrains we were not able to conduct usability testing using a greyscale prototype.

I would like to conduct another round of testing using a greyscale prototype, in order to eliminate distractions and biases.

Make App Localization Friendly

Due to time constraints we were unable to focus on making the app localization friendly.

I believe that creating a localization friendly design is a simple step to ensuring that all Canadians can interact with the product.

Key Learnings

I believe that it is important to constantly reflect in order to learn to better serve the users—the following are my key reflections about the 5 day sprint:

Importance of Product Rapport

After conducting user interviews I learned that branding, a polished product, and great UX Design are key in building rapport with users.

Circumstances Dictate Process

Given the 5 day timeline we had to skip steps in the design process. We cut the Affinity Map and User Stories. This taught me that circumstances dictate process.

Usability Testing is Key

Although we didn’t have much time to complete the project I’m really glad that we did usability testing because it helped us to spot and fix a few fundamental issues.

Thank you for dropping by⁠, onwards digital wanderer!

Questions? Please contact me.