Native Ads

In 2014 I served as lead designer for the Mobile Ad SDK, designing templates for the various ad formats found within Yahoo's many apps.

An ad template is a specific layout for different contexts within an app. Not all apps use all the templates, but many templates are used across different apps.

Templates are designed to be flexible, and most are designed to support text ads, image ads (CPC) and App Install ads (CPI).

Templates have different styling requirements depending on which app they’re displayed in. Each template has a style sheet for every app its served in. A style sheet determines the colors, typography and margins of a template.

Yahoo's Ad SDK serves 15 different apps with nearly as many unique styles. Each template was designed with both iOS and Android in mind, and specific templates were designed for different form factors, such as Tablet.

Beyond the production of existing ad formats I also designed new types of ad formats that Yahoo is now using across their app library. Most notably the carousel-style ad collection, and the 'expand and collapse' format now found in Yahoo mail, which allows for rich advertising within information-dense contexts.

Cost per Click & Cost per Install

For ads that lead to a web page, a click-through is considered a conversion. For ads that lead to the app store, an install is required. Install ads have lower conversion but a might higher rate.

Expanding Image Ad

This ad format allows Yahoo to track both impressions and clicks. This format lowers the clickthrough rate of ads, but also minimizes accidental clickthroughs, which are notoriously bad experiences.

Video Ads

Video ads will silently auto-play from the stream, but expand to a full screen mode when clicked, at which point south is supported.

Article View Video Ad

The beginning and end states of an ad shown while browsing articles.

Example Documentation

Margin values have been omitted for clarity's sake.

Data Design

At Yahoo I led a redesign of an internal analytics platform for mobile products. This product was used daily by product managers and executives at Yahoo to track usage of Yahoo's mobile app suite.

By researching competitive products in the market, I worked with product management and engineering to recreate essential features like Funnels and Retention graphs with more streamlined, accessible designs for our internal user base.

Note: None of the data displayed here is real.

Dashboard

Overview of the site structure and navigation hierarchy.

Days Spent over Time

This graph shows app usage by week day, over time. The bar at the bottom allows the user to quickly adjust the week. If left alone, the slider will advance, highlighting change over time.

Retention over time

Displays what percentage of users returned to the app after their initial download.

Funnels

Displays the number of users who have triggered event A, A & B, A, B & C, etc.

Rows & Columns

A basic data table.

Events

Tracks all event triggers over time. Events are shown in the list below and can be filtered. Selecting a list highlights it and displays it in the graph above.

Events over time

Daily Trend

Customer form factors and platform by percentage

This design was never implemented, but this is meant to be an interactive graph, each element expanding upon touch.

UI Element Specs

An example of my style documentation.

Tindercize

This is an exploratory concept for a mobile-friendly workout tool. I call it Tindercize because I'm using the main interaction loop of Tinder to motivate and engage users to exercise.

Rather than plan out specific exercises beforehand, the user would choose the muscle group(s) and the app would give smart suggestions based on your history and preferences.

The app would track your progress and motivate you through a schedule and point system.

UI during exercise is designed to be lightweight and simple, so as to minimize distraction. If you're familiar with most common exercises, you could log your entire workout through a smartwatch.

Search SDK

This quarter, Yahoo announced a suite of tools for mobile developers, among them an SDK for Yahoo Search integration. I designed the organizational structure of the Search SDK's demo app. This app is designed to showcase the various capabilities of the SDK and facilitate developer adoption.

Here shown are are the UX flow explorations that went in to the design process.

If you are interested in downloading the Demo app yourself to see the finished product in action, you can do so here:

After this initial iteration we decided on an app structure with reduced complexity, and bucking additional customization features in the settings menu.

Art Direction

I served as lead designer and later as creative director for the iPhone game Geomon, created by Loki Studios. This location- based MMORPG had a user base of roughly 25k DAU and 150k MAU.

Design involved all aspects of the app, including visual design, retention, monetization and engagement. I directed asset production with a team of 7 artists, designing and producing over over 150 characters navigation and UI elements for the app. I also produced promotional and marketing material for the game's social presence and online community.

Splash Screen

The 'Game World' would fade in, overlaid on the 'Real World'. Painting by Stellar Labs

Promotional Material

Promotional Material

Selection of Geomon

Art by Stellar Labs

Art Direction Process

Step by step overview of the design and production of the art in Geomon

Geomon Staff

NPCs that assigned missions and battled players. Art by Kyle Cabral

Promotional Material for Time-Dependent Event

Geomon would frequently have time-based events to encourage retention and re-engagement. These events would be advertised on the game's facebook and website.

App Icon

Graphic Art

Here is a selection of some of my own artwork, done either by commission or for my own edification.

Bear With Us Promotional Poster

I created this poster for the independent film Bear With Us using Sketch 3. Bear With Us raised over $16,000 on IndieGoGo and will be running the festival circuit mid-2015. It's hilarious!

Takoyaki

This is a character I created. Its many emotions are designed as chat stickers. An octopus appealed to me particularly because the octopus changes its color and shape to express emotion.