Menu

Case Study

Kinetic Social Platform

The Kinetic Social Platform is a managed and SaaS platform used to create, manage and measure advertising campaigns across various social media channels including Facebook, Twitter, Pinterest, Instagram and Snapchat.

The Problem

Typical of engineering startup projects, I inherited a very literal representation of the back-end system: one table = one screen. While the UI got the job done, there was no semblance of workflow to accomplish various tasks, nor was there consistency of design throughout the system. Furthermore, the company had ambitions to make the product available as a SaaS platform, and needed an interface that could be used by anyone who wanted to run social media advertsing.

Research

Before I could put pen to paper I needed to understand how the patform was used on day-to-day basis. I flew to New York to interview six Kinetic employees — all regular users of the platform. I asked general questions regarding common activities and observed how the platform was being used to carry out these tasks. These interviews led to the creation of two main personas:

  • Campaign Manager
    Responsible to setting up advertising campaigns, managing ad unit creative assets, and ongoing monitoring of campaigns in-flight.
  • Account Manager
    Responsible for managing the relationship with clients and reporting on ad campaign performance.

Insights

After the interviews, some general themes emerged as needing to be addressed immediately:

  • In most cases, the platform was not offering a guided path to carry out any task, nor was it offering a way to review previous steps in any given task. Campaign and Account Managers relied on several open browser tabs in order to refer to the information needed.
  • The system made no effort to cut down on information overload or cognitive load.
  • The design of the system did not follow consistent patterns. New features added to the platform were completely independent of others.
  • Use of colour was not considered in the UI. Screen elements were given any colour for arbitray reasons.
  • Account Managers in particular were spending 2-4 hours per week per client manually building performance reports. If an account manager had manay clients, no time was left in the week for managing the client relationship.
  • Accessibility was not considered throughout the platform.
  • While the platform offered significantly more capability than using any channel's native tools (e.g., Facebook's ad management platform), this was not a tool Account and Campaign Managers liked using.

"Before" Pics

Here are some examples of the system before my overhaul.

The Approach

As the task ahead of me was monumental, I broke down the overhaul of the platform into three major steps:

  1. Create UI templates accompanied by a style guide that engineers could use in order to create new screens and retrofit old ones.
  2. Design a set of widgets that engineers could use in their screens ensuring a familiar design for similar tasks.
  3. Automate reporting.

Style Guide

In addressing the first step, I created a comprehsive style guide that outlined overarching principles governing all screen design. In particular, the style guide focussed on the following:

  • Typography and baseline grid
  • General screen container templates
  • Use of colour
  • Buttons and forms
  • Data tables
  • Accessibility
  • Reduction of cognitive load

Download Complete Guide

Widgets

In order to standardize similar patterns of design, I designed a library of widgets that the engineering team could use.

Report Automation

Once all of the above building blocks were in place, I overhauled the entire reporting system to allow templating and scheduling of common reports, as well as automating a time consuming weekly report that Account Managers had previously composed manually, spending 2-4 hours per week per client.

The newly introduced automated report resulted in an annual savings of USD $100,000.

Ongoing

Not only are the style guide and widget library useful for the engineering team, they are also useful in my own design work. Using the above templates and widgets as starting points, I procedded to create and improve many new features including the following:

Campaign Management

Asset Management

Prototype

Drag-and-Drop Table Builder

The legacy process for building ad-hoc custom reports was tedious, and required significant knowledge of the system's inner workings in order to generate a report. Likewise, the UI was poor, employing a "sea of check boxes" for selection of reporting parameters. This prototype demonstrates a user-friendly means of creating or modifying ad-hoc reporting templates.

Click the "Show Help" link in the beige bar, near the top-right of the screen. This will show you the basics of the Table Builder. Continue to click and drag columns around to build your own report template.

Start Prototype

Note: As the Kinetic Social Platform is a desktop enterprise app, this prototype is intended to be run on a desktop computer or laptop. The experience may be poor if you attempt to run it on a mobile device.

Prototype

Asynchronous Alerts

This prototype illustrates the UI portion of an asynchronous alert system. It is part directive and part demonstrative. It is meant to be a resource for the engineering team responsible for implementing the feature. As such you will see an explanation of the feature on the left side, and an interactive demo on the right.

Start Prototype

Note: As the Kinetic Social Platform is a desktop enterprise app, this prototype is intended to be run on a desktop computer or laptop. The experience may be poor if you attempt to run it on a mobile device.

Comprehensive Prototype Library

The two prototype examples above are just the tip of the ice berg. I created a library of over one hundred prototypes, all created in HTML and made functional with AngularJS – the front-end framework the engineering team was using at the time. Any developer could take a prototype and use it as a starting point, rather than needing to recreate the experience from scratch.