There was no client brief. I noticed that the social media analytics and research teams we ran for Noogle and Wayvo struggled with design, and it kept them from focusing on intelligence. Their reports were built under deadline, page by page, and they looked it. A sharp finding in a rushed layout reads like a rushed finding.
The analysts did not need to become designers. They needed a page that was already designed, where the only decisions left were about the data. So I pitched a design system for reports, built it in under three weeks with design ops and agile methods, and named it for what it promised: BloQ, Blocks and Quality.
Before BloQ
With BloQ
Before: a weekly executive summary from before BloQ, redrawn as a wireframe. After: the profile page above.
Before and afterThe same weekly summary, before BloQ and rebuilt with it.Before: 2017An executive summary from 2017, built by hand.
The original pages, blurred. Click any page to enlarge it.
The ideaMondrian, built with LEGO
The style comes from Piet Mondrian: a grid of ink rules, a few fields of colour, and everything else white. It reads as sophisticated and data-driven, and it is strict enough that no one can break it by accident. The building method comes from LEGO. Every page is a set of blocks that snap to the grid, and every block type has a spec: charts, scorecards, verbatims, insights, tables, maps, definitions, process flows and more. The system became a playful resource for analysts who wanted to build their reports quicker.
The only decisions left on the page are about the data.
Piet MondrianThe grid of ink rules and fields of colour.LEGOBlocks that only fit one way.
A style-guide sheet, redrawn from: the Wayvo secondary palette (the guide labels Blue #db4437, Noogle's red; the swatch is #003366), the stacked-bar spec, type and margins, and the block library from the specs list.
And the guide as it shipped, one sheet per rule and per block:
Colour palette: WayvoMarginsChart specsArea chartStacked bar chartDonut chartScorecardsTimelineIcon library
A page, taken apartGrid first, insight last
Every BloQ page is the same stack. The grid goes down first, then the colour fields, then the axes, the data and the annotated moments. The headline is written last and goes on top, because it is a sentence about the data and not a title: here, that #LocalGuides led Twitter's hashtags again in the second quarter.
1Grid
2Colour and scorecards
3Axes
4Mentions
5Moments
6Headline
A Noogle social listening page, 1 April to 30 June 2019, rebuilt from the capture. Scorecards and labels are the page's own; the daily lines are traced from its chart, to about one mention.
The workHundreds of pages, one system
BloQ is easiest to judge by what came out of it. These are the pages, as delivered: social listening, key opinion formers, audiences, sentiment and company analysis for Noogle, Wayvo and Allied Leaf Tobacco. Three brands, two themes, one grid.
Twelve delivered pages on one table, each lifting in turn. The original pages, blurred.
Report pages side by side.
Noogle
Key opinion former profileReshma Saujani, CEO of Girls Who Code.Social listening#LocalGuides and GAFAMY mentions, Q2 2019.GAFAMY sentiment breakdownNegative and positive sentiment, and what drove it.KOFs distribution chartKey opinion formers by post count and net sentiment.KOF spotlightThe most vocal negative voices among Noogle mentions.Volume timeline: momentsEntertainment and culture moments across 2019.Month-long momentsThe top five accounted for 89% of mentions.Share of engagement by platformLinkedIn led the increase from Q1 to Q2.Audience type analysis: NooglersWho the Noogler engagers were.
Wayvo
VidTube audience, Q2 to Q3Gender, age and region shifts, with the posts behind them.Key story: Lyft’s self-driving labVolume, sentiment and the verbatim that drove it.Company analysis: Pony.aiShare of the autonomous-vehicle conversation.Instagram follower growthApril was the strongest month, +881 followers.
Allied Leaf Tobacco
Social network analysisSection cover.New categories meet identity and daily lifeSNA: identity and daily lifeCommunities mapped from the network.What interests do NC users share?The untapped opportunity, found in the graph.THP total engagementMarket, glo and IQOS, month on month.Market sentiment breakdownPositive and negative sentiment, with verbatims.Influencer profile: RihannaReach, fee range, partnerships, demographics.Mentions overview: Tyler, The CreatorEvent-related mentionsAudience analysisVuse and Rolling Stone: Rooftop SessionsReport cover.
The pages are shown blurred, so no client’s content can be read. Click any page to enlarge it.
Design opsThirteen jobs a machine should do
Speed came from design ops. The system shipped with principles, asset libraries, best practices, style guides, a microcopy guide for writing insights and onboarding tutorials for analysts. It also shipped with add-ons for presentations and spreadsheets that did the repetitive work for them:
- Find duplicate fonts
- Generate copy for presentations and sheets
- Find out-of-page elements
- Align elements to the style sheet
- Send all images to back
- Unlink all charts and objects
- Detect and delete file metadata
- Add copyright to files
- Replace a colour across
- Replace one typeface with another
- Find broken links
- Delete internal links
- Delete comments
Charts built in SheetsData and chart editor, ready to link into presentations.From Sheets to the network graphTables in, Gephi communities out.
The working files behind the pages.
BloQ sat on top of a whole reporting operation, and the system had to work for all of it:
The team
- Business analysts
- Data capture
- Project managers
- Dataviz artists
- Data scientists
- QA analysts
- Developers
- Account managers
- Anthropologists
The tools
- Google Docs
- Google Sheets
- Data Studio
- Google Analytics
- Illustrator
- Figma
- Tableau
- Gephi
- Sprinklr
The sources
- Twitter
- Facebook
- VidTube
- TikTok
- Reddit
- Quora
- VK
- Noogle
- Yahoo
From the specs list and the tools and team.
The outcomeFrom 18 reports to 200
After BloQ shipped, production went from 18 reports a year to 200, and the data visualisation team grew from two people to five. It worked because it was built on research into the analysts' day-to-day work, and because it was easy to use. Cross checks built into the process brought human errors under 2% for the whole year.
Noogle and Wayvo praised the work and asked our team to train their own designers to run design ops at scale. That year Raven Path won $5 million in retainers for recurring reporting, against $400,000 the year before. The system went on to deploy 900 Allied Leaf Tobacco reports, and some ICM reporting products, across 15 markets.
3 weeks
to build the system
200
reports a year, from 18
$5M
in retainers, from $400K
<2%
human errors in a year
All self-reported. The revenue figures are Raven Path's, and BloQ was one part of that year.
My role
- Product pitching
- Product UX lead
- Design ops
- Agile product management
Clients
- Noogle and Wayvo
- Allied Leaf Tobacco, ICM
- Raven Path, Chicago
Sources: "Portfolio 2024, Plan C Optimized": the brief, the product, my involvement, the team and tools, the specs, the examples and the results.
Data: the profile and the social listening page keep every value printed on the report pages; the follower line and the daily mentions are traced from their charts. The insight line on the profile page is written from its own numbers (403 of 769 tweets; 53.5K of 72.5K engagements). The redrawn profile page uses initials instead of the portrait. The original pages are shown blurred, so no client’s content can be read.
Raven Path, in Chicago, was the public brand. The team I worked in was Node Cltda, in Guayaquil, Ecuador.
Colophon: every page redrawn in vector, block by block, and staged in 3D with three.js. Written with Clikiti Portfolio from my own material; I approved every line.