Machine vs Marketer

Unbounce Call to Action Conference Game App


Mobile Game App




Lead Designer

Project overview:

Machine vs Marketer was a mobile game application for the Unbounce Call to Action Conference 2017. Attendees of the event played the game to compete against the machine and each other to see who could analyze the landing pages displayed in the game most accurately (guessing whether the landing page had an above or below average conversion rate). Players would get one point every time they answer correctly and would appear in the leaderboard if they were in the top 20.

Project Goals

  • To create a delightful experience for conference attendees
  • To build excitement and awareness around machine learning and its possiblities with the Unbounce platform
  • Too experiment and validate that our machine learning technology is more accurate in analyzing landing pages than the average marketer

Design process:

Unbounce has been building thought leadership around AI and machine learning, which our CTO, Carl Schmidt, has been representing for a few years. The Unbounce Call-to-Action Conference in 2017 was a great opportunity for the company to showcase that thought leadership to a wider audience, those being our customers and potential prospects. Carl proposed that we develop a mobile game application around machine learning and landing pages (the Unbounce platform is a landing page builder) using the data we’d gotten and the technology we’d been working on. The main logistics were already decided, which was having the player (attendee) play against the machine to guess whether the landing page shown had an above or below average conversion rate. In the end, the player would see whether they were “smarter” than the machine or not.

I was the assigned designer for this project. I was given a brief and met with Carl to discuss the context around the logistics and project scope. After the initial briefing, I went on and started the design process.

machine vs marketer brainstorm


Before doing any production work, another designer and I brainstormed a few ideas on the drawing board (aka a glass wall). We ideated the voice and tone of the game, which would help us with the creative direction for design and copy. We also brainstormed on the user flow and gameplay, as we roughly sketched our ideas out.

machine vs marketer information architecture

Information Architecture

I complied all the ideas from the brainstorming session, and created a high fidelity user flow of the game.

machine vs marketer wireframes


After defining the user flow, I created high fidelity wireframes and positioned them according to the flow.

machine vs marketer mockup iterations

Mock Ups

Once the wireframes were approved, I moved on to the mock up stage. I followed the CTA Conference brand guideline that another designer established as well as the Unbounce style guide, and the established voice and tone during the brainstorming session. These guided the art direction of the app. I worked with a copywriter to establish what each screen would communicate. I also created various iterations based on feedback given from the design team and stakeholders.

machine vs marketer usability test

Usability Test

After the feedback was addressed, I created an Invision Prototype and a usability testing session guide. Because this game was a new concept and unfamiliar to most Unbounce employees, we decided to just test with internal people, as we were on a tight schedule. The goal was to see if people understood the gameplay overall and could navigate smoothly, such as where participants would get stuck, and what parts were helpful or confusing.

I tested with a handful of participants and later compiled my notes, and found patterns that let me know which screens to refine so I could finalize and export them to Zeplin to send to dev.



This is an Invision prototype of the app. You can navigate throughout to check out the gameplay.


Game Play Animation

This is a short and simple animation of how they game worked.

Attendee’s Interaction with the Game

We had an area at the conference for attendees to familiarize themselves with Unbounce through activities in various booths. One of the activities was this game, where attendees would play the game on an iPad while it was projected on the TV screen, along with the leaderboard.

Announcement of Results

Unbounce CTO, Carl Schmidt, presented the game results on stage, stating the players’ accuracy of getting the answers correct. He also talked about the overall accuracy of the machine, as well as the top players of the game.

Prize to the Winner

This was the (sur)prize to the winner of the game, who was in first place on the leaderboard.

Result & Performance Metrics

Metrics measured from June 26–27, 2017 (conference duration)







Key takeaways:

Proper QA is crucial before launch despite a tight deadline, which can be done with better project management.

This project was not a priority for the entire company, so while I was able to commit full time on this, developer resources were limited. This was more of a side project for the developer, so the timeline was quite tight, which resulted in a lack of time for QA. We launched the app without really doing a proper QA beforehand, so there were a few bugs and glitches that we noticed while the attendees were playing the game. There were also a couple of elements in the final app that didn’t match the mockups.

These could be avoided if we had done more project management at the beginning with the developer and took the amount of dev time needed into account so we could scope enough time for a proper QA.


Overall Strategy: Carl Schmidt
App Development: Matt Coady
Copywriting: Dan Levy
Game Play Animated Video: Rebecca Preston