Texas Fair Defense Project
Quick Description
Redesigned Fair Defense website and mobile to provide a functional platform that ensures its users support and direction on how to navigate the legal system.
Goal
To provide a functional platform that ensures a support system for users to overcome their legal and financial troubles.
​
Our Mission
TFDP Mission
We fight to end the criminalization of poverty in Texas. We envision a system of justice that upholds the dignity and civil rights of all people, regardless of income, race, or gender.
​
​
​
​
Through impact litigation, legislative advocacy, and education, we are working to end counterproductive, costly, and unconstitutional practices like jail time for traffic tickets and our broken money-bail system.
What Did I Do?
My Roles and Responsibilities
-
Initial research and collaboration:
-
Research TFDP
-
Contact Stakeholders
-
Stakeholder interviews
-
Create Survey
-
User interview
-
-
Journey Map
-
Heuristic Evaluation of current site:
-
Usability
-
Accessibility
-
Color Analysis
-
-
Red Lining
-
Design desktop and mobile prototype
-
Get a Lawyer Page
-
Initial navigation design
-
Multiple page layouts
-
Terminology on site
-
Prototyping
-
-
Usability testing Lofi,Midfi,& Hifi prototype
Team Collaboration:
-
User interviews
-
Interview analysis
-
User Persona
-
Affinity Diagram
-
Site Map
-
Card Sorting
-
User Testing Plan
-
Heuristic Evaluation
-
Proto-Personas
-
Value Proposition Canvas
-
Presentation Slide Deck
-
Feature Prioritization
-
User Flow
The Problem & Our Solution
The Problem
>
We have observed that people don’t have proper guidance in navigating the legal process, leading to injustice.
Our Solution
>
We redesigned TFDP website and mobile to provide a functional platform that ensures a support system for users to overcome their legal and financial troubles.
We Believe
Our redesign will provide a more functional navigation system.
Increase in knowledge of how to properly navigate the legal system.
Decrease confusion and stress
The Goal
The more straight forward site will allow it's users to overcome their legal and financial troubles with less stress.
The Process
Topic
As a group of designers, we were given a list of nonprofits to potentially redesign the "Texas Fair Defense Project" and two others caught our eye.
Initial Discussion
After looking through the list we all felt connected to the cause of TFDP that lead us to the conclusion of picking them for our 3 week redesign project.
Desktop View
Group Decision
Once we chose our site we went through the site and evaluated the heuristics to decide on our approach to the redesign. We decided that creating a more straight forward navigation would allow it's users to find the info they need quickly and efficiently.
Mobile Screenshots
>
Research
Objective
As User Researchers, we wanted to assess how people currently search out for legal support and how comfortable they are using pro bono. In hopes to discover what pain points that may be occurring while seeking out help.
Collected Data
-
Interview and email correspondence with stakeholders
-
Survey
-
1-1 interviews
-
Zoom
-
Phone
-
In person
-
Methodology
Plan and conduct semi-structured interviews with:
-
Misdemeanor offenders
-
Those who have sought out help for legal decisions
-
Volunteers who are familiar or not familiar with Texas legal system
-
All interviewees are above the age of 18
Google Forms survey put out social media feeds.
Interview questions
-
Do you feel that bail is unfairly leveraged in misdemeanor cases?
-
Do you feel like the Texas justice system is too complicated for average citizens to navigate?
-
If you had to use a public defender for a misdemeanor charge, would you seek volunteer legal help outside the court system?
-
Do you feel like an attorney would give you the best shot at assisting with your case?
-
Have you used a public defender? If so was it because of the attorney fees?
-
Where would you go if you needed legal assistance?
-
Would you feel comfortable using a pro bono attorney aka volunteer attorney?
-
Would you consider legal help from a non profit organization that has volunteers? Why or why not?
-
Which methods would you use to look for an attorney? Such as the internet, word of mouth, etc.?
-
How familiar are you with the Texas Justice System?
-
In which ways do you think the justice system could improve to help those who can’t afford the traditional route of an attorney?
End Result
After we researched our users and their pain points we were able to understand our users needs. Our users needs were implemented into the redesign plan. We wanted our user to know they were in the right place within seconds not minutes. Take away the extra fluffy info and create a straightforward navigation.
Definition
We as a team we created individual sticky notes from the initial research we gathered from our interviews and survey entrees. Together we placed them on a board in miro, grouped them than created sections titles based on the stickies that were grouped underneath.
After all the interviews notes were on individual sticky notes and placed in their respected section on the affinity map, we started on our empathy map. Taking the those notes and placing them into one of the following sections: Says, Does, Thinks, Gains, Feels, or Pains.
Based on the data we gathered our persona Nancy Green was born.
Ideation
After creating the user persona as a group, we than built out the journey our user was going to take.
Once we had the journey written out, one of our designers took the head on creating user scenario and story board. Once we all provided our feedback we decided on the final scenario.
%201.png)
%201.png)
%201.png)
%201.png)
%201.png)
%202.png)
The gist of it all was that our user Nancy "was at fault in a car collision and was issued 3 tickets. Both cars were totaled, and she has the least insurance coverage allowed by law, as she lives on a very tight budget." We found that is was most appropriate for our user to have minor offenses against her.
Prototyping & Designing
Selected from Site Map
Card Sorting
To figure out the physical layout of the navigation we created a site map of the site than chose what was necessary for the redesign than card sorted the selected cards.
Sketches
To start the design process we all started sketching on paper our logo, the home screen, and select pages. Next, we went into Figma to do our low fidelity prototype mock ups.
Lo-Fi Mock ups
Our low fidelity mock ups are the grey scale set up our navigation, footer, and heros.
Color Palette
Each group member presented a set of colors to the group that they felt would look best. In the end we decided on black, aqua, sand and red.
Logo
Our group researched logos for similar services and looked at the various logos the site has had in the past.
Mid-Fi Mockups
While we all split up the work my focus was on the navigation, footer, and the get a lawyer page for the mid fidelity prototypes.
Testing
Create a hero
Add a
search bar
Based on our mobile Mid-Fi testing we added the following to our Hi-Fi:
-
Banners to titles
-
Phone to bottom right of all pages
-
Logo change
-
Footer change
-
Dark navigation from white to black
-
Added a search button
-
Alignment and spacing
-
Choose photos that are more inclusive and diverse
-
Change of button colors
-
Implementing more colors from style guide
-
Added more content to pages
Cards
Hover
In addition to the above list Desktop Mid-Fi testing we added the following to our Hi-Fi:
-
Hover for navigation
-
Cards for latest news
Conclusion
Overall
Once we completed our final Hi-Fi prototype we presented our process to our class. After our class presentation we received feedback from our teaching staff, special guests, and our fellow peers. We than collaborated on our feedback we received and took action.
Some Final Revisions
-
Call to action button for getting a lawyer in the hero
-
A background to our phone button on mobile
CTA button
Background color added to phone button
Why are these changes important?
Our hope is that these revisions with move our users focus and attention to getting help instead of donating. We felt these changes would make our redesign more catered to our users needs due to the state of mind they would be in while using this site.
Instead of digging for how to get help we made it part of the navigation bar.
Created pages out of links
Desktop Recap
Our Desktop design started with navigation. To start we decided what content should be displayed upfront on the navigation bar based off of our user testing, interviews and research we gathered. Towards the end, we were able to fully conceptualize what our user would be feeling and looking for while going through our site. We discovered our users would be under stress and be most likely unfamiliar with the legal process. During our presentation we received feedback that our focus on donations should be switched based on our user intention of finding help.
Converted a sub page to a whole tab
Links to pages
Mobile Recap
As a team we decided to start with mobile to start small and add as we go. Collectively, we felt that the content on the site wasn’t as straightforward as we wanted. Initially, we were confused on what services they provided. Once we went through the whole website thoroughly we realized the content that should be displayed up front was hidden. We started with converting the links to tabs on our navigation. Throughout our process we discovered that our users wanted a site that was approachable and relatable. In responsive we purposely made our content, images, theme, and design based off of that. Starting with mobile made it easier for our team to make a more adaptable design and solidify what information was crucial verse fluff.
Our Goal
Our team's goal was to create a site, that was easily understood by our users to make navigating the legal process without a paid attorney less of a nightmare and more of a learning curve.
In the future our team will...
-
Continue doing mobile design first
-
Create sites based on user research
-
Implement the feedback we receive
-
Keep accessibility a priority
-
Make sure our content is approachable
-
Use easily understood language
-
Design for our users specific intentions