Pacific Legal Foundation is a non-profit law firm, with 9 Supreme Court wins and 45 years of complex cases. In 2017, I led the redesign of their website into a modern, intuitive tool for communicating their work to the public.

Role

Product Owner
UX Research
UX Design

Platform

Responsive Web

mockup-plf-featured-2

01

the challenge

PLF had deeply compelling stories to tell about their work — but it was difficult to find and connect with them underneath the legal jargon, disorganized case documents, and inconsistent navigation.

Our challenge was to create a robust digital platform that could support legal professionals, journalists, and potential donors. We needed to find ways to surface the emotional core of cases, without putting legal details too far out of reach.

Somewhere on the site is a page about our San Joaquin Valley project. Where? I don't know. There's no obvious way to navigate to it. 

Stakeholder interviews uncovered a consistent desire for simplification and ease of navigation.

Photo Apr 10, 7 29 16 PM
Image uploaded from iOS (12)
Usability

02

information architecture

While performing content audits, we discovered a major IA issue: because the site was so difficult to manage on the backend, content managers tended to load videos, photos, podcasts, PDFs, etc. on off-site platforms like YouTube and Flickr, instead of on the site.

About 30% of case content was completely undiscoverable via the main website — written pieces that were posted as captions on Flickr or video descriptions on YouTube were essentially lost, and no one could remember where they were, how to find them, or if they even existed.

Telling managers to stop doing something that was easy and convenient wasn't a sustainable solution. We realized we needed to radically improve usability on the back-end in order to fix the root of the content discovery problem.

Key Insight: content managers are users, too. The usability of the back-end of any site can dramatically affect the usability of the front-end.

Below: a content map of the old website, and our final sitemap for the new website.

current-pacificlegal-map copy
Sitemap

03

user research

To kick of UX research, we conducted eight open-ended user interviews with audience members in our target demographics and psychographics. We uncovered a handful of insights and generated a few hypotheses we wanted to test.

Most importantly, we discovered that users wanted PLF to tell them a story. Even legal journalists, whose day-to-day often included sifting through jargon-filled case law and briefs, told us they needed to see the "human side" of casework first.

You guys have the documents! Don’t make me look for them!

Journalist #1A, on having to track down legal documents on various (terrible) government websites. We decided to try displaying all case documents on the relevant case's page, within the context of a timeline.

Processed with VSCO with s2 preset
IMG_6583
plf-charts&notes

Physical mail is so impersonal. It's such a vaste waste of resources and contributions. I never open it.

Donor Interview 2B, on receiving physical mail from non-profit organizations. We were concerned this would be a friction point for potential new donors.

04

ux design + validation

After some initial sketching, we sprinted to bake our assumptions into wireframes so we could test them. We tested our first round designs with 3 journalist users and 4 potential donor users via an Invision prototype and a guided task-based interview.

PLF Designs

Key Insight #1

Journalists want helpful context, hate automated contact forms

In order to give PLF space to tell each case's unique story, we broke them out into their own content type, which could be connected on the back-end to relevant legal documents, press releases, and case updates.

We introduced a handful of new features to these pages: case documents presented in a timeline, a summary of the most important points of the case up front, the ability to subscribe to updates for just this one case, and a one-click "book an interview" feature.

Cases in detail

The Good: Journalists loved the "At Stake" module, and the short case status updates at the top of the page. They also appreciated the timeline context for case documents, which can be difficult to understand otherwise.

The Bad: No journalists clicked on the "Book an Interview" button, even when prompted. They told us that it felt too impersonal, and was too much of a "black box" — Who was this going to? When would they respond?  What if I just have a question? — and preferred to look for an email address to a media contact first.

 

Tip: hover over the "+" icons to see annotations for specific features.

Comment Alt Check.2

This is great. It’s often hard for me to understand the chronological order of lawsuits. I want to know — which thing happened first?

I’m always looking for how can I figure out QUICKLY what’s at stake. And there it is right there — what’s literally at stake.

Comment Alt Times.1

“Request an interview” says to me “This is going to take forever.”

When I see a contact box, I don’t know who it’s going to… I’ll do it, but I always find myself trying to track down a real email address anyway.

Key Insight #2

Donors want to get sucked into a story, and swag makes them feel like part of the team

The old donate form was a 5-part, 27-field monster of a process, duplicated across separate pages for donating once, monthly, or by stock. But with so many fields, there wasn't much room on the page to reinforce for donors why they should contribute.

We began by eliminating as many not-really-required fields as we could; when it came to the mailing address we hit a roadblock. PLF's donor team really wanted mailing addresses, because they were very helpful for follow-up; but we'd heard emphatically in interviews that requiring mailing addresses was a major red flag for younger donors.

So we tested a compromise: we put the mailing address form on the Thank You page, and reframed the request as a way to receive swag. It worked: testers reported that the donation process was vastly improved, and they felt more motivated to both donate and give their mailing address.

Donate Flow in detail

The Good: testers loved the more narrative layout, and the radically simplified form. They also loved the idea of getting a "new donor kit."

The Meh: we designed a donate "widget" so that users could easily donate from other pages, too — they didn't. It was a nice reminder of the CTA, but our users liked going to the Donate Page itself.

The Mixed: we tested a pre-filled amount ($60, slightly more than the median donation) along with radio buttons for the donation amounts. Some users thought this was helpful context, and appreciated knowing the expected amount. Others wanted the opportunity to select from a range of suggested donations.

 

Tip: hover over the "+" icons to see annotations for specific features.

Comment Alt Check.2

They [another org] got me so many times last year because they kept sending me emails like “Donate now to get Y sticker!” and I was like hell yeah I want that sticker. They just sit on my desk, but I love getting them. It makes me feel like part of the team.

It seems higher than what I’d be inclined to give naturally, but not by enough that it makes a difference for me. I want to know why that’s the suggested donation. Is this what new donors typically donate?

Comment Alt Times.1

Having options makes me feel like there are other people out there donating less than I am, and I’m going to out-donate them with $10. So I’m not the cheapest, I’m like a “middle” person. Having smaller options emphasizes to me that “anything helps”.

Even though there was a donate box [on other pages], I still wanted to click on that donate button and go to a donate page. I wanted like one last little serotonin hit of confirming why I’m donating.

05

visual design

PLF had a new logo, designed by my colleagues Adam Ziske and Ernesto Morales — but they didn't yet have a full design system to go with the site. We arrived at a modern design that leaned into the bright, bold colors of the logo, but tempered them with highly readable fonts and expressive photography, and we created an "atomic" design system that could be applied to new components in the future.

PLF_PRIMARY_VERT_FULL COLOR_300dpi
Screenshot 2019-09-07 09.38.55
Screenshot 2019-09-07 09.31.33
Screenshot 2019-09-07 09.32.14
Screenshot 2019-09-07 09.32.24
smartmockups_jjpz0p9s
UserFlow2x
smartmockups_jjq1surg

06

results

How did we do? Overall, we crushed it: we saw a huge increase in donations with launch, a 40% increase in average gift size, and a sustained 1000% increase in donations month-to-month from younger donors.

More donations in the first month than in the previous 24 months combined.

Content managers reported that the backend we recommended was much easier to use. While we weren't able to collect any journalist-specific metrics, we did see an increase in time on site, and for the first time ever, PLF was able to track advanced analytics without duplicating efforts across platforms.

Credits

Creative Direction: Marshall Walker Lee
Brand Design: Adam Ziske
Art Direction: Ernesto Morales
Technology: Josh Cunningham & iWitness
Jr. UX Designer: Johann Ash
Visual Design: Katie Kovacs