Equal Justice Initiative
A WEBSITE REDESIGN PROJECT
Project Overview
Challenge
The Equal Justice Initiative is a non-profit organization that challenges racial injustice by advocating for equal rights of those victimized by the criminal justice system. We have discovered that users who visit the site are overloaded with information and the content architecture of the site creates navigation difficulties.
Project Scope
Website Redesign, Rebranding
Role
UX/UI Designer (Research, Visual Design, Wireframing)
Overview
Team
Ariana R, Anjana B, Irwin C
-
Redesign the website layout and architecture to best serve each user’s purpose
-
Revamp the branding of EJI to incorporate a unique color scheme and aesthetic
Duration
4 Weeks
Tools
01 User Research
Provisional Personas, User Interviews, Affinity Diagram, User Persona
02 Ideation & Definition
User Insight, Problem Statement, Ideation, Storyboard, Feature Prioritization, User Journey Map, Redlining Web pages
03 Design
04 Prototype & Test
Design Process
Card Sorting, Wireframes, Mid-Fi Prototype
Branding, UI Kit, Usability Testing, Hi-fi Prototype
Our goal was to understand the navigational gaps that lie between users and their purpose: donating time or money, seeking to learn, and/or applying for legal assistant.
To ensure the research stays on track and better guide the responsive website design later, it is important to create a research plan before diving into the research phase. I listed research goals, methodologies, research questions, and assumptions.
Goals
Methodologies
01 User Research
-
Grasp a better understanding of EJI’s mission
-
Identify EJI’s target audience and their purpose
-
Uncover gaps within the websites layout and information architecture
-
Primary Research (User Interview)
Provisional Personas
Upon browsing through the website, we discovered that EJI caters to a multitude of personas: people who want to donate their time or money, people seeking legal aid, or people who are just curious to learn about social justice reform. We found that it’s important that the website caters to everyone, so we identified provisional personas and their goals to help us craft an effective user survey.
Goals
-
Join EJI’s team or get involved with a local organization with a similar mission.
-
Donate money to fund EJI.
Goals
-
Contact EJI for legal aid.
-
Reach out to local organizations for support.
Goals
-
Want to become knowledgeable about social justice reform and EJI’s cases.
-
Be up-to-date with victim’s stories.
Pains
-
“Find Local Organizations” is a PDF and user has to click to get more details about page.
-
“Donate” does not stand out on the homepage
Pains
-
The mission of EJI is ambiguous so it’s not clear if user can seek aid.
-
Difficulty finding contact for legal assistance.
Pains
-
Overwhelmed with information.
-
Text heavy pages.
The Altruistic
Advocate
The Potential Legal Aid Recipient
The Avid Learner
Primary Research
We were curious to see our users initial impression of the website and if they were to easily grasp EJI’s mission.
We created a user survey and interviewed 4 participants and asked about their previous knowledge of EJI and any familiarity with other social justice reform non-profits. Then, we had the users perform 3 tasks to test the navigational experience and to see if the information architecture was well-structured. The tasks were tailored to the goals of each provisional persona.
Research Synthesis
To synthesize the qualitative data gathered from user interview, we created an affinity map to identify patterns across users, uncover insights, and generate needs.
Affinity Diagram
From our interviews, we gathered that the website could be condensed. The homepage needed to include opportunities for donation, volunteering, and legal aid because we recognized that the standard non-profit website has those CTAs listed in the above fold of their website.
​
The affinity diagram helped us precisely identify problems and pain points. After we organized findings under a common idea, we created user statements that supported our user persona development.
User Persona
Since we gathered user insights and pain points, we use the user persona to represent key audience segments. It helps us focus on tackling the most important problems — to address the major needs of the most important user groups.
Let’s meet Mikael, a VP of Finance from New Orleans. He is passionate about helping people in the African-American community seek higher education and is eager to serve as a mentor to upcoming generations.
02 Ideation & Definition
To refine our web strategy, we articulate the user’s problem based on our findings from our user surveys. We use ideation and definition methods to create a definitive user narrative.
User Insight Statement
The Equal Justice Initiative needs to present their mission in a straightforward manner without overwhelming users with information by making essential information in regard to donating, seeking legal aid, and volunteering more accessible.
Problem Statement
The Equal Justice Initiative is a non-profit organization that challenges poverty and racial injustice, advocates for equal treatment in the criminal justice system, and creates hope for marginalized communities. A problem we have discovered is that users are overloaded with educational content on the homepage and have difficulty finding essential resources. How might we help users retrieve the resources they are not tirelessly looking through the website?
“I like, I wish, What if...” Statements
To leverage the collective thinking of our group, we put ourselves in the user’s shoes and formed “I like, I wish, What if” statements to draw precise conclusions on which areas of the site were lacking.
Key Takeaways:
-
Homepage needs to have a similar layout as the standard non-profit website
-
Enhance the navigational experience for each type of user, so they can fulfill their unique purpose
-
Display text in a concise manner
-
Redesign the brand color palette to make the UI more appealing
User Journey Map
Crafting this user journey map gave us a precise visualization of user’s experience and allowed us to empathize with the user’s motivation, needs, hesitations, and concerns.
Web Redlining
We immersed ourselves into the 3 user types we identified and redlined the homepage from each of their perspective’s. The audience goes on the website for one of 4 reasons (1) donate time and money to the cause or organizations with similar causes (2) seek legal aid (3) work for EJI and/or (4) learn more about criminal justice reform.
It is important to acknowledge that each user’s purpose can change over time, so it’s important that the website is flexible and caters to everyone.
We conducted this exercise (from left to right) on the Death Penalty page, homepage, and about us page. This exercise helped us recognize that the Information Architecture strategy needed to be refined.
Low Fidelity Wireframes
Our redlining exercise helped me develop a Lo-Fi wireframe.
Mid Fidelity Wireframes
Our findings from our user surveys informed us that it was imperative that people grasped EJI’s mission just from looking at above-the-fold. In the mid-fi wireframes, I prioritized highlighting the call-to-actions in the above fold.
03 Design
Sketched on InVision.
Wireframed on InVision.
My teammates and I recognized a few users mentioned how plain the website looked, so we were aligned with rebranding EJI. I redesigned the logo and the color palette. By incorporating strong colors and a text hierarchy, it can make the readability of the text easier and more compelling, which can diminish the density of the text.
Logo Design and Tagline
Original logo
Redesigned logo
EJI did not have a tagline, so I crafted “Be Apart of Change” because I believed that resonated with the non-profit’s overarching mission. Whether you are looking to get directly involved with the organization to fight for victims or you are a victim pf injustice yourself, they share the commonality of seeking change for the greater good.
UI Kit
Branding
I thought the logo could be simplified a bit more because the original was too clunky and took up space. I noticed they were trying to play with the equal symbol, so I thought I would take that a step further by incorporating Gestalt’s design principles of closure and continuity. I designed around 13 logos and narrowed it down to 4 logos and had my teammates and classmates vote on their favorites.
The website interface was minimal and dull, and we implement a color scheme into the web design that would trigger the users' emotions. The primary colors of the color scheme was red and aqua green. More than just aesthetics, our color choice was influenced by EJI's values as red symbolizes courage while aqua green represents peace. These colors' symbolism accurately represents EJI’s bold mission to fight peacefully for equality.
04 Prototype and Testing
High-Fidelity Wireframe & Prototype
Takeaways
-
Important to consider the non-profit’s mission and all the users’ purposes when redesigning a website
-
Keep the homepage simple and display the victim’s story through a carousel
-
Do not sacrifice readability for aesthetics because I think we overdid it with the drop shadows and blurs
From our ideation and definition process, it was evident the information architecture and content structure could be laid out more effectively. We established our web flow through card sorting which helped identify keywords and how to arrange the parent and child pages.
Card Sorting
Our users are looking for content to be structured and organized in a meaningful matter. Card sorting helped us refine our content and IA strategy.