I’m a huge fan of ProPublica: courageous investigative journalism, valuable shared data, beautiful editorial design, and measurable impact. A five-week sprint to expand their one-page data store into a “classic, sensible, UX-minded storefront” sounded like a perfect project.
Kickoff & Mapping
Starting with an in-person kickoff, we reviewed their existing users, content taxonomy, funnels, business goals, user goals, CTAs, user experience, and backend. They had three main audiences, and three types of datasets, but thorough questioning made it clear that the APIs were the priority piece. I did a sticky-note site map as we talked, until we were on the same page about the scope and general functionality of the project.
Research & Content Strategy
Next I researched the competitive landscape — both direct competitors and parallel inspirations (e.g. great shopping or SaaS sites). To critique and present, I did lo-fi content diagrams instead of screenshots or spreadsheets. This helped stakeholders zoom out and think about the common UX patterns, the content they might create, the hierarchy it might fall into… and how their positioning would differ. I also drafted a detailed content outline and filled in the known screens and elements.
User Experience
With our strategy clarified, I moved into user experience design. The storefront (home page) was very important to stakeholders, so I wanted to allow it the most revisions possible. I created a detailed wireframe of a proposed user experience to gauge reactions to some ideas.
User flows
From there I did lo-fi flow diagrams for each user group (journalist, academic, or business), sketching their experiences through the site. This facilitated discussion about the primary actions and clarified the supporting functionality that we’d need to design and develop. I revised the flows to add or drop screens and/or sections as needed.
Revised site map
Using all the new information gained from the research, content outline, and flow diagrams, I revised the site map to confirm the new vision.
Layouts
With the overall architecture and flows figured out, it was finally time for layouts. Most of the content wasn’t finished, but we were on a strict five-week schedule so I drafted rough text and moved forward. I made grayscale wireframes in Sketch, so the designer could use the same files for design. Their main purpose was to confirm functionality, content, and hierarchy (but I always work on the typography too). I used InVision to make them clickable and get more realistic feedback, and we fit in another round of revisions.
Design skin
This was a UX project, not UI, but I designed a quick skin using colors and fonts from ProPublica’s site so that the prototype looked more “real” for testing. I found an icon set to serve as the category illustrations, and drafted a few others. More detailed art direction for each section/screen would be done by ProPublica’s designers once the content was finished.
HTML prototype
I prepped all the assets for production and moved on to code. I used Jekyll to build a simple static prototype (so the content could be edited just by editing markdown files, no database needed), and hosted it on Github Pages (free). I set up the CSS architecture (a custom framework of Sass and namespaced BEM) to be as fast and minimal as possible, but still suitable for production. We logged a couple more rounds of comments and revisions in Github.
Documentation
To prepare for handoff, I zipped all the Sketch files and wrote a beginner-friendly README explaining Jekyll, Sass, and BEM.
We ended the five-week sprint right on time, and ProPublica’s developers and designers took it from there: adding a CMS, creating a beautiful visual design, and continuing to iterate on the UX.
“It looks great, it’s easy to use, it’s easy to manage — and people are using! Data’s rolling out, buyers are reaching out, and email signups are happening. I couldn’t be happier.” —Celeste LeCompte, Director of Business Development