Results
In three months, I designed and launched responsive text ads for Google Lens on Chrome. This project drove the adoption of responsive designs across Search ads and initiated a new responsive ads workstream.
Lessons Learned
Effective Communication and Proactive Planning:
Maintain consistent communication through bi-weekly meetings or a dedicated chat channel to ensure team alignment on project updates.
Anticipate potential challenges by proactively aligning on known elements like vcap, the MAC panel, and future launches to mitigate risks.
Eng Blocked on Design Implementation
MAC "My Ad Center" is a feature accessible through the three-dot menu on an ad. It empowers users to personalize and manage how their data is used for advertising. The ENG team was blocked on design implementation due to not having a responsive MAC panel.
I've noticed a discrepancy between the Google Lens Side panel headline font and the design mocks. While I had previously aligned with the Search team that the side panel would use a responsive version of the desktop UI, the live production version didn't reflect this.
Solution
I proactively investigated a recent Search change and, despite being unaware of it beforehand, flagged the issue to engineering in time for them to use the correct design tokens before the winter break implementation freeze.
Responsive width > 450
Thumbnail: top-aligned
Responsive width ≤ 450
Thumbnail: right to Snippet
I collaborated with Chrome Lens and Search designers to analyze existing feature integrations and challenges. Leveraging established responsive frameworks, I designed and refined ad solutions. Given that ad copy is provided by advertisers, not web-scanned, we addressed legal and optimization considerations within the framework. Due to confidentiality, I cannot provide further details.
Define Scope
Google Search offers over a hundred ad formats. To prioritize, I collaborated with my project manager and data scientist to narrow the scope. We identified three frequently triggered text ad formats as our focus.
This issue with Ads
This example demonstrates improper rendering where URL wrapping disrupts the visual hierarchy. This is one of several hard-coded bugs identified, some visually noticeable, others impacting ad performance.
•
2024
What's cooler than Google Search itself? Imagine being able to search for something instantly without needing to hit Cmd + T or open a new tab. That's exactly what Lens on Chrome offers! It's an incredibly handy feature built by my talented teammates from the Search team.
Problem
Due to its independent development and lack of ad integration, the feature experienced responsive ad rendering issues and was deprecated. However, it now presents a significant opportunity for revenue growth through strategic ad implementation.
Role
Lead Interaction Designer
Responsibility
UX/UI
Responsive Design
UX Framework
Prototyping