BACKGROUND
I co-founded Orbit.Co with a handful of other UWaterloo graduates. Orbit is an interactive advertising platform based in Asia that targets taxi passengers with tablet based advertisements. All ads are fetched based on geo-location fencing and the ad placer's parameters (i.e. time, weather, location, and other special conditions). The core platform involves a tablet UI that is mounted onto the backs of taxi car seats. Ads are shown in the form of video, static (print) ad or as a landing page website iframe. Since starting this in mid 2016, we're now at the closed beta phase involving over 80+ local businesses in Seoul Korea. During our venture, we've won (or made finals) for a number of pitch & entrepreneurship competitions. 
This tablet is mounted to the back of the passenger seats.
Design Work for ORBIT
As one of the five team members, I've been responsible for all aspects of design including our landing page, internal admin portal (or create and edit live ad campaigns), and core tablet platform. I'll be focusing on more of the core tablet platform to highlight the interaction design aspects I've worked on.
--------------------------------
ROLE
Designer & Product Manager (Co-Founder)
TIMELINE
10-20 hours per week for about 12 months
TEAM
–2 Developers
-1 Marketing 
-2 Sales
--------------------------------
Flow diagram
USERS
Our clients are small-medium local businesses that want to advertise through our platform to the millions of taxi passengers riding in Asia. Our tablet UI has be able to showcase their advertisement well. Therefore the ads cannot clash with the UI or background, and the UI has to be flexible enough to accommodate for all kinds of branding, and visual patterns (i.e. flat, cartoon, realistic, etc.). Furthermore, since taxi passengers are the end-users of our platform – we need to have a clear intuitive UI that communicates our value proposition and grabs their attention.
The minimum requirements for the home screen is to: 
1. communicate what the tablet is OR grab their attention (inciting them to interact with it) 
2. show a handful of advertisements – ads must accept all forms of multimedia (static, videos, GIFs, forms, site, etc.) 
3. allow users to select specific "ad categories" based on their interests. 

Overview of tablet interaction for video ads 

Version 1.1 - side scrolling ad grid with bottom categories selector and Version 1.2 - vertical scrolling ad grid with toggle (hide & un-hide) categories selector

Version 2.0 Scrolling grid (combined categories) – idea scrapped due to technical constraints and poor feedback from users.

Version 3.0 side scrolling with grid categories selector 

High-fi mockup of version 3.0 that we scrapped due to poor user testing feedback.

Final Home Screen

Wireframe leading up to final home page design.

Another slight variation we explored.

The final design doesn't overwhelm the user with ads – while still communicating the different categories available.

Through our user interviews we discovered that people were more receptive to the tablet if it wasn't a blatant "forced" ad. At the minimum if the passenger did not wish to view the ads, the tablet could at least be viewed as a non-obtrusive dashboard widget. This is the reason for the "YOUR ROUTE", weather, date, and time widgets. 
Final Ad Categories Page
Provides more screen real estate for ad grid + ad format filters. 
After branching out from countless wireframe iterations and ending up with the final design, we decided to create a variation of the home page for all the different ad categories. This screen shows the available ads in a vertical scrolling grid, that can be filtered based on the kind of ad using the tabs above. 
Content Tile Exploration
We started our tile design with the understanding that we would need to support 3 different kinds of media: video ads, static ads (i.e. graphic ad), and web ad (i.e. landing page). Thus at the beginning I designed an icon to represent each kind of ad; however after countless iterations and user testing we ended up with the "simplified version" shown above.
Loading States
When we started out initial pilot test in Korean, we noticed that when driving through certain areas we would have bad internet reception resulting in "blank tiles" from un-loaded ads. Therefore I felt it was important to design "pre-loaded' ad tiles instead of just showing a blank box. 
We wanted to create a seamless transition between video ads for out beta users. From our initial user tests – we discovered most of them lost interest when prompted to "choose another ad". However once we tested a "auto-transition" we discovered most users didn't mind continued engagement. Once a video ad is complete, the users have 10 seconds in the "transition screen" where the user can claim their reward while previewing the next ad. 
Video ad "paused" [user taps the screen while video ad is running]
Video ad running (Note: progress bar on the bottom fades after 3 seconds of idle activities)
Once video ends, the user can go back to select another ad, view previous, re-watch, or watch next. Users can also claim their coupon here if applicable.
WHAT I LEARNED
This project taught me a lot about string localization (translating UI strings to different languages depending on locales), as well as incorporating ergonomic design principles with UI design. Our tablet UI was design and tested with the external environment in mind, therefore we had to adjust certain aspects such as hit boxes, font, and navigation (selectors) to improve the mounted tablet experience. 

Other Case Studies

BeatCamp
Vue Commerce
Video Download Feature
Back to Top