A Platform that Empowers Out-Of-Home Advertisers with Data, Like Never Before
Factly is a SaaS platform that enables businesses with physical signage to confidently measure and predict an array of audience metrics. Factly is turning the out-of-home advertising market on its ear with a technology-first platform that truly turns heads. See for yourself.
A two-pronged approach
Factly is a two-progned system that consists of physical sensors that are deployed on-site, and a dashboard. The sensors capture and assess audience data such as gender, age, view time, etc. The data is then anonimized and relayed back to a dashboard. Once there, customers are able to clearly see who, and how, viewers have engaged with their message.
Establishments with physical signage
Factly is a B2B focused company that works with businesses who want to accurately understand who views their signage—this includes anything from billboards, to wayfinding signage, and environmental graphics.
The Factly customer is looking for deeper audience metrics than have historically been available through legacy methods.
Listening was the first step
Factly approached me with some semblance of an interface. There was a working prototype to use as a jumping-off point, but it was far from feature rich, or visually appealing. However, it proved helpful in understanding the complexity and scope of the project. I assessed the interface, implemented UX solutions from the ground up (calling on best practices as necessary,) and finished it off with a wall-to-wall user interface that cleanly met the challenge.
The dashboard is a customers high-level overview of all of the data the system has reported back. Each section of the interface is tailored toward a specific task, giving the user fast access to the data that’s most important to them at that particular moment.
Roughing out my initial approach
Speaking with the client in depth before I got started it was clear to me that the dashboard needed to be simple yet house a wealth of information such as high-level metrics, a detailed interactive chart, individualized sensor data, and even more charts and graphs. My initial thoughts centered around a wireframe that was a singular experience where this information could be accessed via one page.
Individualized sensor data
What I quickly realized
As I began to fill in details within each section of the dashboard (abstracted below for simplicity’s sake) it became more clear that the volume of information was much more dense than would comfortably support an experience that was accessed via a single page.
I considered adding “load more” buttons under each section to give the user the best of both worlds initially (access to greater details within a section, while minimizing content on screen,) but that wasn’t the optimal solution. The client agreed and I continued to refine the experience, breaking up the content into two additional pages. Below, the left is my original approach, and the right shows a multi-page execution.
Details and due diligence
The very first view of the dashboard a user sees are high-level metrics such as impressions from any given day or week, averages, device types, and much more. And, since these metrics are generally numerical it was necessary to ensure enough space was allocated to the fluctuation each could encounter.
I used a modular or grid-like structure to maximize use of the space, lending ample room for data even when it grew wide. I introduced lined-style pie charts which are easy to read but can also easily communicate large amounts of information.
This execution was designed such that it would respond well to devices and screens of all sizes, and to support multiple pages of metrics, accessible via pagination at the bottom of a given column.
Enabling customers to dig deep into metrics
One of the most important aspects of the interface is the ability to view the detailed metrics the system reports back to the dashboard. A customer may have dozens, if not hundreds of sensors that report back data to the dashboard. As such, the Detailed Breakdown section provides maximum exposure and ability to select which signs and data are relevant to the task at hand.
In this section the user can view signs (devices) by selecting a particular group. This affords the user precision at the most detailed level. The chart itself is configurable by any number of timeframes—by week, month etc.
Upon hovering over a day within the chart, a fact-filled yet easy to understand tooltip displays relevant group details. Inside, each group can be collapsed or expanded to view the individual figures that comprise it.
Device insights—everything a viewer needs, and wants
The device insights show a level of audience detail that signage owners are desperate to know and voraciously consume. This level of insight hasn’t previously been available to advertisers.
When determining the UX for this portion of the project I felt it important to enable the user to see as many metrics as possible without overcomplicating the experience. To that end, each sign or group is housed within a card-like display, helping separate them from one another.
The cards consist of any number of details which can be changed to suit the viewers interest or goal via a drop down menu. The cards grow or shrink according to the specific selections made.
Pages for secondary data
As previously mentioned, I divided the volume of content the entire dashboard would need to house into more than one page, to keep things as focused and simple as possible. Details that aren’t referenced quite as frequently are on a second or third page. Ultimately, we ended up only needing one additional page. Below you’ll get a glimpse of a chart that shows how similar or dissimilar devices are, from a data reporting standpoint.
The sensor map, one of the platforms core interactions
Critical to the experience is the ability for a user to visualize where a sensor is placed on a map, in relation to other sensors. Plotted sensors can be filtered based on parameters such as the number of views per day, and are further broken down into segments with corresponding chart data.
Since the majority of the interface consists of data and numbers the sensor map would be one of the interface’s most visually powerful areas. During the UX phase I earmarked this component to do some heavy design lifting. More on that later down below.
Clean, data-focused product design
When approaching the design I wanted to make sure that legibility led the endeavor. A light blue background with darker blue text helped keep the design easy on the eyes. I used pops of vibrant blue to call attention to important areas of the interface like the primary navigation and various calls to action.
Tending to the fundamentals
I deployed some serious design chops in order to polish the device selection modal and tooltip into interactions that are easy to make sense of.
The overall structure and use of color help guide the viewer, calling their attention to the areas that need a users input first, such as choosing which device to display.
Subsequent to that, I used cyan which clues the user in to other options that call for attention, like the device checkboxes. Vibrant blue is used again to ensure the user clicks Done to save their work.
Device insights color scale
While the overall interface uses a more muted color palette, the data that comprises the cards was one area of the interface that was well-served with a more liberal use of color. I created a harmonious color scale to separate the lengthy number of metrics a user can elect to show on a content card.
To warrant that the use of color stayed analogous, I limited them to a scale of cooler purples and blues. This is where my understanding of color theory really helped deliver a favorable result.
Making the sensor map high-gloss
When designing the Factly dashboard I knew their developers would have to place a significant amount of time in simply ensuring that the data was being imported and displaying properly, and that the HTML/CSS/JS execution matched the design I was working toward. And since the sensor map is also integral to the Factly experience, I wanted to incorporate a way to ease the development effort required to bring the design to completion.
I decided I’d recommend a custom integration of a 3rd party software called Mapbox. Mapbox provides an easy to use configurator where I customized a set of colors, fonts, and other properties to coincide with the overall brand look and feel I had set in place. Via API/code snippet, Factly is able to use Mapbox to achieve a level of finish users expect with enterprise-grade software, while minimizing the number of hours and effort to bring my design to fruition.
The map itself uses 3D buildings, pitch, and perspective to create a more immersive and enjoyable experience.
Watch a :30 second clip of me editing the sensor map
Bespoken mobile design
With execution of the mobile design of the platform in mind throughout the entire product design process, I seamlessly laid out the interface for devices with smaller screens. More detailed interactions such as the chart make use of a horizontal swipe gesture while more lengthy areas, such as content cards, respond well to the verticality of a mobile screen.
Factly, whose name has been changed so as not to affect SEO ranking as they roll out their platform, is rapidly evolving. It’s my hope to continue helping them solve complex product design challenges that revolve around big data and continually set the experiential/visual bar higher and higher.
It was quite the undertaking to condense the data into palatable chunks, especially the portion at the top of the dashboard that provides a snapshot of high-level metrics. The client needed the ability to display vast and different types of data there while maintaining visual clarity. I achieved it by relying heavily on design principles… ample white space, and limited use of fonts to name a few. And on the technical side, content stacking helped create the versatility needed to display all of the data required.
Freelance Product Designer
©2005-2019 Jonathan Patterson | Iteration V4