Rubicon Project UX Strategy   •   UX Design   •   Visual Design

Project overview

Rubicon Project is an ad-tech company in Los Angeles. Their automated advertising platform is used by the world’s leading publishers to transact with top brands around the globe, enabling them to reach more than 1 billion consumers.

When I came onboard as their Lead UX designer, the platform was seven years old and a conglomeration of inconsistent UIs and experiences. Leading the UX design team, I was tasked with a UX overhaul of the entire platform, while also working on one of their flagship applications under an aggressive timeline.

Many components of design ops had to be put in place for the product experience design life cycle (from concept, to detailed specification, to implementation): a complete design system library, UX patterns, UI component library, platform styleguide, design team workflows and tools, handoffs to developers and more. There was plenty of UX work to be done, and it took several years.

Login Redesign

One of the first things that I wanted to tackle was the login screen. No-one could by-pass it—everyone had to see it, yet it was a typical white screen with two fields. It was precious real estate that was wasted. It needed to be branded and stir excitement. It was also designed to announce new apps, features, and updates.

User personas

Homepage Dashboard Mockups

After logging in, the first page customers saw was be a quasi-homepage, a summary with some numbers and a chart. Considering the breadth and depth of the platform, this was woefully inadequate and badly needed a revamp.

First, the old homepage is shown, which is then followed by the new dashboard mockups.

User personas
New dashboard mockups

I designed a customizable dashboard that would be far more useful, and full of immediate, actionable insights.

User personas

Navigation Redesign

When I started working with the company, the platform had 18 applications. Navigating around all these applications was a usability disaster. One of the many early priorities was to redesign the platform's navigation and UI framework with with easy-to-access, consistent navigation, alerts and notifications, favorite apps and more. Here are some early design explorations including a "megamenu" version.

First, let's look at the old UI with it's navigation. Next, a prototype is shown which was used to test new designs with users, engineering, and product teams. Finally, new design explorations are shown. I solved many problems with the new navigation design: added the ability to favorite frequently-used applications, updated the information architecture, enabled swift jumping around different applications, and consolidated all navigation into one menu.

The old navigation and UI
User scenarios and user stories
The new navigation and application framework prototype
User scenarios and user stories
The new navigation and application framework visual design
New platform navigation visual designs
New platform navigation visual designs
New platform navigation visual designs
An alternative design with a “mega menu” navigation
New platform navigation visual designs

User Flows and User Stories

Tackling some new applications on the platform as well as redesigning some older ones required serious examination of user flows. What would be the most efficient way to achieve a goal and complete a task in a specific application? This is where task flows and user stories come in. I created various task-flows in order to design the most efficient interactions and enable fast completion of customer goals.

User Flows and User Stories
User Flows and User Stories
User Flows and User Stories

Customer Journey Map

As a proponent of human-centered design thinking, I typically start the design process with empathy maps, personas, and customer journey maps.

A customer journey map is a tool for plotting the entire set of actionable touch-points the customer experiences in the context of engaging with a product. Since actions are measurable, the word actionable is important to keep in mind. Customer journey maps enabled me to ensure a strong strategic focus on the customer experience throughout the product lifecycle.

The customer journey map on this particular application looks at the four main components of the product and the customer’s concerns, thoughts, feelings, anxieties, and the overall potential emotional experience throughout their interaction with the product.

Customer Journey Map

Application Design Wireframes

I used wireframes and prototypes to show page-level layout ideas. The following is a small sampling of wireframes I created to explore various application designs. Along with the product team and developers, these wireframes were reviewed and iterated on, especially after user testing interactive prototypes.

B2B SaaS Application Wireframes
B2B SaaS Application Wireframes
B2B SaaS Application Wireframes
B2B SaaS Application Wireframes
B2B SaaS Application Wireframes
B2B SaaS Application Wireframes

Prototypes for User Testing

I created limited-functionality prototypes for user testing. After prototypes were tested (with at least five users) I’d iterate on the designs to make applications more efficient and serve customer goals better.

Prototypes for User Testing
Prototypes for User Testing

Platform Styleguide

As part of the platform UX redesign, I created a platform UI styleguide alongside a design system library.

Platform Styleguide
Platform Styleguide

Final Visual Designs

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

B2B Saas Platform Visual Design
B2B Saas Platform Visual Design
B2B Saas Platform Visual Design
B2B Saas Platform Visual Design
B2B Saas Platform Visual Design
B2B Saas Platform Visual Design

e-Mail Designs

B2B Saas HTML email design

Results

The result was an improved user experience, as well as positive feedback from customers and company stakeholders alike.

The company realized significant cost savings as a direct result of the UX redesign due to fewer support calls. We achieved increased customer loyalty, and boosted the company's net promoter score (NPS).

We increased word-of-mouth referrals, realized significant productivity gains, and increased performance and efficiency—which translated into cost savings both externally and internally.

What I Learned and Key Takeaways

I learned how to communicate more effectively with product and engineering teams in order to achieve a shared understanding. Working under severe time and resource constraints, I outlined which areas to prioritize in order to create better usability of the products, and subsequently boost the UX on the platform.

As I performed extensive user research and testing, wireframing, prototyping, and visual design on this project I learned a lot about following proper steps in the UX design process in order to achieve the best results. Along with the need to think systematically and establish a standardized set of tools for the design team, the necessity of crafting a component library, a platform styleguide, and design library made me a better designer.

More Projects