Texas Fair Defense Project

Screen Shot 2020-10-15 at 4.32.02 PM.png

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.

Screen Shot 2020-10-26 at 1.35.12 PM.png

 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

TFDP Get A Lawyer Page Redlining and Dev
Screen Shot 2020-10-26 at 3.01.10 PM.png

 The Problem & Our Solution 

The Problem

 >

We have observed that people don’t have proper guidance in navigating the legal process, leading to injustice.

Legal Advice
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.

image 7.png

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.

Texas_Fair_Defense_Project_Austin_Crimin
Desktop View
Our Work Nav Criminal_Debt_tfdp 1.png

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

 >

Group 2.png
Mobile Our Work Sub Nav Criminal Debt.pn

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

Screen Shot 2020-10-27 at 4.11.37 PM.png

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.

Screen Shot 2020-10-27 at 4.18.59 PM.png

Interview questions

  1. Do you feel that bail is unfairly leveraged in misdemeanor cases?

  2. Do you feel like the Texas justice system is too complicated for average citizens to navigate?

  3. If you had to use a public defender for a misdemeanor charge, would you seek volunteer legal help outside the court system?

  4. Do you feel like an attorney would give you the best shot at assisting with your case?

  5. Have you used a public defender? If so was it because of the attorney fees?

  6. Where would you go if you needed legal assistance?

  7. Would you feel comfortable using a pro bono attorney aka volunteer attorney? 

  8. Would you consider legal help from a non profit organization that has volunteers? Why or why not?

  9. Which methods would you use to look for an attorney? Such as the internet, word of mouth, etc.?

  10. How familiar are you with the Texas Justice System? 

  11. In which ways do you think the justice system could improve to help those who can’t afford the traditional route of an attorney?

Screen Shot 2020-10-27 at 4.12.11 PM.png

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

Screen Shot 2020-10-28 at 3.30.14 PM.png

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.

Screen Shot 2020-10-27 at 4.30.17 PM.png

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. 

Screen Shot 2020-10-27 at 4.39.26 PM.png

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.

Journey Map.png

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.

IMG_0266 (1) 1.png
IMG_0269 (1) 1.png
IMG_0267 (1) 1.png
IMG_0268 (1) 1.png
IMG_0270 (1) 1.png
IMG_0271 (1) 2.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

Screen Shot 2020-10-29 at 10.38.34 AM.pn
Screen Shot 2020-10-29 at 10.35.05 AM.pn

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.

Screen Shot 2020-10-29 at 12.35.27 PM.pn
Screen Shot 2020-10-29 at 12.35.40 PM.pn

Lo-Fi Mock ups

Our low fidelity mock ups are the grey scale set up our navigation, footer, and heros.

Screen Shot 2020-10-29 at 2.03.26 PM.png
Screen Shot 2020-10-29 at 1.29.35 PM.png

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.

Screen Shot 2020-10-29 at 1.38.01 PM.png
Screen Shot 2020-10-29 at 2.25.01 PM.png

Logo

Our group researched logos for similar services and looked at the various logos the site has had in the past.  

Screen Shot 2020-10-29 at 1.11.25 PM.png
Screen Shot 2020-10-29 at 1.11.37 PM.png
Screen Shot 2020-10-29 at 1.16.19 PM.png

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

Screen Shot 2020-10-29 at 4.32.30 PM.png

Create a hero

Screen Shot 2020-10-29 at 4.31.49 PM.png

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

Screen Shot 2020-10-29 at 4.33.20 PM.png

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

Screen Shot 2020-10-30 at 10.38.34 AM.pn

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.

Screen Shot 2020-10-30 at 11.54.01 AM.pn

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.

Screen Shot 2020-10-30 at 12.55.08 PM.pn

Converted a sub page to a whole tab

Screen Shot 2020-10-30 at 12.55.22 PM.pn

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

Screen Shot 2020-10-30 at 1.54.52 PM.png

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