This article is part of a series of case studies that follow my journey of practicing and refining my Object-Oriented UX process. Read the case study of the 2012 CNN Election Results here.
THE PROJECT
CNN Election Results 2016 was a unique project. For me, it was (and still is) the only project in which I got the opportunity to tackle a previous design challenge for a second time. Four years prior, I had been the lead designer for the 2012 CNN Election Results — a project that forever changed my thinking, my process, and my career. That project had been a huge success, but it was in no way perfect. (For added context, read my case study on the 2012 project. In many ways, it’s the prologue to this story.)
Looking back on my 2012 mistakes made me cringe. Now I had a second chance — I felt like I was getting a time-travel redo! The challenge was almost exactly the same, but I was a totally different designer: a designer with more experience, more confidence, and Object-Oriented UX.
THE CONTEXT
Four years after I’d lead the UX design for the 2012 Election Results, and three years after leaving the CNN Digital team, I was back in the newsroom. During the second term of the Obama administration, I started my UX shop, wrote about Object-Oriented UX on A List Apart, and joined the design conference circuit (memory lane).
It was an exciting time. OOUX seemed to be catching on and my clients were happy to let me use my unconventional process. I was primarily working with start-ups in Atlanta: small teams of mostly engineers. OOUX made sense to them. This was straightforward, no-nonsense UX that spoke their language.
When the next presidential election cycle rolled around, I realized that I desperately wanted to return to the challenge that had started it all. So in January 2016, I reached out to CNN to see if they needed help: would they want me to come back and exceed the success of 2012? Over lunch with Chris Cenkner, who had been my manager at CNN and who was still leading the team there, I scribbled out how I saw the information architecture on a few sticky notes.
But I’d have to set my vision aside. Chris, who wanted to bring me back in, had to explain to me that a new team within the New York office had it under control.
The answer was no.
THE GAME PLAN
The answer was no — until the team in New York “dropped the ball.” In June, I got an email asking me if I’d like to come on to help the Atlanta team with the election results experience. I’d already moved on to other projects and had at least three other clients at the time! But designing the results interaction for CNN on election night is not an opportunity one turns down. So, just like in 2012, I found myself coming onto the election results team super-late in the game.
MY JOB
My role on the project was broad and loosely-defined. I was the only UX designer and I was given free reign to decide what that meant. It was up to me to make research happen and decide what needed to be done.
I had quite a bit of freedom and responsibility, but as a part-time consultant (limited to 20 hours a week), I was not given much authority. This is common for UX designers — so much of the success of a project falls on our shoulders, but we are often not given much authority to get what we need from others.
WHAT I DID
We were already behind schedule when I joined the team, but I hoped we could at least get a survey out to gather some data to help us prioritize our efforts.
I whipped up a survey to send out to various user groups. I wanted to understand priorities: what was the most important data? What content did people want to see alongside the data? And how important was personalization and customization?
Unfortunately, I ran into friction getting the survey sent out. I am not sure if it was legal issues, a diffusion of responsibility, or something else, but in digging up old email threads, there is one thing for sure. I only followed up once. After creating the survey and getting it into the hands of those who could send it out, I figured I’d done my due diligence in conducting some primary research. After my efforts returned with the sound of crickets, I gave up.
This will be a theme throughout the project. I was confident in my process — but in retrospect, I didn’t push hard enough to get what I needed. Sadly as UX designers, we often have to be pushy. But as someone who is confident, rebellious, and extroverted, it’s sometimes even hard for me to find the energy to fight the good fight. In looking back, I can see how far I have come in learning how to do this diplomatically — and with empathy for the other (very busy) people on the team.
Early OOUX Work
Lacking any primary research I dove into my OOUX process by reverse-engineering our 2012 design as well as our competitors. I also layered on the requirements I received from our lead politics editor.
I’d already honed in on what our objects would be: CANDIDATES, SEATS, STATES, INSTITUTIONS, BALLOT MEASURES, COUNTIES, and DISTRICTS. In 2012, one of the most mind-pretzeling aspects of the data emerged down at the county-level and district-level votes. “Objectifying” COUNTIES and DISTRICTS was incredibly clarifying.
This was one of the first projects (if not the first) where I leveraged a Nested-Object Matrix. Before getting into object mapping, I listed the objects on an x-axis as well as a y-axis. In the intersections, I explored all the possible relationships between relationships. This is something that I still practice and teach today.
In the first weeks I was back in the newsroom, I tried to gather the team to participate in an object mapping workshop. But… we had detailed requirements written! We had the successful 2012 design to go on! And we were behind schedule!! Yeah, there was push-back. I didn’t know how to convince my design team in Atlanta, much less the busy subject-matter experts in Washington DC, that moving some sticky notes around with me for a day would save us time in the long run.
So, I object-mapped solo. And I didn’t even get time to present the map in a review meeting. I emailed the object map to the team and asked for feedback. No surprisingly, I got no feedback at all — no one knew how to read the following diagram! I was back in the big leagues with my candy-colored diagrams and impostor syndrome was kicking in.
One of the big IA challenges of elections is that various instances of the SEATS relate to STATES and INSTITUTIONS differently.
The “president” SEAT is an INSTITUTION and crosses all STATES.
A “Georgia Senate” SEAT is part of an INSTITUTION (senate) and has 1 STATE.
A “Georgia Representative, District 4” SEAT is part of an INSTITUTION (house) and has 1 DISTRICT (and 1 STATE as well, by proxy of the DISTRICT).
As information architects and UX designers, it’s our job to figure out these truths, so that we can represent them as best as possible. In 2012, without OOUX, keeping these relationships straight was tough. But with OOUX, I made a few system models to visualize our election system from a birds-eye view.
Low-Fidelity Connected Templates
Before getting into detailed wires, I mapped out an OOUX-style “site map” that illustrates how users will navigate through the content. Later on, I’d introduce persistent navigation, but first, I wanted to make sure the navigation worked well without it. This is especially important for mobile, where the persistent navigation is often folded away into a menu.
The State Snapshot
The biggest change in the UX between 2012 and 2016 was the introduction of a “state snapshot card.” Because STATE was an object, and most objects get some sort of card, I explored how the status of all the SEATS across a STATE could be visualized.
With some help from visual design, we realized the power of the state snapshot card! The list of states was a comprehensive navigation and data summary device. This is a core principle of OOUX: your content (or data) should be the navigation itself.
But because this was a totally new way of visualizing results (and none of our competitors had done anything like this in 2012 either), I knew we needed to test how users were interpreting these graphics.
The visualizations tested well. So well that this list of states played directly into our design for the persistent navigation.
And in production on election night, this list of state snapshots provided a backbone to the entire experience.
Skeuomorphism 2.0
Skeuomorphism is a design aesthetic popularized in the nineties and early 2000s. It’s style of literal real-world mimicry: think the early apple iCal that sported digital faux-leather trim and ripped pages. Or a digital music player with volume knobs that look like a 1950s radio.
Skeuomorphism went out of style as designers realized that they should be embracing the visual design medium of the web: CSS and pixels. The backlash resulted in Flat Design, which threw the baby out with the bathwater. To make a long story short, Apple got rid of its button borders completely, but within a few releases, brought them back after realizing the major usability issues caused by a completely flat design.
Election Results 2016 help me learn how to balance metaphor, abstraction, and designing within the medium of the web.
During some guerrilla user interviews, I learned that many Americans didn’t quite grasp the difference between House and Senate representatives. They didn’t internalize that the population of a state affected the number of house representatives while every state had only two senators, regardless of population.
Could we use visualizations to help communicate this truth? What if we showed the balance of power in the House by illustrating the House floor in the Capitol building?
A graphic like this leverages the best of Skeuomorphism while staying true to the nature of the web. This graphic was a beast to build (thank you, developers!) but we pulled it off.
As a side note, I am not sure if this was a “great minds think alike” moment or if the BBC had a spy at CNN! 🕵️♂️ Below you’ll see what one of our main competitors had on their site. They even one-upped us by giving the same treatment to the Senate! This helps users even more, giving them a comparative point of reference. Nice work, BBC!
Stages and Permutations
The “Core Results Module” provided significant complexity. While taking a big-picture view, like in the site-map diagram, we didn’t worry about the various stages and permutations of this component. But as we iterated on the fidelity of the experience, we had to tackle how results would be presented at each stage of voting… and for each type of INSTITUTION.
Diagrams like this were passed on to visual design, who would take my wireframes into consideration 😅 as they created full-page compositions (or “comps”) for the developers. We were using a more traditional waterfall approach and “hand offs” with little collaboration was the name of the game.
UX Quality Control
After my core information architecture and UX work was “done” I rolled off the project for a few weeks. I was asked to come back to check on the design and also help out during usability testing.
This is when I realized the importance of getting visual design on board with OOUX principles. A fair amount of my work in making sure the objects were clearly represented had been unfurled. My prototypes were viewed as suggestions and as designers created comps page-by-page, inconsistencies inevitably crept in.
But because I hadn’t properly communicated why I’d organized attributes the way I did, I could only blame myself. So I dove into the least fun part of a design process: capturing screenshots and call-outs — that will result in rework.
Above, in the upper left, you’ll see Flat Design creating an issue. It’s actually difficult to tell if the yellow battleground state flag belongs with Ohio, or on the card above it. The data sort of blends together.
In the lower-left, you’ll see me tut-tutting (I thought I was cute) about a new piece of data being introduced — only on the mini-module. This breaks the OOUX-rule of cascading attributes. If it’s an attribute in the small component, it should be an attribute on the larger component as well. The prioritization of attributes should not change arbitrarily.
Finally, on the right, you’ll see my callout about the placement of “estimated percent in.” In the wireframes, this attribute was in the exact same place across all components, but in visual design, many attributes became scrambled.
CONCLUSIONS
Many of those late-in-the-game callouts resulted in tough conversations that could have been avoided with more up-front collaboration between UX, visual design, and development. I lost many battles — there was not enough time to fix all of my UX gripes. But even with a tight timeline and less-than-ideal early collaboration, the design was a massive success. It definitely surpassed the 2012 design in every aspect: UX, visual design, the robustness of the data, and technical performance. Some OOUX, even if it’s snuck in, is definitely better than none!
Here’s one clear example of how OOUX helped us create a more elegant system in 2016.
In 2012, I designed the results card with several inconsistencies between the map and the list view. Today, I call these “shapeshifters” and they are some of my greatest enemies.
So cringe-y! But with the benefit of hindsight and a maturing OOUX process, I made sure those cards were as consistent as possible.
These details were probably not what wow’ed users on election night. It was the overall experience coming together. It was robust, but elegantly simple to navigate: zooming in and out data granularity was a breeze. And overall, the data was easy to consume.
The main takeaway from the experience, that I have carried with me since, is that before we design a digital environment, we must untangle the truth of the real-world environment that the digital environment is representing.
As I revisited CNN Election Results, I realized I was revisiting the American elections. Between 2012 and 2016, American politics changed in many ways that I won’t get into here. But the information architecture of the electoral college and our representative government had not changed. Before I designed the information architecture of “CNN.com’s election results experience,” I needed to be very clear on the information architecture of American elections.
And getting clear on the truth is not design. It’s understanding. Before we can be a good designer, especially a UX or IA designer, we have to be a good understander.
Our job is to show the truth of the system. To show the truth, we not only have to understand it ourselves, we have to help our entire team understand our understanding — so they can correct it, add to it, and ask questions.
Read the next installment in this series here.
