REQUIREMENTS

• Sales teams had won RFPs from several media agencies on behalf of large brands and high budget campaigns, to run native advertising campaigns on the TripleLift ad network.
• TripleLift had the back end infrastructure to run native ad campaigns, but required  a user interface to traffic campaigns across its inventory.

USERS

• At the top of the sales funnel were sales teams and planners preparing proposals and media strategies. Followed by account managers who trafficked campaigns,  optimised performance and generated reports (daily and/or weekly) to keep clients updated.

RESEARCH & PROCESS

• Initial research included analysis of both RFPs and media plans, to understand how these artefacts fit within the workflow.
• User interviews with internal account managers to understand their process and pain points. Additionally, observed best practices from other advertising technology platforms.
• UI study of adjacent competitor platforms (Appnexus, DBM) found that many had become convoluted with last minute features and additions, and lead to complex workflows decreasing usability.

DESIGN SOLUTION

• Initial workflows mapping actions, inputs and data to be displayed
• Secondary workflows, detailed campaign creation, and creative submission
• Wireframe iterations were tested for usability.

• Two workflows were designed. The first was campaign management, which mirrors the structure of media plans (Insertion order > Line item > Tactic). This enabled users to create campaigns segmentation by budgets and other settings at the IO/LI/ Tactic level, and create rules for inheritance. At the tactic level, campaigns could be further optimised through targeting components such as geography and audience for greater performance.
• The second workflow was creative management, which ensured correct asset submission for TripleLift native formats.

INITIAL LAUNCH

• At launch, teams easily adapted to the new platform despite ongoing backend engineering bugs.  Many components and workflows of the designed UI would later be repurposed for several other demand side platforms including; CPC Performance buyers – a simplified campaign and creative UI, Adserver / Publisher direct – which enabled publishers to sell their own inventory to advertisers, and Wizard 1 – a creative submission platform for DSP partners.

GROWTH & MATURITY

• In two years many targeting components were introduced as partnerships grew, and new ad formats were added as markets positively responded to native advertising. Naturally, pain points emerged as the platform matured.
• For instance, a major pain point was how to handle increasingly complex campaigns setups while minimising overhead for account managers when maintaining and optimising campaigns, these solutions are currently being explored in design concepts today.

Campaign creation workflow. Key screens show line item overview and settings with grouped tactics. Third screen shows tactic overview with creative library selection. 

Within the tactic screen the user selects create new creative library, the user is prompted to upload assets corresponding to selected ad format. Note, a separate creative management tool also exists for the purpose of managing creatives. 

REQUIREMENTS

• TripleLift native ad formats had increased in market validation, and new partnerships with programmatic buyers emerged. This enabled other demand side platforms to buy TripleLift inventory using TripleLift ad formats via an api connection. These new pipes represented an influx of demand and a significant revenue opportunity. With scant engineering resources, Wizard 1 (an MVP UI) was designed and built to ensure creatives met submission requirements. Feedback and usage data were collected to inform the next version of Wizard 2.

USERS

• Primary, external account managers at media agencies using one or more Demand Side platforms with TripleLift integrations.
• Secondary, internal account managers providing ongoing support

RESEARCH & PROCESS

• Both Interviews with users, and a UI audit revealed that a shortcoming of Wizard 1 was a lack of CRUD functionality for creating, reviewing, updating and deleting creatives.  Since Wizard 1 was an open platform, creatives were not tied to a user login but an insecure creative ID that could be retrieved by anyone. Additionally, users had to maintain a running list of creative IDs offline in spreadsheets.

DESIGN SOLUTION

• The core workflow enabled a logged in user, to select a TripleLift ad format, upload compatible assets (images/video, headline, caption, clickthrough url, and trackers), and generate a tag formatted for their DSP of choice. The user would continue to set budget and targeting parameters in their own DSP.

• The design solution leveraged existing components and workflows from managed services adapted for a Wizard 2 workflow. This workflow focused solely on creative management, and removed any campaign management concepts (insertion order, line items, tactics, budgeting and targeting) as this would be handled by the DSP.

INITIAL LAUNCH

