Project Brief


A UBER in-car AD system

CITY AD is a personal class project for Interactive Web Design and Development 1 by Thomas Meredith
In this project, I imagined a UBER in-car ad system that prioritises passengers' experience. Since I take UBER everyday, I got the chance to talk to over 30 drivers and develop this concept from an interesting idea to a pitch to UBER(Still working on it 📣

The design shows possible ways of managing,deploying ads for ad owners, the way of displaying ad on a UBER car, and the experience of extended personal screen, The project involves research, UX design, UI design and prototyping with html CSS. 


[unex_ce_button id="content_mcscyhvr9,column_content_9glti6uq0" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#003bff" button_border_hover_color="#ffffff" button_link="" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK THE LIVE PROTOTYPE[/ce_button]

A walkthrough video of the prototype

The Challenges


Can we make UBER more accessible?

Yes. Put more ad that can reach to the UBER passenger and the ad money will cover the travel cost ✌️. But how. Probably putting some ad in the UBER car? Sounds like a good idea but we already have the yellow cab in New York city and they are not doing good. So this is my challenge: how to design an in-car ad system that priorities passenger experience, helps business covert high-value uber passenger into customers, decreases Uber prices and opens up bigger market for UBER.

The yellow cab screen 

The Process


The research focused on understanding of ad platforms, how they connect the ad owner, ad presenter and and ad consumer. Some mature practice from platforms such as facebook ad and ad world educated me to move to a more detail phase of design. I also did research on the usage of in-car display. This helped me decide the form factors of the screen of my in-car display.


Key findings from the research

Go back to the original question:"What make your in back-seat screen different from the excisting ones?"

My research told me the old system doesn't work for the following reason:
a.Passive advertising content
b.Doesn’t know anything about you or your trip
c.Can’t get you to accomplish a purchase action 
d.Limited internet connectivity

But it does't make having a screen in the car a bad idea. 
I believe AD in UBER will change the way people interact with AD content, lowering the price of UBER thus opening bigger market and get prepared for Auto-Drive. 
Let me go through the design process and see if I can persuade you.

Initial idea of the system: have the ad owner, driver, passenger surrounding the UBER platform.

Some scene of how the in car display can be an extension of personal screen.

After 20+interview with drivers, 10+ interview with passenger and some research on the ad owner, I came up with the big idea, and persona. 

How it works

Three kinds of personas

The Process


Interaction Design

Interaction is quite a challege because three personas represent three products serving different needs. I focused more on the consumer side. The 2B side was built on to UBER's driver platform, it is a new section called city-ad. Here are details of the interaction design.

The Process


Visual Design

The development of visual design was based a lot on the UBER brand style and UI style. Layout, button sytle, collor were chosen to fit the in-car display situation focusing more on readablity and clartiy.

I went through several design interations under the guidance from Teng Lei and our client

Several screens from the project

Principle prototype of all the 3 platforms keyflows

Real car screen demo: Look kinda good in the car😄

The Reflection


Interesting concept push you learn new things

The class is about prototype with front end stuffs: html, css, javascript. So most time were spent on the coding process of the prototype. This is the first time I built a web-based prototype, so I was facing the problem of "Idea is cheap, show me the code " every week on this class. Everything became very detail-driven and context related. Pushing the design from pixel to code requires you to consider these "everything".  But see your design come alive and live in a browser is very exciting.

It was a great chance for me to go deeper into the production process of "making a website". And I really enjoyed it. Other than the technical side, the concept of making UBER more accessible drove me move forward all the time. I talked to uber drivers and passengers very often in that period because I took UBER a lot,  a great many of them were excited about this city-ad concept. More ideas were inspired because these "UBER chats", it taught me a lesson of how interesting and valuable interviews can be.

The Recognition


Excited UBER drivers

One of the driver I interviewed was so into the idea and want to join the team : )