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
Ad Spec Repository
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
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.
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.