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 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.
Margin values have been omitted for clarity's sake.
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.
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.
Displays the number of users who have triggered event A, A & B, A, B & C, etc.
Rows & Columns
A basic data table.
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
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.
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.
If you're interested in seeing the prototype, please contact me directly.
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.
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.
The 'Game World' would fade in, overlaid on the 'Real World'. Painting by Stellar Labs
Selection of Geomon
Art by Stellar Labs
Art Direction Process
Step by step overview of the design and production of the art in Geomon
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.
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!
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.