top of page
Works-4_edited.jpg

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

Overview
mockup1%20(1)_edited.jpg
mockup1%20(2)_edited.jpg

What we do

Group 5202.png
User Research
Handshakes

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.

Screenshot 2020-11-24 at 17.31.18.png
Screenshot 2020-12-08 at 11.31.37.png

User Interviews

We interviewed our friends with volunteering experiences.

They gave us ideas about volunteering, donations, refugees, and diversity. 

interview.png

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.

affinity.png

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.

User Persona.png

Competitor Analysis

We wanted to take a look at other non-profit organizations' websites.

We found that many websites emphasize the "Donate" button.

ca-rescue org.png
ca-refugeesinternational org.png

Problem Insight

user insight.png

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. 

Image by Chris Lawton

02

Ideation &
Brainstorming

Ideation

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.

I Like, I Wish, What If.png

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.

Prioritization Matrix.png

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.

Storyboard.png

User Experience Scenario

User Scenario.png
IA
The Perfect Vegan Sandwich

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.

Task Flow.png

Card Sorting

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

Card Sorting.png

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.

Site Map  Friends of Refugee.png
Painting

04

Prototyping 
        & Testing

Prototyping

Sketches

sketches.png

Lo-fi Wireframe

digital wireframe.png

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.

testing plan.png

Low-fidelity Testing Results

We conducted 3 testings and got feedback from users.

testing result.png

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. 

style guide.png

High-fidelity Wireframes

Home Page - Website image 2.png
About Us - Refugees – 1.png
Website-Volunteer with us.png
Website-Registration.png
Mobile%20-Homepage%20%E2%80%93%204_edite
Mobile%20-Homepage%20%E2%80%93%204_edite
Mobile-Volunteer%20Opp._edited.jpg
Mobile-Volunteer%20Opp._edited.jpg
Mobile%20-%20Donation%20Page%20%E2%80%93
Outcomes
refugee.jpg

05

Outcomes

Future Opportunities

future opp.png

Thank you!

Component 20 – 10.png
electronic-monitor-device-desktop.png

My Works

F99F 02 – 1
Works-1 – 1
Works-4 – 1
Works-3 – 2
Works-2 – 1
bottom of page