PacificLegal.org
A modern redesign for a legal powerhouse

In 2017, Pacific Legal Foundation (PLF) hired us to redesign their flagship website. As part of their 50-year anniversary rebrand, our task was to create a modern digital product to spark new relationships with young, first-time donors, and provide best-in-class support to journalists writing about PLF's cases.

My Role: 
Lead Designer, Creative Producer

Case Study Focus:
Strategy, Experience Design

Results:

  • 200% ROI within 90 days of launch
  • Avg monthly revenue increased by 1,000%
  • Avg "small" donation size increased by 220%
  • Avg scroll distance & time on page doubled
cover

interviews & strategy:
two very different types of users

PLF is a nonprofit law firm with a variety of important users. After extensive interviews, analytics, and stakeholder workshops, we identified our highest value users:

  1. New Donors: Young (under 40), curious, and tech savvy, these users are looking for a compelling story about PLF's cases, and they will be turned off by too much jargon or technical information.
  2. Journalists & Industry Experts: These are power users who are coming to the site regularly for documents and updates on particular cases. They are frustrated by overcommunication or irrelevant storytelling.

 

Photo-Apr-10-7-29-16-PM

leading a stakeholder workshop
with Art director Ernesto Morales

leading a stakeholder workshop with Art director Ernesto Morales

heuristic analysis:
mobile-hostile & high-friction

The old website violated a number of usability principles, especially for mobile. Some of the biggest issues:

  • Inconsistent navigation: Menus and submenus showed different text on different pages, which made it hard to understand how the site was organized. Subnavs were also hidden on mobile, or in a hover-only menu.
  • Unnecessary required fields: Most required fields on nearly every form could have been eliminated.
  • Inflexible form design: To switch payment type or donation frequency, users had to go to a completely separate page and fill everything out again.
heuristic analysis – redo
heuristic-analysis-cases

information architecture:
prioritize user-centered content

We performed a content audit and found a static, confusing ecosystem of information. Most pages were hard-coded and filled with broken links to context that had been moved to a new location.

In the new sitemap, we prioritized flexible, user-centered content models by breaking up static pages into discrete, serachable post types and bringing offsite content into the site. 

Old: lots of hard-coded pages
& broken off-site links

Old: lots of hard-coded pages & broken off-site links

current-pacificlegal-map-copy-pdf

New: discrete post types for replicable
content & flexibile relationship models

New: discrete post types for replicable content & flexibile relationship models

the new pacificlegal

prototyping
and validation:
finding ways to make everyone happy

We did 2 rounds of prototyping and user testing, using Invision and Lookback.io.

forms for humans,
not sales pipelines

PLF wanted to collect a lot of information about new donors. In particular, they wanted mailing addresses because their older donors responded well to direct mail. But in interviews, users said they resented getting paper mail and were suspicious of requests for their addresses.

We wrestled with a number of solutions, and found a winner: to help PLF collect mailing addresses without alienating younger users, we reframed the request as an offer of swag, and made it optional on the Thank You page.

How might we:

  • Remove unnecessary form fields
  • Provide a variety of ways to pay
  • "Nudge" users to give a little more
  • Reduce decision-fatigue by focusing on only one or two tasks at a time
  • Save & re-use information instead of asking for it again later
  • Incentivize users to give their mailing address, without alienating younger donors
donate-flow-2

Feedback from user testing w/ new donors

Comment Alt Check.2

This [the thank you gift] is great. Another organization got me so many times last year because they kept sending me emails like “Donate now to get this sticker!” and I was like hell yeah I want that sticker.

Comment Alt Check.2

[The pre-filled amount] seems higher than what I’d be inclined to give naturally, but not by enough to make me not want to donate. It makes me think there must be a reason for that amount.

using issues as context,
not architecture

PLF's cases are focsed on a set of particular policy issues, like free speech and property rights. They believed that their donors cared about some issues, but not others, and would gravitate to pages dedicated to specific issues.

In testing, we found this wasn't the case: users cared about stories, and felt confused by the distinction between issues, cases, and other content. Issues were simply too abstract to be used as site architecture. We had much more positive feedback when issues were presented as context that tied a set of stories together.

user feedback on issues page:

I don't really think about issues like that? I liked the case page, where there was a particular story to get into. I definitely want to see more of that.

no-issues

surfacing context
alongside storytelling

We designed the Case Page to be a hub of information that catered to two different users: new donors wanted to be immersed in the story of the case, while journalists wanted quick, digestible highlights and fast access to updates and documents.

Key Principles

  • Show "Case Status" above the fold
  • Succinctly state why this case matters 
  • Invite journalists to subscribe to updates for just this case
  • Create opportunities for donors to be immersed in the story
  • Show documents in chronological context
  • List which attorneys are working on the case
Individual 1440px

Feedback from user testing w/ Journalists

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?

Comment Alt Check.2

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 Check.2

I love this. I'm always saying, "You guys HAVE the documents! Don't make me go look for them!" And there they are!

Comment Alt Check.2

I really appreciate the "track this case" — I have SO much in my inbox, I don't want to have to sign up for every email you send out just to get updated on this.

make it easy
to find things

Navigation isn't fool-proof. We designed a site-wide search that was fast, easy to use, and intuitive to filter.

make it easy
to find things

Navigation isn't fool-proof. So we designed a site-wide search that was fast, easy to use, and intuitive to filter.

UserFlow2x

results:
happy client,
happy users

Within 90 days of launch, the redesign produced a 200% ROI for our client's investment. Some key metrics we observed over the long-term:

611%

increase in donation frequency

220%

increase in average "small" donation size

200%

increase in average
scroll distance

1000%

increase in average monthly revenue

Credits

Technology: iwitness design
Art direction: ernesto Morales
visual design: katie kovacs
junior UX designer: johann Ash
brand design: Adam Ziske

Hey there!
Let's talk.

Want to learn more about me? I love coffee and talking to people. Shoot me an email, and let's meet up!