Out of Pocket

Start: July 2018
Status: September 2018

  • Sam Horodezky and Veronica Wojnas, UX concept
  • Francesca Oprandi and Ariana Cuvin, Visual design and illustrations
  • Sheau Lih Vong, Narrative elements and story design
  • Michael Macrae, Supporting legal research
  • Sarah Boo, Website design
  • Nick Yang and Erik Babak, Building website features
  • Avery Au & Mari Zhou, Project Leads
  • Our Partners

The Law & Design CoLab collaborated with CALIBRATE Solutions Inc (CALIBRATE) and the University of Victoria’s Access to Justice Centre for Excellence (UVic ACE), to take a plain language approach to conversations about the real costs of family law disputes in Canada.

  • Background

Original OOP

CALIBRATE and UVic ACE developed 8 personas of family court users and several calculations to determine how annual income, distance from the courthouse, legal representation, and the province of residence affected the overall costs of a family law dispute. They validated their research through interviews with people about typical costs (child-care, missed work, transportation, disbursements, etc.) and consultation with experts.

When we first met with CALIBRATE, their website displayed all 8 personas on a single landing page. For each persona, cost figures were displayed in a table format under a lengthy narrative. Users were able to interact with three variables, displayed along the top of the page. When users changed the variables, costs for all personas were updated accordingly.

  • Our Objective

Our design process began by holding a couple workshops with CALIBRATE to clarify the objectives of the Out of Pocket Tool. We concluded that the core objectives were to communicate that:

  • the cost of going through the divorce process is greater than just direct legal costs incurred by litigants; there are numerous indirect costs and pressures on your emotional, physical and financial wellbeing
  • when combined, the indirect and direct costs tend to cause high fiscal duress to the litigant, especially litigants in the middle income brackets
  • being in litigation is extremely costly. Costs that were manageable in other phases can turn unmanageable
  • successful mediation is often cheaper than going through the court system

After a heuristic evaluation and running an ideation workshop, we concluded that the goals of our redesign were to:

  • emphasize the narrative component of each persona
  • use infographics to display numerical information in a more visual-friendly manner
  • clearly articulate the limitations, uses, and purpose of the tool
  • provide users with additional information on the the project’s methodology
  • ensure users understand that the tool describes typical family law costs and cannot be used to estimate users’ own legal costs
  • The Redesign

Explore the redesigned tool here!

OOP screenshot 1

We began by creating a more interactive, user-friendly interface composed of two pages: landing and a persona narrative.

To assist users in finding a persona that interests them, we added a filter to the landing page.

Users can skip the filters and scroll to all personas, each having a “baseball card”: for each persona, we created a custom illustration and a brief overview of legal issues and circumstances.

Once users select a persona, they are redirected to the persona narrative page.

The baseball card remains at the top of the page for continuity. Users are asked to make choices about the persona’s life circumstances, namely: province of residence, distance from the courthouse, annual income, and whether to have legal representation.

OOP personas

After a user makes these choices, they receive a high-level summary of the total costs of this persona’s family law dispute. Users can click a “See why” button under each cost category to jump directly to the sections providing further details.

The user can then scroll down the page to learn more about each category of cost. Costs are explained in a narrative format and through first-person quotes from the personas. We used icons, bar charts, and custom illustrations to break down information in a user-friendly and aesthetic way.

OOP Costs Image 1
OOP Cost Image 2
OOP Impact Screenshot