A Victory Lap for OOUX

CNN Election Results 2016: An Object-Oriented UX Case Study

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 UXer 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 my 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.

A list of objects on the top sticky. And a very low-fidelity breakdown of each of those objects’ structure and relationships on each of the sticky notes below.

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 it dawned on the team in New York that Elections Results were MUCH bigger than the types of things they usually handled, and they were getting stretched pretty thin from other Editorial requests. 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.

See election results line item, highlighted in yellow. I started work in mid-June, already behind schedule. This diagram was created by the talented lead visual designer, and project lead, Mark Barilla.

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?

Here’s a sample of the survey.

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.

The very first nested object matrix!

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.

My main information architecture artifact is the object map, a notation system I invented in 2014 and was now using on all of my projects. The main objects are in blue across the top (X-axis) and their attributes are listed below each object in columns. Relationships with other objects (nested objects) are shown in blue as well. Above is the object map I sent out for review at the end of June 2016.

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.

Two system models that show how the SEAT object has different relationships to other objects per instance. Sometimes you need to make several system models that show how relationships change for various instances or types of an object.

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.

This diagram shows the main templates in low fidelity and shows how a user would navigate the system through the various data modules: drilling into more detailed data, popping back up for a higher-level view, and pivoting to other relevant data.

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.

Here are some early wireframes of the state snapshot card. This card would allow the user to navigate to a state-detail page where a more detailed summary of the INSTITUTIONS would be displayed or the user could dive straight into a SEAT detail page, like “Florida Governor.”

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.

Here’s a later prototype of how our “state snapshots” tray would provide simple and clear navigation to all the INSTITUTION, STATES, and SEAT detail pages. It also was valuable in of itself as a snapshot of each state, and thus, a snapshot of the country.

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.

A more mature design for the state snapshot list and some of the questions we asked during the usability test.

The visualizations tested well. So well that this list of states played directly into our design for the persistent navigation.

The persistent navigation on mobile. The first row lists all instances of the INSTITUTION object and the second row is all about navigation by state.

And in production on election night, this list of state snapshots provided a backbone to the entire experience.

Results coming in on November 8, 2016.

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?

An early wireframe of the House balance of power graphic, showing each seat of the house — literally.

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.

The House Balance of Power graphic on election night.

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!

BBC’s eerily similar data visualization results of the congressional elections.

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.

A stage-diagram for the core results module that shows how the visualization evolves as data comes in for various SEATS.

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.

During my visual QA of the design, now in production, I had to engage in many difficult conversations that resulted in tons of rework. (Psst — red and green colors on the callouts are meaningless. They shouldn’t be, but here, they are.)

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.

Note the changes across these cards, like placement of the timestamp, treatment of estimated percent in, and presence of the electoral college votes.

So cringe-y! But with the benefit of hindsight and a maturing OOUX process, I made sure those cards were as consistent as possible.

Note how much more aligned these cards were in 2016. There are still a few differences but those differences are intentional. For example, we hid the bar graphs in the map view because we wanted that card to be smaller. Using the principle of progressive enhancement, we added this visual support to our larger list card.

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.

A few tweets from election night.

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.

A screenshot of the main page on election night.

This article is part of a series of case studies that follow my journey of practicing and refining my Object-Oriented UX process.

2012: CNN Election Results

2015: Classbloom

2016: YOU ARE HERE!

2017: Georgia Tech Research Institute