Out of Pocket
An Interactive Storytelling Website
Status: Completed | July – November 2018
TL;DR
TL;DR
In collaboration with the University of Victoria Access to Justice Centre of Excellence and Calibrate Solutions, we transformed a research paper about the unexpectedly high costs of family law disputes into an interactive story-telling website.
Outcome
Outcome
Team
Project Leads: Avery Au & Mari Zhou
UX Concept: Sam Horodezky & Veronica Wojnas
Graphic design & Illustrations: Francesca Oprandi & Ariana Cuvin
Story Design & Narrative: Sheau Lih Vong
Supporting Legal Research: Michael Macrae
Web Development: Sarah Boo, Nick Yang, & Erik Babak
Professional Backgrounds
UX design, graphic design, web development, law, public policy & political science
Project narrative
Project narrative
CALIBRATE and UVicAce had developed a methodology to estimate the direct and indirect out-of-pocket costs for Canadians involved in a family law dispute based on a wide range of variables (such as province of residence, annual income, distance from the courthouse, and level of personal conflict).
They wanted to share their research and methodology in a user-friendly way by creating an interactive website where users could learn about and explore the out-of-pocket costs of various personas.
When we first met with CALIBRATE, they had developed a single web page where 8 different personas were displayed. Users could adjust variables along the top of the page and the costs for each persona would update accordingly.
We proposed a 3-month project to refine their creative concept and build a new website while keeping their content and methodology largely unchanged. The project had 3 phases: scoping, design, and development.
During the scoping phase, we conducted a detailed review of their methodology and ran an ideation workshop. We were then able to articulate the goals of our redesign:
- emphasize the narrative format and align user interactions with the narrative
- ensure the type and magnitude of costs are easily understood by displaying them in a more intuitive and visual way
- enable users to easily learn more about the methodology
In the design phase, after iterating through different concepts, we decided on a two-stage user experience composed of a landing page and a persona page.
The landing page displayed all 8 personas in ‘baseball card’ which included a custom illustration and an overview of their personal story. We enabled users to filter personas based on key characteristics.
The persona page begins with ‘baseball card’ to maintain continuity for users. Users are then prompted to make choices about the persona’s life circumstances. After these choices are made, users receive a high-level summary of the total costs and may then continue to read the detailed breakdown in a linear way or may jump to a specific section of interest. Detailed costs are clearly presented with icons, bar charts, and first-person quotes from the personas.
Web development ran concurrently with design and the project was launched via social media in October 2018.
