Powering beautifully effective advertising
One of the biggest platforms for advertising automation and optimization in the world, Smartly.io allows its users to easily and effortlessly run their online advertising campaigns.
Sitting at the crossroads of several advertising platforms, such as Facebook, Pinterest and Google, the biggest challenge for Smartly.io and its users has been the ability to take in, digest, and act on a myriad of different data points. During my time at Smartly.io, I've been the Principal Designer devoted to our effort to make this data consumption process as seamless and effortless as possible.
Data for Days
Welcome to a New World
Smartly.io's Pivot Tables have introduced advertisers all around the globe to a new way of processing and working with the tremendous amount of data they handle on a day-to-day basis. The tool allows users to view their data in whichever order they want, easily switching their KPIs in or out, charting their performance over time, or digging deeper into the structure of their campaigns.
As a designer, the biggest challenge during the years that we've built and iterated upon our Pivot Tables has been to enable users to dig deeper into their material and gain a thorough understanding of where issues lie, or where opportunities may present themselves. Pivot Tables has been built from the ground up to replace the need for Excel or Google Sheets, and to provide users with a tool that allows them to both report on and manage their campaigns, all within the same view.
Building a tool that handles both campaign management as well as reporting proved to be quite the hassle in terms of building an interface that is informative, without feeling cluttered. An interface that is comprised of workflows that are not only useful, but also succinct and intuitive.
Talk the Talk
Qualitative feedback rules the day at Smartly.io. Because of this, up to 20% of my time as the project's Principal Designer has been spent talking to customers, traveling across the globe to meet them face-to-face, and work with Product Management to process said feedback into an actionable roadmap.
Talking to customers and trying to truly understand where their problems lie forms the heart of each and every aspect of feature development. I've spent countless hours discussing, demoing, and deconstructing designs with customers to try and validate whether a specific design direction solves their problem and helps them save time and effort.
Effortlessly create and populate new tabs
An example of a workflow that was iterated upon in close cooperation with customers is the creation of new Tabs. Tabs is the term for the specific views that present the user with their data. Due to our (and Facebook's) infamous mantra of Work Fast and Break Things, the initial implementation was clunky and unintuitive.
Our research showed that the vast majority of users only used up to 5 tabs on a frequent basis. In addition to this, they often relied on copying templates set up by our Customer Success Managers, or their own colleagues, when setting up a new Tab. Yet the access points for these were suprisingly hard to discover.
In the design above, we resolved this issue by using a two-pronged approach. On the left-hand side, users can easily access their frequently used or favorited tabs. The right-hand side allows them to quickly access a set of different options for the creation of an entirely new Tab.
At a Glance
Inspecting Ad Set details
Pivot Tables not only provides the user with numeric data, but also allows them to glance at the structure of their Campaigns, Ad Sets (and Groups), as well as the Ads within.
The sidebar design was developed to function as a way to highlight context-specific details for a specfic element of this structure. The sidebar processes which type of stuctural element the user interacted with and then fetches the relevant content.
Previous workflows relied on opening a new browser tab displaying the entirety of the campagin structure, which not only proved to be an overload of (irrelevant) data, but also caused a disruptance in the users' pace of processing data, requiring them to consciously switch contexts, close the browser tab, and refocus their attention to the table.
Highlighting the performance of individual campaigns
A key issue that was repeatedly brought up by customers was that while Pivot Tables allowed them to internalize at a large amount of data at once, it was hard to single out the performance of a specific campaign or ad set. When analyzing the specific details of a campaign or trying to detect underlying trends in ad set performance, the presence of rows of data related to other campaigns proved to be rather distracting.
In order to allow the user to single out a specific campaign, we built a workflow that only required a single click on the name of a campaign. This pulls up a separate view, presenting a less distracting overview of campaign data and historical performance. Below this data visualization is a reduced version of the Pivot Tables that only displays the data pertaining to this specific campaign. This allows users to make changes to the Budget or Targeting whilst maintaining a relevant, minimized level of context.
Documenting Our Efforts
As we scaled the Design Team, going from 2 to 7 Designers in the span of two months, we struggled. Much of our components and design patterns relied on an implied mutual understanding, without any documentation. Whilst we had a design system, it was little more than a component library.
In an effort to make our Design System more comprehensive, intuitive, and understandable – not just for our fellow designers, but for the company as a whole - I kickstarted the initiative to document as much as possible. Our mantra became "If it's not documented, it doesn't exist."
Deconstructing Dialog components
What started out as an attempt to document our existing components quickly grew into an all-encompassing project to document every aspect of our work as Designers. Working with Content Strategists, Project Managers, and Developers, we compiled anything from in-depth deconstructions of components and their utilities, to a thorough guide on how to write Interface Copy and evaluate the subtle differences in microcopy.Read More: Detailing the subtle variations in destructive microcopy, on InVision's blog.
The Designer's Guide to
the Galaxy Writing Copy
However, collaborating with Developers on several different platforms for documentation proved to be somewhat counter-productive. And the minute details in design patterns were not always equally relevant when implementing a specific design. In order to bridge this gap we worked closely with the Engineering department to set up rules and guidelines for component documentation, and continue to use Storybook for documenting and testing components in a setting that is more suited for their needs.