

date. 2020 Sep-Oct
my roll. UX/UI designer
Non-profit Organization Redesign Project
Friends of Refugees
Project Overview
Friends of Refugees is a non-profit organization located in Clarkston, GA. It is dedicated to helping refugees resettle in America. Friends of Refugees’ mission is to empower refugees through opportunities that provide for their well-being, education, and employment.
Over the course of three weeks, our group will be conducting a clean, easy-to-use responsive website redesign to provide stakeholders, families, and volunteers that will evoke a feeling of safety, community, and inclusion.
Our Team:
Shannon Lee, Merrill FitzGerald, Jun Ahn
User experience researchers, User interface designers
Tool Used:
Adobe XD, Miro, Google Drive, Slack, Trello
_edited.jpg)
_edited.jpg)
What we do


01
User Research
Friends of Refugees Current Website
Friends of Refugees currently have a web-responsive website. It uses a large-size of hero images on the homepage; it looks nice when using a mobile or small screen size, but some features are located not properly in large screen size. Also, the cursive script font on this page is unclear so it is not delivering the messages properly.


User Interviews
We interviewed our friends with volunteering experiences.
They gave us ideas about volunteering, donations, refugees, and diversity.

Affinity Diagram
We created our affinity diagram what we found that our interviews.
For the UI, they have easy navigation and hero images but typography is hard to read for texts.

User Persona
Our user, Jose Gonzalez is looking to volunteer for a non-profit organization catering to refugees, not only to fulfill his study requirements but to help others, a characteristic he is best known for. He is looking to understand more about an organization’s history and mission, and is curious to hear about other volunteers’ experiences.

Competitor Analysis
We wanted to take a look at other non-profit organizations' websites.
We found that many websites emphasize the "Donate" button.


Problem Insight

Problem Statement
We have observed that users, both first-time and long-time volunteers, often struggle to locate information regarding statistics, funding, or volunteer opportunities due to excessive copy or organizational issues, potentially determining their future involvement within that organization.
Value Proposition Statement
Our non-profit organization, Friends of Refugees, is developing a website to clearly convey our mission of empowering refugees through numerous programs aiding in well-being, education, and employment. We’re better because we strive to engage potential donors and volunteers through our personable, warm, and inviting website. We’re believable because we provide truthful, reliable information regarding our history and mission in addition to volunteer testimonials.

02
Ideation &
Brainstorming
I like, I wish, and What if
Our team gathered thoughts about the current website and ideas about the new design and features with sticky notes.

Prioritization Matrix
We wanted to find out what features and ideas are needed for the website. So, we organized sticky notes into the needs of the stakeholders and users.

Storyboard
Jose wants to find a reputable non-profit organization in Atlanta to volunteer. He finds "Friends of Refugees" on Google. Jose looks around the Friends of Refugees website and read about their mission, volunteer opportunities, and testimonials. After browsing the website, he locates the volunteer registration page and signs up. Jose receives an email shortly after from the volunteer coordinator and is introduced to a new refugee family who needs his help.

User Experience Scenario


03
Information Architecture
Task Flows
This is our user task flow diagram for volunteer registration. Users may use the top navigation or the footer navigation.

Card Sorting
FOR website is organized pretty well, but our team noted that every volunteer programs are links to an external website.

Sitemap
So, we want to create a new sitemap. we focused to make our new navigation simple as possible. We planed to make a volunteer program page and place it under the volunteer with us.


04
Prototyping
& Testing
Sketches

Lo-fi Wireframe

Low-fidelity Testing Plans
Goal
Our objective for this guerrilla test is to ensure users are able to find the non-profit organization’s website friendly and easy to use. We will be testing to see if they are able to find more information on the organization and navigate through the site.
Target User
There is not a specific target group we are looking for. We will be testing anybody who has an interest in volunteering or who has volunteered in the past.
Questions You Want to Be Answered
We want to know if the content we have on the page is enough information for the user to get to really know the mission and the vision of the organization. The key thing we need to learn from these tests is to see if the user is able to get excited about volunteering for Friends of Refugees.

Low-fidelity Testing Results
We conducted 3 testings and got feedback from users.

UI Style Guide
The direction we are going for is a friendly atmosphere where people feel welcomed with the soft tones and pictures of our friends. We want to portray a sense of warmth to those who visit the website to get a feel for who we are and what we are doing for our community. We paired Montserrat with the Lato regular font for the actual content. Icons should be simple and universal.

High-fidelity Wireframes










05
Outcomes
Future Opportunities

Thank you!


My Works
![]() | ![]() | ![]() | ![]() |
|---|---|---|---|
![]() |




