Eoin Thomas O’Hehir

UX Engineer

◀ Back

Trump Campaign Promises Tracker

Ensuring accountability and transparency

Trump made a lot of promises during the campaign. Our team wanted to create a way to show exactly how much of his promises he ended up keeping.

We created a page where users can both see the percentage of promises that had been kept, broken, or were in some other status, and let users filter and sort individual promises to find out more information about them.

Desktop screenshot of Trump Campaign Promises page

Library Management

This project made use of two libraries: Isotope and D3. They are relatively hefty libraries, so we needed to make sure users only downloaded what they needed and when they needed it.

So, I made sure to only load in those libraries once this page was loaded.

this.getIsotope = function() {
  // Only run if promises are present on the page
  if ( $('.bon-grid-item.news-trump-promises.module-promise').length > 0 ) {
    $.ajaxSetup({
      cache: true
    });
    $.getScript('https://s.aolcdn.com/aoldotcom-releases/trump-promises/isotope.pkgd.min.js', function() {
      self.startIsotope();
    });
    $.ajaxSetup({
      cache: false
    });
  }
};

this.getD3 = function() {
  if ( $('.bon-grid-item.news-trump-promises.module-graph').length > 0 ) {
    $.ajaxSetup({
      cache: true
    });
    $.getScript('https://s.aolcdn.com/aoldotcom-releases/trump-promises/d3.min.js', function() {
      self.createGraph();
    });
    $.ajaxSetup({
      cache: false
    });
  }
};

How it works

Editors kept track of the state of promises and updated them accordingly. Users could filter the promises by category, status, and how recently updated they were.

Isotope powered the filtering and sorting, and I used D3 to draw a pie chart showing the status of all promises at a glance.

Desktop screenshot of Trump Campaign Promises page, showing the promises with filtering and sorting selects

Design Execution

User experience was key to making this work. However, I was only given designs for desktop, and this needed to work for all devices.

So, the design decisions made on mobile were all made by me. Using the design language already established in the desktop mockups, I made sure to keep the page hierarchy in a way that made sense for mobile.

Mobile screenshot of Trump Campaign Promises page, at the top
Mobile screenshot of Trump Campaign Promises page, at the middle
Mobile screenshot of Trump Campaign Promises page, at the bottom

In conclusion

I learned to only load in what I needed, and to use the skills I had to get the job done. I have been given desktop designs and have created mobile designs from them many times, and a task like this is perfectly suited for my skillset.

See more projects

AOL Navigation

Timelines

Met Gala Bracket

Trump Campaign Promises

One-A-Day Tumblr Theme

Custom Portfolios