ONA17 Freebies Guide

This web app, built in Vue.js, allows users to find which exhibitors are offering their “swag” of choice at the 2017 Online News Association Conference. I produced this piece, from Adobe XD mockups to live site, as part of the ONA Student Newsroom, which brings in undergraduate and graduate students to cover the annual conference.

View the App View the Repo



  • JavaScript
  • JavaScript Frameworks (Vue.js)
  • UX/UI Design
  • Sketching
  • Prototyping

Programs Used

  • Adobe Experience Design
  • Adobe Illustrator
  • Google Sheets

How did we get here?

A look at the process behind “Free @ ONA”

For this project, I knew I would need to have a working prototype of the product ready before I had gathered the information on which vendors were providing what swag. So, I started with a design, made it real, and then populated it with data.

  1. Consult with mentors. The ONA Student Newsroom paired me with the wonderful Maegan Clawges as a mentor. In the weeks leading up to the conference, we talked on the phone to come up with ideas for a story or product to build. I wanted to produce something fun, but useful, and had heard from friends that the ONA Conference is all about the free stuff.
  2. Sketch the UI. I’ve recently been aiming to increase the amount of sketching I do before diving into a project. For this piece I got out a couple UI ideas before moving into Adobe Experience Design.
  3. Assemble a working prototype. I’m a big fan of Adobe XD – the program isn’t perfect, but being able to click through a prototype is really helpful.
  4. Code the dang thing. In talking to fellow coders, I decided that the simplest and fastest way to get this project on its feet was to use a JavaScript framework made for data binding. I chose Vue.js, and had a friend quickly give me a rundown of how to implement Vue.js in the context of this project. This was my first taste at using JavaScript frameworks  (a tool I’m hoping not to rely on heavily, but it made producing this app quite easy). I used a Google Sheets to JSON exporting script to produce a JSON of mock data (company names, twitter handles and true/false for several mock items).
  5. Gather the data. I walked around the ONA Conference to talk to exhibitors and gather data on what products were being offered for free. I then took that data, categorized the freebies, removed the commonplace items (nobody needs a search tool for free pens) and populated a JSON with the information I found.
  6. Brand/market the product. After launching the web app, I worked with the newsroom’s social media editor to produce Twitter graphics and tweets to drive conference-goers to the app. The tweets were also edited into a short listicle highlighting the must-haves that took me by surprise.