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 is a great deal of flexibility in the exercise because you can make notes around the stickies, and stickies can be quickly rearranged, combined or discarded entirely.

User flows

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

UI Unification and Platform Navigation Improvements

The platform's navigation was redesigned after re-evaluating its information architecture and usability. I designed a "sticky" navigation bar to let people quickly access different applications on the platform.

Platform Navigation Design

Design System & Component Library

I designed several UX patterns (reusable components) to build our UI component library and craft our design system. They needed to be intuitive and easy-to-use, and the look and feel had to be consistent across the platform consisting of various applications.

Component Library

Platform Styleguide

While building out UX patterns and a design system for the platform, I also created a platform UI styleguide as a single source of truth for the design team and developers.

UI Styleguide
UI Styleguide

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.   The after screens show the application of the platform-unifying style-guide and component library.

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 a design library made me a better designer.