Public Policy Institute of California

mockups of a laptop, tablet and mobile phone showing various parts of the designed PPIC website

The brief


Make PPIC’s work more accessible to reach a broader audience than academics and policymakers.


Organize information by topic area instead of document type to inspire people to browse the site. Enhance search to let expert users find exactly what they need, quickly.


A fully redesigned website and technology stack with a refreshed brand that makes its data more accessible for audiences and its digital tools more intuitive for its staff. Visit PPIC’s website here.


  • 63% increase in daily page views
  • 7x reduction in page load time


Lead product designer, UX/UI design, QA

Public Policy Institute of California


You can’t just do the work, you have to get into the hands of those who need to see it.

PPIC, a leading policy think tank in California is well-known and well-trusted among policymakers and academics in California. But, they felt that their website wasn’t adequately showcasing their work: It wasn’t intuitive to find information on topic areas, content wasn’t readily accessible and shareable, especially to a lay audience, and the search was so slow and inaccurate that people were reporting having to leave the PPIC site to Google search for PPIC’s own reports. Long Dash (where I work—formerly Atlantic 57) was tasked with redesigning the website, and we knew we would have to do an overhaul from the ground up.


Where does PPIC fit in the online landscape?

I joined Long Dash after this project was already underway so I didn’t participate in the user interview phase but joined just as we were starting the brand refresh and UX page design. When I joined, I co-designed with a senior UX designer. However, about a month after I started, that designer moved on to a different position, so I became the lead (and only) designer for the rest of the project. 

The research I completed for this project consisted of competitive and landscape analysis. I did in-depth research into different editorial content platforms such as news outlets and magazines as well as other think tanks. The client was very interested to know how they fit into their peer landscape so having a good sense of those sites was very important to the project and to our relationship with the client.

I did a landscape analysis at various points in the project as we moved through the different page designs (homepage, topic pages, article pages, navigation, email templates etc.). See below for a screenshot of the homepages of PPIC’s peers.

This image has seven different screenshots of homepages from PPICs peers. It is meant to show the landscape analysis process.

How might we elevate PPIC’s work through updated design?

I came up with the following insights and “how might we” statements to guide the design:


sun icon


The most impactful designs allow content to speak for itself.

The information architecture of other news sites gives users multiple ways to find content, while also allowing them to browse for articles they didn’t know they were looking for.

Outdated design on was hiding a lot of content behind clicks and tabs, making users have to work hard to find or browse content.

key icon


How might be update the site navigation to allow for easier search and browsing of content?

How might we design product pages to create a better online experience for users of PPIC’s site?

How might we use a modular approach to allow PPIC staff to continue creating site pages on their own?


sun icon


Content was hiding key insights and sharable facts behind long reports and PDF downloads.

While PPIC was informing the changemakers, they weren’t necessarily informing the public.

key icon


How might we update PPIC’s product line to better serve lay audiences?

How might we elevate key insights and facts out of dense reports to increase the reach and shareability of PPIC’s work?

Navigation and Architecture

User-driven navigation structure

Through the user and key stakeholder interviews, the team found that users of the site look for information based on topic (education, health, environment, etc.) instead of format (report, fact sheet, etc.). The site had been confusingly organized by both format topic so we knew we wanted to change this. We went through several iterations, ending up with a two-tiered navigation that was a middle ground between what the user interviews pointed to and what internal PPIC stakeholders needed.

This image shows three different version of a navigation bar you would find at the top of a website. They go from simple to more complex from top to bottom.

Design: Brand Refresh

In with the new and bright

While PPIC didn’t initially come to us for a brand refresh, we felt that the new site needed a modernized look and a refreshed color palette to go with it. They were open to these suggestions so we did some color and type exploration and came up with refreshed brand colors, new typography and recommendations for bringing their text and colors in line with WCAG guidelines.

This image show a side by side comparison of the two brand colors for PPIC. on the left are the old colors, which are a darker orange and an olive green. On the right are the new colors, which are a bright orange and a cool gray.

Design: Overall site

Embrace the scroll

We modernized the site pages with the new brand and gave everything a lot more breathing room. When PPIC redesigned their site many years ago, they had been told that scrolling was bad and had tried to put everything “above the fold”. We felt strongly that this was the wrong approach, since putting everything above the fold provides no hierarchy, no breathing room, and forces users to make decisions before they have been introduced to your content. We also presented research on the ubiquitous nature of scrolling and how users expect to scroll. We knew our client and knew they would respond well to us presenting good research!

