Inventory Manager | adMarketplace

Roles: STRATEGY, UX, UI, PRODUCT MANAGEMENT

Background

Inventory Manager is an internal publisher tool used by business development, ad operations, and management teams at adMarketplace, an advertising technology company that provides Big Data solutions in search. In the search advertising space, adMarketplace sits between advertisers and publishers, and offers its enterprise technology platform as a service to top-tier brands like Mazda, Lenovo, YP, and eBay to expand their reach beyond Google.

The Inventory Manager tool provides greater visibility into publisher data enabling account managers and business development staff to better manage traffic quality across their numerous digital channels.

The below UI is a screenshot of a key feature within Inventory Manager called Click Filters. Click Filters is a system feature to help manage traffic quality by keeping fraudulent/non-human traffic off the network.

UI for Detecting and Managing Click Filters -Inventory Manager

 

My Role — Design & Product Lead

For this project, I was involved in the entire product lifecycle starting from paper prototyping, generating interactive click-through wireframes, creating pixel-perfect visual mockups, running usability tests, to finally acting as the liaison between stakeholders and end users, while translating these requirements to the development teams. 

My role involved constantly interfacing with business teams, technology teams and stakeholders, We followed the Agile (Scrum) methodology where we built MVPs in 2 week sprints to have reviewed by the core teams and stakeholders, resulting in multiple design iterations.

 

Design Challenges

In the following screenshots, you will see interaction design challenges the team faced during the course of design and development.

activity log slide-in tray

Problem at Hand

The core teams analyzing and managing the UI needed a way to track changes made by other users. They wanted a solution that did not break the existing flow of operations while users analyze large amounts of data.

Solution

After collaborating with product and business teams and iterating over different approaches, we came up with the Activity Log Slide-In Tray design. It is a secondary section of the application and is tucked away in a collapsible panel hidden under the main section when it is not needed. When accessed, it slides in over the main section. Since the slide-in is in a separate layer from the main content in the application, there's a lot of flexibility in terms of how content can be laid out inside the tray – icons, text, and even simple controls are viable options to provide quick access to important actions here. Additionally, this panel can be easily expanded and collapsed while maintaining an analyst's (user) focus on important day-to-day tasks.

#1 Activity Log for tracking user actions

Integral was the addition of user notes which allowed annotations to be attached to specific activities. The design also provided extended search and filtering capabilities to more easily locate activities. Additionally, improved and extended filters improved the usability of the activity log, while keeping it in a location that did not interfere with standard reporting activities.

 

advanced date picker

Problem at Hand

Analysts needed a way to quickly compare large data sets over different time periods to make better performance estimates. These time periods were unique and granular. e.g. they needed a way to compare performance for the last 15 minutes versus that of yesterday.

Solution

The team and I white-boarded various approaches to simplify the process. The screenshot you see below is the proposed design for the Advanced Date Picker.

#2 Advanced Date Picker UI

The below view shows the expanded custom range selection. By default, the calendar on the left is hidden. Only the section on the right, with options to select from comparative date ranges or single date ranges, is visible. When the user clicks on “custom range” the calendar on the left slides out.

Expanded data picker with custom range presets

This solution cuts out unnecessary noise that legacy date pickers bring. It provides quick call to actions at the user’s finger tips keeping a minimalistic approach in mind. After running usability tests it was found that this design considerably reduced time and effort on the user’s part, turning their focus to more important data analysis.

 

inline edit

The screenshot on the left is an inline edit functionality for determining the amount of data to be sampled for bot traffic.

This approach enables user to quickly edit metrics within the context of the grid. If you notice in the first screenshot at the top (UI for detecting and...) all the other performance metrics for the different traffic sources are still visible while user makes edits to a specific source. Thus, the user can easily compare adjacent metrics while tweaking this one.

Interaction and Functionality - The inline edit popover is displayed when user clicks on an editable metric in the grid. The value changes to an input box where the user can enter a new value, while having the current value visible in context. The popover gives additional options for user to apply that edit across multiple traffic sources.

 

instant reporting

Problem at Hand

Users needed a way to create and download reports as a .pdf or .csv file to share within the organization and with external clients.

Solution

In the adjoining interface (which appears as a modal), user can toggle between different formats as well as add additional information like client logo to generate custom reports.

Testing

After each sprint cycle, we ran usability tests with key personas and stakeholders using walkthrough sessions while observing and analyzing users perform a set of tasks. As a team, we worked on improving the designs based on the feedback and critique obtained.

 

Next Steps + Takeaways

I handed over the final iteration of designs to the engineering team where my role switched gears from UX designer to project manager. Keeping users at the forefront and working in a user-centered methodology was one of the most crucial takeaways during this product. Also, testing early and often helped detect and tackle edge cases early on in the design process.