top of page
public-drum_basic_article-94692-main_images-unicef--2x1--906_edited.png

UNICEF

Donation App

Overview

This donation app on the mobile version offers users be able to donate easily through an app and view where their contribution is going. A typical user is between 19-60 years old, and most users are college students, career professionals, or retired personals.

Role

UX Designer leading the UNICEF Donation mobile app design

Project Software

Adobe XD

The Goal

Designing a UNICEF donation app will make it easier for users to access and make a donation worldwide at their convenient time and see where their contribution is going.

Project View

Mobile Version

The Process

Design-Thinking-Graphic-5-Stages-1.png

Empathize

Empathize

Understanding the User

I conducted user interviews to better understand the target user and their needs. I observed and noticed that many target users like to use their phones more as they are always on the go and it is easy to access everything. Going through the web can be a little overwhelming for users as there is a lot of information to go through before actually donating to the cause. Accessing UNICEF through the phone felt like a little sigh of relief to the users.

Define

Define

User Research: Pain Points

 1

Texts & Fonts

Using an app can cause the texts to be a little hard to read with overflowing texts.

2

Interactions

Because the device is small, there is a lot of scrolling to go through a page.

3

Experience

An app can be a slight disadvantage. Since the app is available on the phone now the thought of donating later is frequent.

Sitemap

My goal here was to create a good information structure that would make it easy to navigate and follow through with the app. I am doing this on an app to make it intuitive for users to find the key terms of Donation or BECOME A DONOR.

UNICEF site map.png

Paper Wireframes

This is the home page design layout I had come up with. These were my thought process at first.

UNICEF-paper wireframe 1.png
UNICEF-paper wireframe 2.png
UNICEF-paper wireframe 3.png

Ideate

Ideate
Prototype

Prototype

Digital Wireframes

Moving from paper wireframe to digital made it easy to understand how to redesign and help address the user's pain points and improve the user experience better. 

Screen Shot 2021-08-04 at 10.13.09 AM (1).png

I started by having to scroll the entire page first then “BECOME A DONOR” was not visible and not able to locate the button easily.

1st Attempt

2nd Attempt

Screen Shot 2021-08-04 at 10.09.05 AM (1).png

I later decided to make the footer of the page either a fixed position when scrolling or just keep the page simple with fewer texts.

Test

Test

Low Fidelity Screen Flow

To create a Low Fidelity prototype, I connected all of my screens involved to making a donation process.

 

This is my 2nd attempt version of making the donation process easier. So I decided to keep the homepage compact with one set of information at a time. If the users would like to view other information, they can easily click on the menu bar and select their topics.

UNICEF-LF wireframe_edited.png

Low Fidelity Prototype

To create a Low Fidelity prototype, I connected all of my screens involved to making a donation process. I decided to keep the homepage compact with one set of information at a time. If the users would like to view other information, they can easily click on the menu bar and select their topics.

High Fidelity Screen Flow

My high-fidelity prototype followed the same user flow as my low-fidelity.

UNICEF-HF wireframe_edited.png

High Fidelity Prototype

Mockups: Screen size Variations

Mobile Version

UNICEF- homepage.jpg

Desktop Version

UNICEF-Homepage-Desktop.jpg

Takeaways

Impact

Our target user shared that the design was easy to navigate through, user-friendly, and very engaging with the images, and demonstrated a clear structure.

“I am glad there is an app for UNICEF. It’s easy to access and I can check out the information anytime I want”.

Lessons Learned

I learned that even a small change in the design, like font, size of texts and image, or anything for that matter can make a big impact on the overall design and different user experiences.

Takeaways
bottom of page