Branded Maps Takeover
Creating a framework for advertisers to customize Lyft's maps
Branded Maps is a hackathon project whose deliverable has been pitched to advertisers.
In 2025 I participated in the Lyft Hackathon as a Product Designer on the Branded Maps Takeover team. The hackathon's deliverable was a framework suitable for different advertisers to customize Lyft's map components.
This framework was then pitched to McDonalds (MCD), who purchased the opportunity, and the McDonaldland ad campaign ran for 2 days across the U.S.
As a Product Designer for the hackathon I was involved in all steps of the design process. After the hackathon I followed along with the project and the discussions, but as someone who's not on the Design team, I didn't touch any of the screens.
Role
Product Designer
Timeline
4 days
Team
3 Product Designers, 2 PMs, 2 Engineers, various partners from Branding and Marketing
Tools
Figma
McDonald's ad campaign, launched on August 12 and 16, 2025 across the U.S.
In this McDonald's ad campaign, McDonald's focused on reviving its beloved McDonaldland characters and fantasy world. In this case study I will talk about both the hackathon's framework and the outcome of the McDonald's campaign.
An approximate timeline of the hackathon + McDonald's ad campaign
There is a trend towards experiential marketing, which involves creating interactions that resonate with audiences.
A branded map takeover is a way to allow advertisers to customize certain map components on the Lyft platform in order to promote their brand. This method of advertising is attractive because it provides a fun and memorable interactive experience for the audience.
A frame for a splash animation idea
There are some benefits to this kind of advertising:
It provides the advertiser high brand visibility on the Lyft home screen.
It also provides the advertiser a feeling of exclusivity; an advantage over the competition because of their exclusive partnership with Lyft.
It allows riders to engage with ads in a fun and creative way as opposed to viewing them passively.
Problem Statement
How do we create a framework for brands to customize components of our maps while still remaining true to the Lyft brand and not impacting the experience of riders?
We will offer the following customizable components: splash, skins, logo placement, animations, and custom location pins.
The advertisers featured in these mocks are advertisers that had previously shown interest in partnering with Lyft. Many of them sent media briefs, so we had access to their assets and branding.
Splash
The splash is an animation placed over the map on the home screen.
McDonalds Splash
Skins
Skins are a way to customize the look of the cars on the map on the home screen.
Logo Placement
The advertiser's logo can be present during the interactive experience.
Animations
An animation can be placed on the map showing cool visual effects in line with the advertiser’s brand
White Lotus animation
Custom location pins
Custom location pins represent locations of the advertiser or locations of special events hosted by the advertiser.
Airbnb Experiences promotion
User flow for the McDonaldland experience
This demo features:
Splash
Logo placement
Ad banner
Skins
Custom location pins
User flow for the White Lotus x Verizon experience
This demo features:
Logo placement
Ad banner
Custom location pins
Advertiser interest in these takeovers translates to around $1 million* in revenue per campaign.
These some of the metrics we would measure in real time to ensure that the rider experience isn't negatively impacted:
Ride Conversion
Session duration
Total impressions
The McDonaldland campaign brought in $1 million* in revenue and achieved 6 million impressions.
An A/B test with a 80-20 split was run for 24 hours and found:
No significant difference in rider conversion (from starting a session to completing a ride)
No significant difference in number of rides completed
Concluding that the campaign did not result in rider experience degradations.
*For confidentiality purposes metrics are obscured
Because this framework involves customization of colors and visual assets, there were various constraints imposed by the marketing, branding, and product teams.
Working on this project was almost a like a paradox. Almost any component of the home screen and map could be customized, so there were countless opportunities for design exploration and play. Yet because they were on such high-traffic screens that are central to Lyft's brand identity and value proposition, there were many strong opinions from many teams, and the engineering execution had to be perfect.
We experimented with changing the home screen's header colors to match that of the brand. However, the rider product team stipulated that in order to not distract riders and to emphasize the Lyft brand, any pre-request screens must show Lyft colors only.
Home screen showing McDonald's colors (not pursued)
Home Screen showing Lyft colors
We experimented with changing the color of the route lines to match that of the brand. A concern is that riders may confuse the color yellow with traffic. One potential solution to this is that we can add a reassurance message to riders to explicitly tell them if there is traffic. However, this message shows only if there is actually traffic, so it doesn't completely solve this problem. In the end we ran out of time to come up with a way to customize route lines.
Route line showing McDonald's colors (not pursued)
Reassurance message to notify riders when there's actually traffic
A concern for the splash animation was that it would lead to app performance deterioration. After a round of efficiency testing, we reduced the animation file size was reduced by 50% to ensure optimal performance. It was also decided that there would be a killswitch if the splash animation is live; if rider conversion drops below a set metric the splash animation will not be shown.
After the hackathon, various teams reviewed the splash animation for McDonald's and more iterations were created. Since the animation is on a pre-request screen, it must relate to with Lyft's branding and story, so the animation must show a car traveling down a road.
Splash animation frame submitted for hackathon. Hackathon iterations include a smaller file size and killswitch strategy.
Splash animation frame showing car and road (post-hackathon iteration)
Splash animation with more MCD branding (post-hackathon iteration)
In order to customize location pins, we thought it would be fun if each location of McDonald's was represented by a character from McDonaldland, and riders could tap on each character to learn more about them. Although amusing in theory, it would require too much research about McDonaldland characters, review from internal teams, engineering work, and consideration of edge cases. Instead, location pins representing advertiser experiences would be an easier compromise. Location pins representing advertiser locations would be the easiest type of pin to implement.
Pins pointing to MCD locations with each location representing a character (not pursued)
Pins pointing to locations of featured experiences is easier to pitch and implement
Pins pointing to locations of advertisers is the easiest to pitch and implement
We explored an alternate way to unlock the experience. For this method users type a keyword into the destination and are prompted to unlock the experience. The card on the left is a cue that could appear somewhere on the home screen. This was not pursued because it complicates the user flow and would generate fewer impressions than simply showing the experience on the home page.
Users can type MCD to unlock the experience (not pursued)
This framework was pitched to McDonalds and they purchased the opportunity with a few changes to the assets.
McDonalds purchased the opportunity to show a splash with logo placement, an advertisement banner, and custom skins. Between the Hackathon and the final designs, these are the additional changes made to the assets:
Chicken nugget skins instead of french fry skins because customers preferred the nuggets
Splash showing McDonaldland characters traveling down a road instead of characters fading out, which is more in line with both the Lyft and McDonald's branding
These are the final designs that were live:
Splash
Home screen light mode
Home screen dark mode
Designing map components seemed complicated at first, but it wasn't so bad.
At first the thought of working with the mapping team was intimidating. Maps are quite visually complicated, but as I worked on it, I realized it was manageable.
Once I learned how to find sources of truths, how to generate the maps used in hifi mocks, and how to break down each screen into its components, designing map screens was much more manageable.
Breaking down big projects into smaller tasks really works!
I'm grateful that I was able to work with a great team; one of the designers took time out of his day to give me a crash course in Figma animations when I struggled. This sense of teamwork is something that I value and will look for in future project opportunities.
Prior to this hackathon, everyone on the Branded Maps team already knew each other and had worked with each other. I was the new kid, the last one to join the team.
When I saw that the team had an open spot, I pitched my experience and the value that I could bring to the team. I generally tried to show interest in everyone and their work.
I actively participated by asking questions, coming up with ideas, and offering my opinions and critiques. That way I was able to build up credence.
In the end it was a great experience and I got to meet a lot of new people who I would have never met!