• After a successful launch many DSP users made the switch from Wizard 1 to Wizard 2. Additional support materials were made available at the partners centre, a resource  site I also designed and built.

GROWTH & MATURITY

• As the product matures, internal teams face growing challenges of providing administrative support for external users. These challenges include, migrating old wizard ids, retrieving creatives across user accounts, and handling permissions.

Wizard 2 CRUD shows saved campaigns in a row format. Selecting ‘New Ad Group’ prompts user to select an ad format.

After selecting an ad format, Wizard 2 ensures the requirements for a creative asset submission are met, then enables the user to generate a tag for the DSP of the user’s choice. 

REQUIREMENTS

• It had been long established that screenshots of native ad formats were the most effective way to communicate the marketed benefits of native ads over banner ads, in both winning RFPs and new business.

USERS

• As Wizard users grew, they required tools to more effectively upsell native ads to their respective clients. The Ad Preview Tool aimed to educate audiences about new formats and guidelines, generate screenshots and live links of using brand assets, and aid in brand safety compliance.

RESEARCH & PROCESS

• Interviews with key stakeholders revealed two potential product directions. The first was a simple tool that was similar to a competitor’s; it would take preset assets and generate screenshots on compatible publishers with no customisation. The second, was a fully customisable ad preview tool that enabled users to generate previews for any format on any publisher as long as they had the correct required assets.
• Designs were created for both usecases, and after testing and reviewing business needs designs was developed to re-focus on the latter usecase.

DESIGN SOLUTION

• Several iterations of the preview tool’s landing page were internally tested. As this would be both a launch pad for both creating ad previews and an opportunity for product marketing to showcase new ad formats through videos and live examples. The selected design would favour a left sub navigation in anticipation of future ad formats.
• Additionally, workflows would use the familiar wizard-like workflow for generating previews as this had tested well amongst users and would ensure correct asset submission

INITIAL LAUNCH

• The ad preview tool is still in an early launch phase as users transition from Wizard 1 to Wizard 2. So far users have reported the tool as easy to use, with the caveat that they’d like to see more publisher’s added to the list which engineering continues to improve on

The ad preview tool’s landing screen provides information on each ad format. Selecting ‘Create ad preview’ takes the user to an creative submission workflow.

After submitting required assets for the selected format, the user has two options to select publisher placements to preview the ad on. The first is a bulk method where all ads will be previewed on all selected placements; the second custom options allows the user to specify which ads show on which publisher placements. 

When ad previews are generated, the user is presented with options to review each preview and select which they would like to export or download. Previews are shown for both desktop and mobile devices. The top ribbon can be expanded to show a full list of generated previews.

REQUIREMENTS

• The growth of TripleLift also increased the number of new platforms and tools, all which further fragmented design patterns and components over time. A UI audit was performed to catalogue every design component, and rebuilt as a design system within a ‘source of truth’ symbol library in Sketch. The development of the design system coincided with efforts by frontend engineering teams to switch from Angular to React.

RESEARCH & PROCESS

• Research was conducted into best practices amongst other technology companies and leading design system designers.
• Testing of sketch plugins geared specifically for creating consistent design components
• Members of the NYC design Systems Coalition were also consulted with on best practices.

DESIGN SOLUTION

• Extensive improvements were made to the sketch workflow by creating a component library designed with nested symbols, overrides and responsive elements.
• The component library was further extended to new UI concepts. Previewed below is one example where a component library has colour modifications for day time and night time usage to reduce eye strain for users performing campaign optimisations after hours, in addition to other improvements

INITIAL LAUNCH

• The implementation of the design system improved design efficiency and standardisation across all UIs. It exists today as a shared component library for the TripleLift design team to leverage through either symbols or the runner plugin.

Design system components library in sketch. Each component is designed to be responsive and uses overrides to control text, icons and colours. 

The design system was used as a base to explore UI concepts. Below are a ‘dusk and dawn’ concept for reducing eye strain when users work in low light environments or after hours. A third concept explores how to better represent ad formats in a row, this concept explores how a visual barcode can be created for at a glance recognition of creative libraries.