Designing a Demo Tool for Media Placements

Kiip's custom ad solutions can be hard to visualize, so I helped create a demo tool to show media buyers what they would be getting.

Demo tool

Kiip offers a wide range of media placements from static display images to custom rich media, so it’s challenging to communicate the breadth of features and their interactive nature using static pitch decks. To support the sales team’s efforts, I helped develop a web tool to better demonstrate Kiip’s product offerings.

Project Proposal

The end goal was to create a landing page where a potential client would get a sense of Kiip’s consumer experience using an interactive demo. Additionally, there needed to be some customization option to show Kiip’s feature set and for internal users to easily grab specific demos for client conversations.

Approach and Challenges

I started off by writing down requirements and considerations, including business needs, user needs and research on other companies. An early challenge was prioritizing objectives so we wouldn’t get distracted by the nice-to-haves. The sales team needed flexibility to tailor their sales pitches, which complicated the clarity of the marketing team’s storytelling strategy.

Additionally, there were some constraints in handling the media. Some capabilities are phone-specific and don’t work in a computer browser, and the customization function would be clunky at best on a phone. I suggested we reserve the customization features for desktop web and show only the actual demo on phones, even though it’s usually best to maintain cohesive functionality across screen sizes.

Since this would be a client-facing webpage, I also researched how other companies market their offerings. Some, like Celtra, use a huge gallery to show off breadth and partnerships. Others like TripleLift show a curated page that focuses on their feature portfolio. The Kiip marketing team leaned towards the curated approach.

Early Prototype

I made an early prototype using Figma to show the main user flow. A user can explore four default demos. If inclined, they can open up the customization menu and choose their own combination of features to see in action. From this prototype, we realized we needed to confirm the possible feature permutations and ensure we had demos for each.

I iterated on the prototype for a few cycles to help the team understand the changes. Eventually, we moved focus over to a spreadsheet to track the branches a user could traverse and to identify and address edge cases.

Visual Design

Since the demo tool would be part of the marketing website, I aligned the visual styling to match, and created graphics to refine the presentation.

Demo tool customization menu

This project is still in progress, so I’m sure there will be feedback when it’s shipped.