Problem Statement

Billions of children are suffering from hunger, loss of home, lack of educational opportunities around the world. Various nonprofit organizations, such as Rubber Duck Foundation, exist to gather support to help the children in need. Aiding others require lots of financial support and that is why donation is crucial for organizations like this. Rubber Duck Foundation, as an organization that values accountability and accessibility, needs a website that allows their potential donors to easily and comfortably make donations for children around the world in order to raise the funds they need to sustain their extensive child support programs.

Our Goal

I aim to design a donation flow for the organization where users feel most comfortable and at ease throughout the process by taking the potential donor through the donation process step by step, giving them different options to choose from, and only taking their personal information when necessary.

Design Thinking Process

Empathize Phase

Initial User Research

I conducted an initial research via survey to gain better understanding of current state of existing donation process and how users felt about them. I got 7 responses of participants between age of 18 to 55. Some of the research questions I asked included:

What are some inconveniences you experienced when you tried to make a donation on a website?
When you visit a website for a humanitarian organization, what encourages you to make donations?
What discourages you to make donations?
Which method is most convenient for you to make donations?

User Pain Points

From the responses I have gathered some of the major pain points people experienced from existing donation process in other nonprofit organizations.

Define Phase

User Persona

From the data gathered from my initial research, I made a user persona of a fictional representative user for the website's donation process, as well as their user story.

User Journey Map

With my representative user set, I made a user journey map in his perspective, imagining what he would do to go through a donation process upon entering an organization's website. I empathized with the user and predicted his emotions in each stage as well as pain points. These helped me draw out opportunities I can incorporate in my next phase of the Design Thinking Process: Ideation.

Ideate Phase

How Might We...?

To start off my ideation phase, I needed questions to ask myself while brainstorming possible ideas and solutions. Some of the questions include:

How might we make the donation process easy to follow?
How might we earn trust from our potential donors?
How might we maintain our trust from our donors?
How might we present our organization's values clearly?
How might we encourage site visitors to donate for our cause?

Competitive Analysis

Now that we have questions to focus on, I researched my competitors as below. I have learned values each of the organizations hold, the features they have, the data they show to earn trust from their potential donors. I also took notes of how some make donating process easier for the users or harder to find gaps in the process.

Information Architecture

After jotting down all the necessary features and filling in the gaps I found on other organization's websites, I constructed an information architecture in form of a site map to organize the contents needed on Rubber Duck's website and visualize the site's structure.

Paper Wireframe

With my information architecture settled, I moved on to creating wireframes of my website on paper. In this stage, I mainly focused on the layout and the user flow, using simple shapes and placeholder texts. I used post-its as it was the most accessible stationary and would help me get more creative with my ideas. After drawing out different possible layouts, I marked the parts I found most effective and combined them together to draw out my final layout.

Digital Wireframe

With my finalized paper wireframe, I opened Adobe XD and started to build the same layout digitally. I still used simple shapes and placeholders, but with more organized, presentable look so that I can utilize them for my next phases of prototyping and testing.

Prototype Phase

Low Fidelity Prototype

In preparation for my last phase, using Adobe XD, I made a prototype out of my wireframes to make them interactive and testable for my usability study participants. Try out my Low Fidelity (Lo-Fi) Prototype below.

Test Phase

Usability Study

With my interactive prototype, I invited 5 participants to my unmoderated usability study, focusing on the user flow of the donation process of my website. Upon synthesizing my findings from the study feedbacks, although most people felt at easy and comfortable with overall experience, I was able to discover some important insights and possible solution to iterate on for my High-Fidelity design.

Iteration

Before and After

Those valuable insights from the usability study helped me tremendously on updating my site's layout and interactivity to be more user-friendly, secure, and accessible.

Design System

Before diving into my High-Fidelity designs, I had to decide on my design system, a set of visual design rules and UI components for my website. I decided on color schemes, hierarchical typography, and different button styles as shown below.

Mockups and High-Fidelity Prototype

When the design system was ready, I built my mockups, a static, polished images of my website, and made them interactive on Adobe XD for my High-Fidelity (Hi-Fi) prototype. I have also constructed responsive mobile version of the website as well. View my mockups and try out the prototype below.

Conclusion

My Learnings

It was my first time designing a website. I learned a lot about designing in a standard dimension for web pages such as adjusting sizes of my texts and images and using the landscape orientation most effectively.
I learned about responsive design as well. It was very interesting to try different layouts with same contents in mobile version of the site.
I learned more about asking the right interview / usability study questions to draw out most helpful and honest responses for my participants through trial and errors.
I learned different tools and features of Adobe XD, expanding my horizon on UX design tools.

Going Forward

Visualize the data of the organization's impacts and financial information most effectively to raise accountability of the organization.
Build the sponsorship flow and incorporate it with current donation flow.
Explore different ways to make the user experience on the website more engaging and personalized.
Conduct more usability studies and continue to iterate on the designs on the website and its flows to be user-friendly as much as possible.

Thank You!

Thank you for your time reviewing my case study!

You can find more of my work on my design portfolio, https://yoonseomok.wixsite.com/design

For business inquiries or feedbacks, you can contact me via email on octis.em@gmail.com

Thank you!