Specle

Redesigning a 12 years old complex b2b service for delivering print, digital, and out-of-home advertisements.

Specle is a print and out-of-home ad delivery platform that allows you to prepare and deliver your ad directly to the publisher. With the up-to-date and verified ad specs database, and a fully-fledged preflighting service built in with checks and fixups, it ensures that each sent ad copy meets the publisher’s requirements.

When I joined the company in mid-2017, I realised that the development team had been executing every single new feature the customers wanted. That has led to an unstructured IA and poor, cluttered interfaces, including the popular and crucial task flows.

Goals and Challenges

Update design of the existing services of the Specle family by introducing a new layout and UI components.
Improve the existing user flows iterating with small increments. All while being respectful to our time-pressed customers who might get overwhelmed by a sudden interface change.
Build new automation tools for prepress technicians and customer support team to help them with routine tasks and communication.
Integrate PADN, a third-party service to automate copy chasing. Their API was rather brittle and didn’t handle many edge cases, so we had to think through to make the experience OK.

Move away from the Foundation/jQuery frameworks in 9-years-old legacy application to a new stack.
We lacked an analyst. To prove design decisions and verify ideas with data, I dug into Google Analytics and even query the database.
To speed up the development process, I worked directly with our codebase. For the most part the changes I made were in the front-end side of the codebase but some design changes required me to tinker with the Rails-powered backend. PSA: not all of my PRs have passed code review.

Caused by the lack of design guidelines since 2010, Specle had an inconsistency of styles, elements, and entire flows across the product. That led to a disjointed user experience which had to be fixed.

I reviewed every pixel of Specle to create a structure of atoms and molecules for the guidelines. From the colour palette and typography to buttons, inputs, and drop-downs — I came up with a Figma library of interface elements.

Soon we’ve realised that we should turn all the components into code. Yet, we could not afford to spend time of our small development team on this project. To help the situation I’ve taken the responsibility of developing a CSS framework accompanied by a set of HTML snippets, both documented in the guidelines I’ve also provided.

When I’ve joined, Specle was already a well established business, so I had plenty of analytics data and stakeholders’ input to base my redesign on. I also talked to the customer support team and joined their collaborative inbox to gather all the support requests. That allowed me to get many insights: what are the common problems customers face, what language do they use, what do they want and in what situations do they use Specle…

That helped me to come up with job stories which I used to create early prototypes to be tested on the customers.

Creating Ad Deliveries

Creating a new ad delivery is the most used flow on Specle. Every day our customers send hundreds of ad materials to thousands of publications across the globe. It’s also the most complicated one — there can be many different combinations of elements depending on the user type and required fields set for the publication/specification by the publisher.

Campaign Tool

The Specle campaign tool is a tailor-made solution that allows agencies to manage campaigns from start to finish — from media schedule, throughout production, and to delivery.

Before the redesign, the campaign tool interface was cluttered, and the task flow of adding a new campaign was complicated. Customers couldn’t prioritise the most important campaigns or see their progress at a glance.

Ad Deliveries

Ad Deliveries is a place where all the ad deliveries are displayed, whether they are part of a campaign or not. You can think of it as a catalog of all ad materials you’ve sent with filtering options provided. It’s a good entry point for repeating a delivery or finding an old one to discuss it with a client.

Ad Spec Repository

Initially, Specle was an ad spec repository of publishers and publications with their ad specifications. Through the years it became an ad delivery platform built on top of it. Each new customer stumbles on the repository first as it’s the only entry point for them to send a new ad.

Settings

Previously the Settings page was in chaos. Some of its child screens were completely disconnected from the parent and led to a dead end. There were no breadcrumbs to go back, or a settings sidebar wasn’t rendered.

The reason for that mess was simple: under the hood, these child pages were managed by different Rails controllers. To fix this, we introduced a shared layout made specifically for the settings page.

In 2019, we were forced to add integration with PADN, a third-party service providing copy chasing automation for the major UK publishers.

Due to the short deadline, we shipped the first release of Bookings as an isolated tool that allowed agencies to see the bookings and confirm or reject them. The designed flow was meant to allow users to go to the send ad form — pre-populated with all the booking details — off the bat.

But with the PADN API connected, it turned out that we weren’t able to match every fifth spec provided in the booking to our database. As a hotfix, we had to add an intermediate page to the flow, on which the user could hand-pick the correct spec. Later, we got rid of that page and added the spec selection into the “New ad delivery” form.

We’ve introduced a couple of new internal tools for our customer operations teams to increase their productivity.

Pro Jobs Dashboard

Specle Pro, one of the Specle services, provides functionality for fixing ad materials with the help of our prepress technicians. For customers it has always been a frictionless experience but “behind the scenes” it was daunting.

Our specialists are notified about new Pro jobs via e-mail. Before the dashboard was released, they had to forward these email to others telling them that the task is to be performed. Only after that, they were finally able to actually work on it.

I’ve designed a new dashboard for prepress technicians. It displays the unfinished Pro jobs (both assigned and unassigned) and lets them pick one into work. They can see the required spec at a glance, download the original artwork and upload the fixed one in a click.

Manual Deliveries

Usually, we send ad materials from our clients to publishers automatically. However, a few regional newspapers and magazines neither use Specle for Publishers, nor provide an API to receive ads on their end. Delivering ads to such publishers is laborious.

Our customer support team used to get emails with new delivery jobs and filter those that go to such publishers (kudos to rules in Gmail.) Then, to upload the ad, they had to sign in to the publisher’s ad portal or connect to its FTP server.

First, we’ve started to ship solutions, not features. The development team has always valued design and user experience, so when I joined them, we all worked with dedication and effort to improve the product.

We've shipped most of the proposed task flows. They were successfully validated by customers.
We've made interface copy short and succinct.
We've created a set of internal tools to lower the workload on the support.
We introduced the PADN integration that streamlined delivering ad materials to the publishers.
I created a CSS framework with the HTML snippets for creating design components, and guidelines to use them. Now the developers can use it to speed up the development process.