Pubmatic
is a leading advertising automation software company in New York City. The platform was comprised of several applications that were created at different times by various dev teams. Needless to say, most suffered from terrible usability, zero consistency, and an incoherent user experience.
I took on several UX design initiatives as a Principal UX Designer with the goal of improving platform usability, speeding up interactions, and boosting overall UX.
Dealing with vast amounts of data and an infinite variety of setups in the advertising tech space requires sharp systems-thinking. It's crucial to brainstorm about an application's user stories, user flows, and the various functional requirements with product managers and engineers.
Quickly sketching out essential user tasks and interaction flows is vital when trying to come up with solutions. Working with pen and paper or on a whiteboard in this way provides a tremendous amount of flexibility because sketches can be rapidly adjusted or scrapped entirely.
Laying out stickies on a whiteboard is a low-cost, low-risk way to experiment with user flows. It's a great method for visualizing structure and optimizing interactions. I usually go through this exercise because it's a collaborative way to brainstorm with the team and iterate on user flows. It makes it easy to identify potential problems or areas for improvement.
It was crucial to create screen-by-screen task flows so that everyone on the product team (other designers, product managers, and developers) can sync up on how users would accomplish essential tasks—often called red routes. This step in the design process helped me map out essential design solutions in the context of user goals.
The platform's navigation was redesigned after a UX audit of its usability and information architecture.
I designed a persistent, "sticky" navigation bar so that users can quickly see their alerts and access all the different applications on the platform at any time.
Designing UIs for handling large amounts of complex dataand making it work is always a big challenge. I used high-fidelity wireframes to design user flows and interactions for user testing and feature prioritization. It also allowed me to review user flows with product managers and developers.
Using wireframes from the previous step, I created prototypes for usability testing. This step in the design process helped me refine and optimize interactions.
As a result of testing data tables, the need for two types of special functionalities emerged. Advanced Filters would give customers the ability to reduce the amount of data displayed in a table. The Column Selector functionality was similarly conceived as a way to cut down on noise and only show the relevant columns customers would want to work with.
After validating designs by testing prototypes, the final wireframes were treated to visual design refinement. Below is the final screen that was in alignment with the UI styleguide.
These four wireframes show the iterative design process on a component that played a central role in an application. Working in partnership with the product manager and developers, our goal was to achieve a minimalist design. After four iterations—tested with users—we arrived at a design that worked well.
(See the final visual design implementation below.)
The "Demand Channel Optimization" component's visual design based on the above wireframes.
I designed several UI patterns and reusable components, built a UI kit and a design system to make the platform's UI consistent and optimize our design workflow. All of the custom widgets had to be user-friendly and their look-and-feel had to align with the company's brand.
While building out UX patterns and a design system for the platform, I also created a UI styleguide with specifications as a "single source of truth" for the design team and developers.
I worked hard to ensure that the UI/visual design was consistent across the platform and aligned with the brand. Here's a selection of final UI designs for various applications.
The UX redesign yielded significant improvements in user experience, as evidenced by positive feedback and ratings from customers, as well as a notable increase in the company's net promoter score (NPS).
These improvements translated into tangible business outcomes, such as increased customer referrals, trial signups, and sales, which persisted over several quarters. Overall, the redesign had a positive impact on both the user experience and the company's bottom line.
What I learned on this project is that more than ever, doing deep user research is crucial when embarking on designing a complex, data-heavy digital product like this.
Throughout this project, I engaged in a comprehensive range of activities, including in-depth user research, wireframing, interaction design, prototyping, user testing, and visual design. These endeavors not only honed my skills but also necessitated systematic thinking and the development of a standardized toolkit for the design team. In response, I undertook the creation of a component library, a platform styleguide, and a design library. This multifaceted approach not only enriched my abilities as a designer but also ensured greater consistency and efficiency across the project.
