Design System & Modernization Plan
Crafted the standardization process of two components leading to the development of a modernization plan for improving the platform's performance by making the UI friendly and uniform.
The Opportunity : Since its original conception over 15 years ago Google Ad Manager has been a powerful tool focused on maximizing publishers revenue. During this time, GAM has expanded its scope to include countless new features all while accruing years of design debt.
GAM is rapidly approaching a tipping point where every new feature released adds an increasing amount of complexity to the product.
Solution: Focus on unifying the UI through incremental improvements to our current design system.
Our Engineer partners presented to us how the influx of custom components were contributing to GAM’s rapid tipping point. With every new feature released an increasing amount of complexity was being added to the product. Without a dedicated visual designer on the team it was up to the us to find way to slow down the tipping point. I found this extremely compelling as well as an opportunity to expand my knowledge on visual design.
In-page titles Standardization
Audit: Every pages in the product are built with different engineers and designers because of this I approached my in page titles projects by conducting an audit to first understand the project needs and complexity.
Identify complex use cases: The audit allowed for me to collect complex use cases and inconsistencies allowing for me to understand the scope and to ensure any solution scaled appropriately across all surfaces.
Collaboration & Feedback: There were so many inconsistencies after identification I presented my findings to my fellow UX team members to gain feedback and viewpoints before I socialized the audit and drafted potential solutions.
Standardization: Standardizing an adaptable component involves defining clear guidelines outlining its core functionality and appropriate variations for different situations.
Design Handoff : I provided my team with pixel perfect designs showcasing multiple use cases.
Impact
Unity: I made a consistent pattern that has been applied to 182 pages in Google ad manager, creating a push for consistency throughout our product positively impacting our users
Accessibility: We were able to reduce color contrast issues by removing the gray background within the subtitle resulting in an improved user experience.
Badge Migration
The Gold Standard: To begin I explored the UI styling used for badges in Google’s ad products, AdSense and AdMob. I used this information to begin building a compelling case on how we have the opportunity to align with the ads products in our ecosystem.
Understanding the UX Perspective: After conducting my audit on in-page titles I knew this would be a good time to take a deeper look into how the mixed state of badges were appearing for our users.
Outlining the benefits: I countlessly referred back to the question “Is it worth migrating to use badges for statuses within tables?” It was important for me to make a compelling case about how unifying our badge styling could improve our product.
Complex use cases: Just like in-page titles I wanted to put my proposal in action and explore a few complex use cases. It was important to provide visual examples of how the update would look in action.
Presented to Partners: I presented to our team a compelling case in how transitioning our badge styling can unify our designs.
Modernization Plan
My work done to push consistency with our product encouraged me to create a UX Modernization proposal to present to team leads. The plan I created focuses on a set of goals that strive for a cleaner UI with less visual clutter allowing for our users to focus on efficiently using our product.
This plan is currently being used to gain support from stakeholders and as a support tool for creating a strategic execution plan for tackling UI inconsistencies within the product. The team also recently hired a Visual Designer!
