Jello Dashboard

Changes in the display advertising market made it easier for publishers to work with more sources of demand (advertising-lingo for sources of advertisements). AppNexus needed a simplified version of their enterprise product for smaller publishers to access our demand.

Our goal was to allow people to understand how well AppNexus demand was performing for them without requiring the support of Account Managers. After some research I decided that the best first release would include two things: A set of overview stats and trends for the user's business, and a more detailed breakdown viewable by groupings that users cared most about.

Explore a click-through Marvel prototype to get a better idea of the interaction.

Sketch Session

My Role

When Jello started the product was a small experiment. With limited support team members playing multiple roles. In addition to being the lead designer I also took on some of the product management tasks. Overall this included working with the research team, getting requirements from stakeholders, helping to plan the roadmap, and owning the final UX and visual design of the product.

Tasks

  • Requirements gathering
  • User journeys
  • User flows
  • Participatory design sessions
  • Prototyping
  • Pixel perfect mockups
  • Design reviews

Design Research

Jello was a completely new product, with a new user type, which meant we couldn't use our regular research roster. It's also requires a certain level of knowledge to use, so we couldn't interview people on the street.

The initial understanding of users was driven by talking to internal stakeholders: sales, support, monitisation experts (The team that helps publishers optimise their advertising setup) and a few employees who ran their own sites. I focused on learning about which numbers and trends the user needs to evaluate AppNexus demand and to make changes to their site. I learned that the most important stats are revenue (obviously), RPM and the number of advertisement impressions they buy from us. They wanted to see these at a global level, as well as broken down by:

  • Individual advertisement placement, to see if one particular placement is responsible for more income
  • Brands buying advertising space, so they can reach out to advertisers and understand who their inventory is important to
  • Country, similarly, to understand where their inventory is most valuable
  • Placement size, so see if there are page design optimisations they could make.


    There were also several lengthy technical conversations to understand exactly what the minimum requirements were for a publisher to be able to run our ads on their site. It turned out to be a lot less than our enterprise product, so I was able to cut the form down to just one field from about thirty.
Journey Map
The journey map for a user discovering and signing up for Jello
The sign-up workflow for Jello The sign-up workflow for Jello

Design Process

Sketching and Low-Fi

I've started the design process of every Jello project with a collaborative design process called a sketch session. Anyone related to the team (developers, project managers, sales, commercialisation, support etc) gets invited to a session where every sketches out their ideas. Over the course of the Jello projects I've run about six of these. They're a great way to generate a lot of ideas quickly, get buy in on design and make sure everyone is aligned around goals and requirements.

Sketch Session

From there, to generate more ideas, I looked at some similar products from other industries. For example, apps for small retail shops were a rich source of inspiration. To make sure I was staying on goal with a realistic design I shared designs early and frequently with the development team and the director of the capability. In the end I decided on two options to explore at higher def.

Final Mobile Sketch Final Mobile Sketch
Final Desktop Sketch Final Desktop Sketch

Higher Def

I built out the ideas I liked in Sketch to get a sense of how they would feel with our components and how much space they needed. At the same time, I was also learning things about our new user type. As such, I made a few changes:

  • Another stat, Fill Rate, was important to users and was brought in.
  • The icons for the tabs were inscruitable, so I switched to a dropdown.
  • “Last month” data was brought up to always be visible and allow for a trend arrow.
  • The column with placement shapes was removed when it turned out that they had no defined shape.


Mid def design

Usability Evaluation

At this point I worked with our researcher who planned remote usability tests for the designs. We chose one to test since we had very limited time with the participants.

A Marvel prototype allowed us to get testing quickly. Participants completed the tasks without trouble, one described it as "way easier than competitor's products". Overall, the feedback we received was that they liked this as a base, but needed more features to get a full overview of how their business was performing. The number one request was more control over the date range, which is coming in the future.

At the same time I was doing some experiments in Framer between two interactions for choosing either a tabbed approach or a swipe approach (click the logo to switch between designs). In the end I decided on a single graph to help the user focus. Once the basic flow and layout was figured out I started on the visual design

Vis1 Vis2 Vis3
Vis4 Vis5 Vis6

Visual Design

Normally we only use components from our library which don't require any visual design work. In the case Jello, though, there were two challenges that meant I had to make a few deviations. Firstly, this was AppNexus' first time making a mobile friendly site which required some new layouts to be responsive. Secondly, AppNexus' main focus is enterprise customers, and thus has a market perception of being powerful, but difficult to use. I tried to overcome this by using more white space and lighter colours than our main product.

Left (or above) you can see some experimentations venturing between our enterprise patterns (dark table headers and grey backgrounds) to a more custom look that fit the goal more. In other locations in Jello I've also experimented with bringing in illustrations to make the product feel friendlier, which you can see below.

Final Designs

final1
final2
final3
final4

Jello has been a very successful product at my company, both as a product and as a design process. Clients that have used Jello have enjoyed it. It's also been called a "model engagement" with the UX team by the head of the capability, as such more of our UX designers have been trying the sketch session process.