A new tool in the advertising technology industry (header bidding) 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 users to set up and understand AppNexus demand for header bidding without needing to work with account managers.
For this project I also lead a more collaborative design process with the engineering team. It lead to a greater appreciation of the role of design at AppNexus and a more polished shipped product.
I was the the lead product designer on the project. 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.
The initial understanding of header bidding 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. The most important stats were 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:
I like to use a kick-off called a sketch session for the team. Anyone related to the team (developers, project managers, sales, commercialisation, support etc) was invited to a session where they sketches out their ideas. Over the course of the header bidding projects I ran 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.
From there, to generate more ideas, I looked at some similar products from other industries. For example, apps for small retail shops (Square, Stripe, etc) 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 over slack or in person. In the end I decided on two options to explore at higher def.
Our placements screen was too complex for medium or small publishers to understand and contained many features not necessary for header bidding clients. My goal was to simplify the placement management screen to just the these clients needed and then quickly iterate.
The first challenge around this was getting alignment on features. This required talking to multiple stakeholders. Product confirmed that our target was just header bidding clients. From there, I worked with the implementation consultants to figure out what the user needed to set up their campaign. Once this research was done I socialised this with the rest of the stakeholders and was able to get started on the design process!
The design research for the placements page was mainly getting a technical understanding of how users set up their placements in header bidding. It turned out that users only needed two pieces of data per placement, a placement name and an ID.
Users had two main tasks for managing placements, creating them and then exporting their details to use in their header bidding setup. You could conceivably include monitoring performance here but those tasks were covered by the dashboard instead. I decided not to duplicate them on this page to follow the principle of focusing on simplicity.
Once these requirements were clear I set up a collaborative sketch session to kickoff the project. This generated a variety of ideas and helped get everyone excited about solving user needs.
For the general layout of the page I followed our standard pattern of actions on top of a table. Where things got more interesting was with creating and editing placements. The standard AppNexus patterns for creating and editing were taking the user to a new page or using a dialogue. After exploring those directions it was clear they were not a great solution for what was essentially a single form field. Instead, I worked on an in-line edit.
This lead to a few questions around micro interactions as well. There were many options for getting to an edit mode, such as an edit button or check boxes with actions. I explored those but they added unnecessary complexity to the page. Instead a click on the placement name would make it editable. Clicking elsewhere on the row would not so that they could easily copy and paste IDs. This seemed like a learnable interaction and kept with the simplicity principle. Initially the design called for auto-saving, but after talking to other designers it was decided that a save and cancel button would be better in case the user made an accidental edit.
Our header bidding product was a success at AppNexus, both for users and as a design process. Clients have enjoyed it and co-workers have called the collaborative process a "model engagement" with the UX team.