Pubmatic Interaction Design   •   UX Design   •   Visual Design

Project overview

Pubmatic is a leading advertising automation software company in Silicon Valley and New York working with leading publishers. Facilitating the buying and selling of digital advertising, the company also provides the ad-servers on which digital ads are served.

The platform was comprised of several applications that were created at different times by different dev teams. Needless to say, most suffered from terrible usability, no consistency, and an incoherent user experience.

I took on several platform UX design initiatives as a Principal UX Designer with the ultimate goal of improving overall usability, elevating the UX, and delivering frictionless interactions.

Sketches for Product Brainstorming

Dealing with vast amounts of data and an infinite variety of setups in the advertising tech space requires sharp systems thinking. Brainstorming about an application's user flows and subsequent features with product managers and developers is a crucial step.

I'm a big fan of sketching out task flows, functionalities, and various interactions when trying to come up with the best solution. Working with pen and paper provides a tremendous amount of flexibility because sketches can be discarded and started again. There is no emotional attachment to one's designs.

Sketching before designing

Defining User Flows

I work with stickies on a whiteboard when defining user flows and interactions. It's a great way to get everyone on the same page. There a great deal of flexibility in the exercise because you can make notes around them, and stickies can be quickly rearranged, combined or discarded entirely.

User flows

High-Fidelity Task Flows

I created rough screen-by-screen task flows so everyone on the product team (other designers, product managers and developers) could get on the same page about how users could accomplish tasks.

Task flows

Design System Library

I designed several UX patterns (reusable components) as we were building the UI component library and design systems library which were all part of our eventual design system and platform styleguide. They not only needed to be designed to be intuitive and easy-to-use, but their look and feel needed to be consistent with the rest of the platform UI across several products.

Component Library

Platform Styleguide

I created a platform UI styleguide, while building UX patterns and a design system library for the platform's redesign.

UI Styleguide
UI Styleguide

Platform Navigation

The platform's navigation was redesigned after a re-evaluation of its information architecture.

Platform Navigation Design

Wireframes – Advanced Filters

Wrangling large amounts of data that people have to work with, and make it work for them in an easy-to-use way is always a big challenge. I used high-fidelity wireframes to design specific functionalities and user interactions in order to review them with engineering and product teams. Often these wireframes ended up in interactive prototypes for user testing, after which I would iterate on the designs.

Wireframes

Prototype – Advanced Filters & Column Selector

Based on the above wireframes I created prototypes for user testing. Two data table features created to facilitate working with large amounts of data were tested. Advanced Filters would give customers the ability to reduce the amount of data displayed in the table so it was visible to only the types people who would want to see and work with it. The Column Selector functionality was similarly conceived as a way to cut down on data, and display only the relevant columns customers would want to see and work with.

Prototype

Visual Design – Advanced Filters

After validating designs by user testing prototypes and product team reviews, the final wireframes were treated to a visual design refinement. Below is the final screen that was in alignment with the UI styleguide.

UI Visual Designs

Wireframes for an Optimization Component

These four wireframes show the iterative design process I employed on a component that played a central role in an application. Working with the product team, the goal was to achieve a simple, minimalist design. After just four iterated designs—that were tested with users—we arrived at a design that worked well. (See the final visual design implementation below.)

User scenarios and user stories

Visual Design for the Optimization Component

The "Demand Channel Optimization" component's visual design based on the above wireframes.

UI Visual Design

Final Visual Designs

A selection of final designs of various applications on the platform.

UI Visual Designs
UI Visual Design
UI Visual Design
UI Visual Design
UI Visual Design
UI Visual Design

Before and After Redesign Examples

Below are a selection of before and after screens from the platform UX/UI unification project.

The "befores" are on the left and the "afters" are on the right.

User scenarios and user stories
User scenarios and user stories
User scenarios and user stories
User scenarios and user stories

UI Sketch to Visual Design

Below is an example of going from a UI sketch to a final visual design.

User scenarios and user stories

Results

The result of the UX redesign was improved user experience as measured by positive feedback from customers, as well as a significant lift to the company's net promoter score (NPS). Customer referrals, trial signups, and sales increased quarter over quarter.

What I Learned and Key Takeaways

What I learned on this project is that more than ever, employing extensive user research is crucial when embarking on designing a complex digital product.

I performed extensive user research, wireframing, interaction design, prototyping, user-testing, and visual design during this project. Along with the requirement to think systematically and establish a system-wide standardized set of tools for the design team to use, the necessity of crafting a component library, a platform styleguide, and design library made me a better designer.

More Projects