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.
Lead product designer, UX/UI design, QA
Public Policy Institute of California
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.
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.
I came up with the following insights and “how might we” statements to guide the design:
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 PPIC.org was hiding a lot of content behind clicks and tabs, making users have to work hard to find or browse content.
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?
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.
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?
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.
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.
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!
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.
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.
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.
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:
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.
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.
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.
