East Bay Sanctuary
Covenant
Website Redesign Case Study
Our Team
Gabriella Collana, Lu Salazar,�Léo Vieira, Faith Camara
Current Site
Our Problem:
The East Bay Sanctuary website was designed to assist undocumented immigrants in the naturalization process as well as reach out to potential donors and volunteers. We have observed that the website has organizational issues as well as accessibility issues, which creates an entry barrier for many clients. How might we improve the East Bay Sanctuary’s website so that their customers have a seamless experience and get the help that they need?
Current Site
Our Solution:
Our goal is to redesign the nonprofit’s, East Bay Sanctuary, website to make it more accessible to its users and personnel. As the website stands currently, the primary users are volunteers and donors and one of our goals is to make sure the website is targeted towards and welcoming of immigrants. We want to conduct an evaluation of the original website and connect with the administrators to learn about their needs.
01
02
03
Table of Contents
04
05
06
Interviewing the staff and users to learn what can be improved
What have we learned from our Research?
Evaluating the original website design using accessibility
guidelines and user testing
Researching our Users
Defining the Problems
User Interface Analysis
Brainstorming ways to solve the problems identified in our research
Ideating a Solution
Taking the solutions we identified and building them out
Prototyping
How will our design react to different tech?
Responsive Design
01
Researching Our Users
Interviewing the staff and users to learn what can be improved
User Interviews
In order to learn about the organization and its users we decided to interview at least five people, a mix of both sides. Our goal was to learn what the main purpose of the site is, as well as places it could be falling short of that purpose.
Question #2
On a non profit’s home page what do you think should be front and center?
Question #3
Has the “language barrier” factor ever been an obstacle when looking for information online?
Question #1
Have you ever used a non-profit’s website looking for help or information? If so, what drew you to that nonprofit's website?
Affinity Diagram
After conducting our initial user interviews we compiled all of the data into one document and created five categories, demographics, internet usage, website likes and dislikes, thoughts/experience with non profits, and language barrier. This allowed us to see patterns which ultimately helped us gain a better understanding of our user and their needs.
User and Staff Interviews
Key Takeaways:
Competitor Analysis
Competitor’s advantage:
Weaknesses:
“They lack professional people and what I liked most is that if they don't answer the phone they will call you back as soon as possible.
In La Raza centro legal, the lawyers are friendly but the receptionists are rude and if you call they never answer the phone or your messages and never call you back to help you.”
02
User Interface Analysis
Evaluating the original website design using accessibility
guidelines and user testing
Heuristic Evaluation
Link to Full Heuristic Evaluation
During our Heuristic Evaluation we identified issues in the current website, ranging from color choices that don't pass the standards for accessibility to confusing organizational patterns.
Color Accessibility
User Testing Plan
Determine the main issues with the Sanctuary website’s visual organization and accessibility.
Research Goal:
Questions:
User Testing Tasks
Task #2
Schedule an appointment
Task #3
Find contact information for EBSC
Task #1
Identify the services or types of aid that EBSC provides
08
User Quote
"It’s hard to following anything I’m looking at; I feel like I’m on the wrong page even though I know I’m not."
—Anabelle
User Testing Plan
What we learned from testing the old website.
Key Takeaways:
User Persona
36, she/her
Non English Speaker
Undocumented
Babysitter,
Staying with a friend
Daily City, CA
Marta Perez
Primary Needs
Secondary Needs
Empathy Map
We created an empathy map which allowed us to better understand the point of view of our user. We learned that our user is juggling a lot of things at once and needs systems to reduce the time it takes to get in touch with the organization.
03
Defining the Problems
What have we learned from our Research?
Problem Statement
The East Bay Sanctuary website was designed to assist undocumented immigrants in the naturalization process as well as reach out to potential donors and volunteers. We have observed that the website has organizational issues as well as accessibility issues, which creates an entry barrier for many clients. How might we improve the East Bay Sanctuary’s website so that their customers have a seamless experience and get the help that they need?
04
Ideating a Solution
Brainstorming ways to solve the problems identified in our research
Our Approach
Accessibility Solutions:
User Storyboard
User Scenario
Card Sorting
In our card sorting we cataloged all the pages and organized them in accordance with the websites current layout.
Our next step is to rearrange the pages, if needed. The goal of this exercise is to determine if certain categories are really needed by looking at our collected data.
Site Map
Our team re-organized the sites navigation to be more user friendly.
User Flow
This flow represents the pathway that the user might follow through the website. Visualizing the user flow helps us to streamline the paths of the website that users might follow.
Land on the Home pagel
Navigate to the About page
Navigate to Immigrantion Legal Services page
Decide if they want to make an appointment
Decision Point
Learning Phase
Navigate to the Appointment Center
Complete appointment form
Start
End
User Journey
Visualizing the user journey helps us anticipate what it might be like for the user to use our website. It allows us to anticipate problems and potential solutions before a need for them arise.
05
Prototyping
Taking the solutions we identified and building them out
Initial Sketches
Once the sites layout was decided we created sketches of each page in our user flow. Our teams goal was to ensure that each layout was centered around modern design and accessibility. We attempted to steer clear of design themes that might not be common to non english speakers.
Language Page
Appointment Page
Home Page Mock Ups
Low-Fi Wireframes
Once we decided on a rough layout for each page we started building them out into a wireframe flow.
Version Includes:
Lo-Fi Prototype
User Testing Plan
Determine if our design is intuitive and solves the accessibility issue in the original interface
Research Goal:
Questions:
User Testing Tasks
Task #2
Locate services page
Task #3
Find client testimonials
Task #1
Quickly find and select your native language
Task #4
Schedule an appointment
A
08
User Quote
"I feel like everything is easy to digest and follow. When i click on something It's obvious where it's going to take me.”
—Max
Style Tile
Our goal was to create unified and consistent visuals working within the organizations established style.
Changes Include:
Iteration, Moving from Low to High Fidelity
High Fidelity Prototype
06
Responsive Design
How will our design react to different tech?
Mobile Wireframes
User Testing Plan
Understand and analyze usability and accessibility issues in the mobile version.
Research Goal:
Tasks:
User Quote
"The design of the homepage feels very friendly and welcoming. ”
—Michel
Desktop Iteration Based on User Testing
High Fidelity Desktop Prototype
High Fidelity Mobile Prototype
This project expanded our knowledge and understanding of accessibility tools. Our biggest challenge was to research design
a layout that would expand the nonprofit’s user base by providing visually, hearing, and mobility impaired people with access to online resources and technology.
Next Steps
It would be to develop the features
and accessibility tools created in this project.
Conclusion: