Responsive website for nonprofit organization that focuses on community building and creating an inclusive environment.

Inclusion center

for community and justice

Project Overview
Background and Motivation

As a nonprofit and charitable organization, the Inclusion Center for Community and Justice rely heavily on donations,charitable contributions, and volunteerism to maintain their mission.

Their Mission Statement:

As a human relations organization dedicated to overcoming hatred, bias and exclusionary practices, we build inclusive communities through experiential learning, intentional dialogue, fostering relationships, and the cultivation of tomorrow's leaders. We strive to support our community through engagement, respect, concern, empathy and understanding.

My team and I chose this organization because they provide great services within the local community and provide workshops, retreats, and events that attract all members of the community to join and share experiences.

Website redesign
UX Designer/User Research

Edwin Bay,Chandler North, and Parisa Mardanlou

Figma, Canva, Google Docs
2 Weeks

Research :

 

Getting to Know the Users

Ideation :

 

Identify and Strategize

Design:

 

Roadmap and Structure

Prototype and Testing:

 

Development and Further Iterations

Design Table of Content
Desktop Preview
Mobile Preview

Developing our Protopersona: Maya Thompson

 

We decided to take the persona angle of the donator for our project due to time constraints. Other personas we would have also taken would have been those of the services-seeking persona.

















































Research
User Survey and Interviews

Developed/Implemented:

 

  • Created a 8 questionnaire survey:  5 multiple choice and 3 open ended questions.

(12 user participants)

 

  • Created an interview plan with 8 question semi-structured involving before and after visiting the organizations page 
Samples of Questionaire and Interview Questions
User Insight
User Empathy Now that we have seen what the users have seen and explained from their experience from the Inclusion Center’s site we can now refine and properly define our user persona. From there we can use Maya Thompson as our guide to indentifying the root problems and designing solutions to meet our users needs.
Here is the User Path Maya Thompson will go through when scrolling to the site.
About
Contact
Events
News
Support Us
Contact
Support Us
Staff and Board
History
Mission Statement
Email Sign Up

Social Media

Logo

Social Media

Logo

Programs
We decided as a team to come up with a few layouts that would focus on the Inclusion Center’s main content that was easier for users to navigate and not be overwhelmed in the process.
Wireframe A Wireframe B
About
Programs
Staff & Board
Support Us
History
Contact
Donate
Subscribe
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur. Faucibus sed pellentesque nisl posuere. Ligula sem sagittis tincidunt tincidunt. Pellentesque blandit varius congue diam. Aenean sit mauris amet dignissim hac in sit. Justo metus sed vitae tristique eros mi molestie. Quisque blandit consectetur iaculis facilisi id dis mi molestie eget. Suscipit eget leo urna tortor at quis pretium. Non neque quis magna sed a orci aliquet arcu. Tincidunt velit orci.
Contact Info
News
Events
Email Sign Up
Support Us
Donate
Subscribe

After several reviews of the wireframes and some refining using Figma, we did a simple guerrilla testing with a few members of our cohort to decide on the best path to take.

 

Wireframe B was a unanimous winner of the selections.

Prototyping and Testing
See More Responses
About
Programs
Staff & Board
Support Us
History
Contact
Donate
Subscribe
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur. Faucibus sed pellentesque nisl posuere. Ligula sem sagittis tincidunt tincidunt. Pellentesque blandit varius congue diam. Aenean sit mauris amet dignissim hac in sit. Justo metus sed vitae tristique eros mi molestie. Quisque blandit consectetur iaculis facilisi id dis mi molestie eget. Suscipit eget leo urna tortor at quis pretium. Non neque quis magna sed a orci aliquet arcu. Tincidunt velit orci.
Contact Info
News
Events
Email Sign Up
Support Us
Donate
Subscribe
Yes
About
Programs
Staff & Board
Support Us
History
Contact
Donate
Subscribe
Donation Summary
About
Programs
Staff & Board
Support Us
History
Contact
Donate
Subscribe
One Time Gift Amount
Fill In Amount in $
$10
$100
$50
$20
One Time Hero
Pay Now
Monthly Hero
Make an Impact!
Multiply your impact. Make it Monthly!
Choose Your Gift:
$10
$20
$50
$80
$100
Other:
One Time
Monthly
About
Programs
Staff & Board
Support Us
Contact

Inclusion center

for community and justice

Check Out Mobile Prototype
Check Out Desktop Prototype
As a human relations organization dedicated to overcoming hatred, bias and exclusionary practices, we build inclusive communities through experiential learning, intentional dialogue, fostering relationships, and the cultivation of tomorrow's leaders. We strive to support our community through engagement, respect, concern, empathy and understanding.
Our Mission
About
Programs
Staff & Board
Support Us
Contact

Inclusion center

for community and justice