Modernizing Looker Studio's Visualizations: Leading a Strategic Redesign for Clarity, Cohesion, and Scale
How a Hackathon Idea Led to a Feed Desktop Redesign
How a Hackathon Idea led to a Feed Desktop Design
How a Hackathon Idea led to a Feed Desktop Design
How a Hackathon Idea led to a Feed Desktop Design
Key Goal
Modernize the default visualizations within Looker Studio, moving the product from an outdated library to a versatile, modern foundation.
Key Goal
The goal of the redesign was to significantly improve the user experience of the Azure Cost Management + Billing extension overview page and increase customer satisfaction.
Key Goal
The goal of the redesign was to significantly improve the user experience of the Azure Cost Management + Billing extension overview page and increase customer satisfaction.
Deliverables
- A new, accessible 20-color theme palette
- Comprehensive data visualization design guidelines
- High-fidelity prototypes and mockup for for 50+ core chart types
- UX decision and spec documentation
Role and Responsibilities
As the Lead Designer, I drove the design vision and strategy for this org-wide effort to moderinize Looker Studio. I defined the design principles, created a new, accessible color system, redesigned core chart components, and established new data visualization guidelines.
Timeline
Q2 2024 – Present
(Phase 1 GA: March 2025)
Background
Looker Studio is Google's tool for quick, ad-hoc data visualization. It empowers a broad range of users to easily build and share interactive reports and dashboards. Unlike its counterpart, Looker, which is designed for governed, developer-driven business intelligence, Looker Studio is built for speed and ease of use, often for one-off analysis where technical skills aren't required.
As the Design Lead for this project, I was part of a cross-functional team within the AI/BI (Artificial Intelligence/Business Intelligence) UX organization. I worked closely with my UX design colleagues, our product manager, engineering lead, and a dedicated engineering team to bring this project to life. My direct manager was the UXD Lead for Business Intelligence, and our team was part of the larger org under our UXM, Melissa Boucher and Senior UX Director, Kim Rees.
Users
Looker Studio serves a diverse set of personas across an organization, each with unique goals. For this modernization project, we focused on the entire spectrum of users who either build or consume reports.
A Technical Crossroad and a Strategic Design Opportunity
Our legacy UI and old visualization library, GCharts, were making it incredibly difficult to ship new features. Simple updates turned into major engineering headaches, and it became clear we couldn't keep patching a system that was holding us back.
This led to a critical strategic decision: a major platform migration. We chose to rebuild our core visualizations with Vega, a modern and flexible library. This wasn't just an engineering effort; it was a chance to fundamentally modernize the user experience.
As the design lead, I championed this as an opportunity for a comprehensive design refresh, grounding our work in modern aesthetic principles and research-informed best practices to uphold Looker Studio's core promise: professional data presentation and intuitive usability.
The Problem(s)
The experience felt dated and inconsistent. Some of the biggest problems were:
Inconsistent Visuals: Things like unevenly spaced legends, inconsistent axis usage, and random drop shadows created a disjointed look.
Poor Readability: Overly bold lines, crowded layouts, and poor text color contrast pulled focus away from the actual data.
Accessibility Issues: The default color palette was a mess. 10 of the 20 colors were hard to tell apart, and it failed to meet accessibility standards for text contrast and color-blind users.
All this meant that creating a beautiful, professional report took a ton of manual work, which went against our promise of making things easy. With AI-first experiences starting to generate charts in their default state, the need for great-looking, clear, and accessible defaults became a huge priority.
Process
My design process is divided into six key phases: discover, define, develop, test & refine, delivery, and tracking. For this project, given our aggressive timeline, I adapted this process to emphasize the most critical stages for delivering a successful V1.
Phase 1: Discovery and Strategy
Competitive Analysis & Best Practice Research
To kick off our new design language, I led an analysis of direct competitors (Power BI, Tableau), popular rendering libraries (Vega, Highcharts), and internal Google resources. To make sure our work was grounded in solid best practices, I also pulled from external sources like Datawrapper for color theory and Atlassian and Microsoft Excel for charting guidelines.
This research pointed to a few common patterns in modern data viz: a preference for subtle rounded corners, understated axes and legends, and modern, accessible color palettes.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Crafting design principles
Based on this research and our goals, I came up with three core design principles to guide our decisions
Cohesive: Create a consistent look and feel that makes it simple to build an engaging report with minimal effort.
Clear: Cut down the cognitive load and help users focus on the data. Every visual element should make things easier to understand.
Polished: Add modern touches like subtle gradients and rounded corners to give visualizations a sophisticated, high-quality look.
Crafting design principles
In addition to creating a HMW (How Might We) statement to articulate the main goal of the project, I also developed design principles for the redesign.
These design principles provided a broad framework for our work and helped me stay aligned on the goals and values that I documented in my design brief. The principles I created were "Simplify the complex," "Built for all," and "Cost transparent." By creating both design principles and a HMW statement, I was able to ensure that my design work aligned with the main goal of the project while addressing specific challenges or opportunities. I explain the principles in more detail below:
Phase 2: Develop
Building a New Color System from the Ground Up
The old color palette was a huge pain point. I led the charge to create a new one from scratch, following a really thorough process:
- Inspiration & Moodboard: I started with research and a moodboard to find colors that worked with Looker Studio's brand but also prioritized clarity.
- Generation & Refinement: I used a color picker to pull a base palette. Since we needed 20 colors, I created two separate palettes and carefully blended them.
- Accessibility Testing: Most importantly, I tested the new palette against the three most common forms of color-vision deficiency. After several iterations, I landed on a final palette where every color passed a 3:1 contrast ratio and was easy to distinguish.
Modernizing the Core Components
I redesigned every part of our charts to match our new principles. This included typography, axes, grids, legends, and chart-specific enhancements like gradients for line charts and transparency for scatter plots.
A key detail was the "Auto Corner Radius" functionality I designed, which adapts the corner radius of bars to their width to prevent them from looking like "popsicle sticks."
After defining these new guidelines, I created a library of reusable components in Figma to ensure consistency and allow other designers on the team to easily leverage our new visual language.
Phase 3: Test & Refine
Leadership Review and Adaptation
Partway through the design process, I shared our strategy and early designs with our new Director of Design, Kim Rees. Her feedback was instrumental. For example, she pointed out that rounded corners on bar charts could accidentally make data look "positive," which would compromise data integrity. This insight led us to turn the feature off by default, a key decision that prioritized accurate data representation.
- View the presented on deck on Modern Charts all up
- View the presented on deck on Modern Charts Color Strategy
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Crafting the Upgrade Experience with UXW
I collaborated closely with our UX Writing team to design the opt-in mechanism for upgrading existing reports to the new modern charts. Together, we crafted language that was both exciting and transparent, clearly communicating the benefits while also being upfront about the non-reversible nature of the upgrade.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Navigating Constraints and Parallel Projects
This project had an ambitious timeline and ran in parallel with another major effort to modernize the entire Looker Studio UI to Google's Material 3 (GM3) design system, led by my teammates Mike and Justin. This required constant collaboration, especially with Mike, to ensure that the new chart features I was designing would integrate seamlessly with the updated UI components they were building, like the property panel and menus.
Unfortunately, due to a combination of technical constraints, resource shifts, and a re-org, the broader UI modernization effort was partially de-scoped and could not ship the full proposed design. This resulted in a mixed UI that combined new GM3 elements with our older GM2 legacy components, which was not the polished outcome our design team had envisioned.
While we were disappointed with this compromise, it was a valuable lesson in adapting to the realities of a large-scale project. It reinforced the importance of clear communication and finding pragmatic solutions when ideal paths are blocked, ensuring that we could still deliver our core project goals despite external challenges.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Phase 4: Delivery
Prioritization and Making Tough Cuts
This project had an ambitious timeline that required us to be incredibly focused and pragmatic. I worked hand-in-hand with my PM, Edgar Aguillon, to plan a phased rollout that would let us gather feedback and ensure stability. To keep everything on track, I initiated regular triage meetings with PM and engineering leads.
We rigorously reviewed our scope, making tough but necessary decisions to move non-critical (P1, P2) features to later phases to protect our P0s. This ruthless prioritization was key to protecting our launch date.
Excels used for bug bash prioritization
We started with a Private Preview for key customers, followed by a broader Public Preview, and finally General Availability. For the first preview, we focused on the seven most-used chart types --Bar (Stacked Bar, 100% Bar, Column), Combo, Line, Area, Scatter, Pie, and Donut charts to get the biggest impact early on.
Modern chart enablement experience for Private Preview
Modern chart enablement experience for GA
Phase 5: Tracking
Beyond GA
After our GA launch, for example, some customers found our new, more detailed tooltips to be too large. In response, I quickly iterated on the design, reducing the font size, optimizing padding, and moving all text to a single line to make them more compact.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Responding to feedback
Beyond these refinements, we are actively working through a backlog of new features and larger improvements requested by our customers, ensuring that Looker Studio continues to evolve to meet their needs. This ongoing process of listening and adapting is a core part of our team's philosophy.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Impact Analysis
Adoption & Growth
After GA in March 2025, modern charts jumped from ~410K reports → 4.1M reports by August 2025
~10× growth in 5 months, steady and sustained
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Preview Toggle (Pre-GA)
Production preview: 139K ON vs ~1.4K OFF (98%+ kept modern on).
Internal preview: 64% ON vs 36% OFF.
Served as validation signal before GA; after March 2025, adoption became non-reversible.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Usage Split (as of Aug 2025)
- External users (Aug 11): Legacy: 79% (5.8M) | Modern: 21% (1.5M)
- Googlers (Aug 14): Legacy: 85% (165K) | Modern: 15% (30K)
External adoption is slightly ahead of Googler adoption → shows strong customer appetite.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Daily Usage Patterns
Weekend dips visible in deltas (expected lower report creation, not rejection).
Trendline remains positive and consistent.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Customer Feedback
Customer feedback reinforced the success of Modern Charts, with users highlighting improvements in visual quality, customization options, and overall usability. Responses showed strong enthusiasm and validation of design choices, positioning the update as a meaningful upgrade rather than just an incremental change.
Organizing a Kickoff
As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.
“Billing as a whole is confusing &
needs specialists to manage”
- NPS Verbatim December 2020
Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.
Takeaways
Takeaways
Takeaways
Through this experience, I learned some valuable lessons about proactivity, collaboration, and adaptability that I would like to share:
The Power of Strategic Patience: This was a huge, foundational project. One of my biggest challenges as a lead was balancing the desire for a single, big-bang "refresh moment" with the practical need to roll things out in phases. By launching in stages, we de-risked the technical side while still delivering a cohesive and impactful update at GA.
Defaults Define the Experience: This project really drove home for me how powerful thoughtful defaults are. They're one of the most important tools in a designer's arsenal. As AI-powered features become more common, the quality of the default output is what will increasingly define how users feel about the whole product.
Leading Through Collaboration: Driving a project of this scale required constant communication and alignment. By creating clear documentation like the UX Decisions doc and the color system guidelines, and by fostering a close partnership with PM and Engineering, I was able to ensure that our shared vision became a high-quality reality for our users.
Overall, this project was a solid lesson in growth and adaptation. Each challenge was a chance to learn something new, whether it was trying something out of the ordinary, shifting gears when needed, or just being resourceful.
Reflecting on this project, there are several key takeaways that stand out. These insights will inform my approach to future design projects and help me continually improve my craft as a UX designer. Here are the top takeaways from this project:
- The importance of usability testing: While we were unable to conduct a formal usability study due to budget constraints, I now see the value in allocating more time for testing and validation with users. This can help identify and address issues earlier in the process, resulting in a more polished and user-friendly final product.
- The benefits of low-fidelity designs: In the interest of time, I initially focused on high-fidelity designs. However, I now see the value in exploring low-fidelity work as a way to promote more innovative solutions and receive more feedback.
- Differentiating between user and business needs: I learned the importance of clearly distinguishing between these two types of needs and avoiding overlap, as it can negatively impact the results of the design.
- The value of collaboration: Working with other designers, such as Jennifer from the Azure Experimentation team, helped bring new perspectives and expertise to the project. I will make sure to seek out opportunities for collaboration in future projects.
- The impact of design on business outcomes: The positive results we saw in NPS and CSAT scores, as well as the uptake of similar designs in other extensions, showed me the real-world impact that design can have on business outcomes.
Overall, this project was a great learning experience, and I believe that these takeaways will be valuable for future design work.
Project highlight ✨
Business Impact
Business Impact
The success of this project got noticed all the way at the top. The results and new visual direction were even shared in a deck presented to Thomas Kurian, the CEO of Google Cloud, showing how much of an impact our work had on the overall Cloud BI strategy.
Our goal was to increase the Net Promoter Score (NPS) and Customer Satisfaction Score (CSAT) for the extension, and I'm pleased to report that we were successful in achieving this. After the redesign was launched, the NPS increased by 6.62% and the CSAT increased by 11.5%, which is a significant improvement.
In addition to improving customer satisfaction, the redesign also had a number of other business impacts. Other Azure extension teams began to implement overview designs that were similar to the one we created, which is a testament to the success of our design. The Azure Billing Overview redesign was also featured on the Microsoft Azure Youtube channel, which received over 11,000 views.
Finally, the Azure Experimentation team used the Billing Overview redesign as a case study to promote the importance of A/B testing and experimentation in UX design. This was an exciting opportunity for me to showcase the value of our work and to share our design process with a wider audience.
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
by me!