Pacific Legal Foundation is a 45 year old non-profit law firm, with 9 Supreme Court wins. In 2017, I led a re-design of their website into a modern tool for communicating their work.

Role

Product Owner, UX Research,
& UX Design

Platform

Responsive Web

mockup-plf-featured-2

01

the challenge

PLF had very compelling stories to tell about their cases — but those stories were difficult to connect with underneath the legal jargon, disorganized case documents, and inconsistent navigation.

Our mandate was to increase donations & press engagement. Our challenge was to create a robust digital platform that could support legal professionals and laypeople — we needed to find ways to surface the emotional core of cases, without putting legal details too far out of reach.

Below: Stakeholder interviews, hueristic analyses, and analytics uncovered many opportunities for simplification and increased usability.

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. 

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

02

content architecture

Because the site was so difficult to manage on the backend, content managers tended to load videos, photos, podcasts, and PDFs on off-site platforms like YouTube, Scribd, and Flickr — about 30% of their case content was completely undiscoverable via the main site, and very easy to permanently lose track of.

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.

Right: a content audit of the old website.

current-pacificlegal-map copy

03

user research

We conducted eight open-ended user interviews with audience members in our target demographic and psychographics.

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.

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 really appreciated knowing the expected donation amount. Others felt the amount was too high, and 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

This [the donor kit] is great. [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. 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

Case Studies

At the Fork VRExperience Design

Background

I started designing and building websites and games in 2006, but as my dad would tell you, I started playing with (and occasionally breaking) computers (usually his) long before that. After studying biology and literature in college, I returned to product design with a passion for research methodologies, human-centered technology, and an itch to make things.

My brain likes making connections between different perspectives; I’m happiest when I can be the “glue” in a project or team.

Linkedin
Dribbble Square