One major stumbling block we ran into with this project was that we didn’t do wireframes. We went straight to designing the new pages in the refreshed brand. Because of this, there ended up being significant conversations about content structure and hierarchy at the same time as visual design review with the client. This proved to be very difficult, as the client was very literal in how they viewed our designs so we had trouble soliciting productive feedback at times.

I arrived too late to have influenced this decision not to do wireframes but will definitely take lesson with me into future projects! 

A screenshot showing the PPIC website before our design process (very short, crowded and dull looking) and after (much longer, brighter and with more breathing room for different sections)

Design highlight: Product line

Balancing simplicity and complexity

PPIC’s main activity is putting out research reports, fact sheets, briefs and a robust survey of Californians released regularly throughout the year. The design of this product line was a crucial part of the project and very important to PPIC. I spent a long time iterating on the right way to create a cohesive set of products that still were differentiated from one another and displayed all the information that was both necessary to the user and satisfied internal PPIC stakeholders.

A GIF of the header of an online report. You can see the mouse hover over two buttons to download the report to go to a policy brief. then the video scrolls down to open the table of contents.

We also encouraged PPIC to move their content into an HTML format rather than downloadable PDFs so that their work could be viewed accessibly online, especially on mobile. This was a difficult decision because a significant portion of their users still do print out content to read on paper. I spent a lot of time with the dev team figuring out how we could create a beautiful online experience and then have the page print as a PDF in a clean and readable way, saving PPIC the time of inputting their content twice (once online and once into a template for PDF). We did get there in the end!

The whole site was designed with a modular approach in Wordpress, which was especially important here as PPIC is now able to build their own reports and fact sheets in Wordpress. We created a flexible but defined set of modules they can use to accomplish what they need while still creating products that look like part of a set—without the need for a developer.

Design highlight: Fact cards

Getting the content out to the people

One completely new feature we added to the site was Fact Cards. One of PPIC’s main goals with this redesign was to make their work more approachable and accessible to the public, not just academics and policymakers. We designed small, shareable cards that contained nuggets of information and small, simple-to-understand charts that let PPIC get right to the point and pull out key facts from their reports and briefs.

A GIF of a "fact card" on the PPIC website. It reads "90%. Most Californias say housing affordability is a problem in their state." The GIF shows a mouse clicking an arrow to reveal the back of the "card" that shows the citation and the share links.

Design highlight: More features!

All the content that’s fit to design

I won’t take the time to write out all that I designed for this process but here are some more highlights that I haven’t yet mentioned:

  • Event pages that include a bespoke livestreaming window and share buttons
  • Redesigned data visualizations
  • Revamped press release process that minimizes clicks and memorization of codes for select users to access embargoed content easily
  • Newly designed search results page and process to help users find with they need quickly
  • Editorial advice and new design for the monthly survey report
  • Redesigned homepage better showcasing new and featured reports, including the ability to filter by topic right on the page
  • All new button styles


Holding up a magnifying glass

I was also responsible for 100% of the design QA post-development and created a useful cadence with the dev team to provide feedback. The client was very precise when it came to spacing and layout, so I did a detailed comb-through of every page, inspecting the CSS to make sure that everything was faithful to the designs.

A screenshot of a Figma board containing screenshots of the PPIC homepage next to my original designs of the PPIC homepage. The screenshot of the live site is annotated with arrows and comments that explain to the develop what need's to be changed to match my designs.

Unfortunately, those who scoped the project did not include any time for user testing on this project. We went through multiple rounds of design review with the client but of course would have preferred to show designs to users to see how they interacted with the new site. We do know that post launch, there was a 63% increase in daily page views, so we know the redesign went over well in that sense. 


A complete refresh of how PPIC presents itself to the world

This was a behemoth of a project and I won’t pretend that being thrown into being the lead and only designer, one month after starting my first full-time design job wasn’t difficult. But I was  supported by a great PM who took over partway through the project to get us all in line and a truly heroic engineer and QA expert. The dev team rebuilt the authoring experience from scratch that allows site administrators to spend less time on basic site maintenance and more time on user priorities, overhauled the search process, and worked together with me to make sure my designs were achievable and worked well responsively. 

This truly was more than a website redesign. It was a complete refresh of how PPIC presents itself to the world.

Visit the site here.

mockups of a laptop, tablet and mobile phone showing various parts of the newly designed PPIC website