RESUME

MINI WEBSITE, EMAILS, AND ONLINE ADVERTISING

I was one of three designers on the MINI team while working at BEAM INTERACTIVE. In addition to visual design, I built pages and emails using a robust component library with granular customization options in Adobe's CONTENT MANAGEMENT SYSTEM, AEM. I also coded some HTML and CSS when we needed a custom component and didn't have time to bring in a developer.

CONFIGURATION RECOMMENDER

An ALTERNATIVE to starting from scratch, I designed a recommender where users can scroll through pre-built configurations, choose one, and continue to the CONFIGURATOR to tweak it.

BOOK OF MOTORING

I created GRAPHICS and ILLUSTRATIONS to accompany driving tips in the Book Of Motoring. It was included with every new car along with other print materials and items such as driving gloves.

CONFIGURATOR ADMIN PANEL

The admin panel for managing all of the configurator's models, parts, and images needed to be overhauled. I designed WIREFRAMES and created a PROTOTYPE balancing a clearer and simpler interface with the complexity of the MINI configurator.

HULU INTERSTITIAL AD

I designed the INTERACTIVE resolve screen of MINI video ads where users could start configurating and continue on to MINI's website to finish building their car.

DEALERSHIP APP

Employees at dealerships use this app to access info entered by MINI shoppers. I organized customer profiles into a modular interface for a PERSONALIZED dealership experience.

OWNER DASHBOARD

I designed the INTERFACE of the dashboard where MINI owners can access how-to videos, find out if their car needs maintenance, make payments, and more.

MFS WEBSITE REDESIGN

I created high-fidelity designs and PROTOTYPES for a fresh look while adhering to the overall brand guidelines. I introduced a modular and responsive grid system to adapt to a variety of COMPONENTS across all screen sizes and devices. A sufficient component library made authoring new pages faster and easier with customizable options so new pages and layouts didn't require new code.

MFS STYLE GUIDE

For consistency across all website pages and emails, I created a new DESIGN SYSTEM and style guide for both designers and developers. I worked with the DEV TEAM and QA TEAM throughout every phase of production, adding specs to the style guide in a language that both designers and coders could understand.

TRAKNET

An omni-channel analytics platform that unites all marketing, sales, and product usage data. It was fun and challenging figuring out how to incorporate all types of data that clients could possibly need access to in a CLEAN and PIXEL-PERFECT interface that is also interactive and customizable.

FRANCISCAN HOSPITAL FOR CHILDREN

I redesigned their website to be modern and sophisticated, but still GENUINE, playful, and childlike.

ATHENA HEALTH APPS

I designed the UI of multiple iPhone, iPad, and desktop apps for ATHENA HEALTH. PracticeVitals is a public-facing app that displays analytics of current ATHENA HEALTH clients, info about different metrics, and tips on how to improve them. A general sales app was used in person to show videos and demonstrate a tool that calculates how much their practice could save with ATHENA HEALTH.

ICON DESIGN

To ensure consistency and a UNIFIED LOOK, I've created many CUSTOM ICON SETS. All icons in a set share the same visual language, whether that's organic shapes vs. geometric shapes or a light outline style vs. simplified filled shapes utilizing negative space. Each icon has exactly the same stroke weight, corner radius, and overall VISUAL WEIGHT.

LOGO DESIGN AND EXPERIMENTAL TYPOGRAPHY

PHOTO RETOUCHING AND MANIPULATION

I have PHOTOSHOPPED logos and coffee cups out of stock photos, changed the color of cars and shirts, and EXTENDED photos to fit a certain aspect ratio, ad space, or create an open area for a bunch of text. Searching for the perfect image is a lot easier when you have the ability to change the parts that aren't working.

CONVERTIBLE VERTICAL PANORAMA

For a DIRECT MAILER featuring a convertible, I pitched a poster-quality 180° vertical panoramic photo that evokes the open feeling of the roof-less car. Due to budget constraints, instead of arranging a photo shoot for a real vertical panoramic photo, I PHOTOSHOPPED together stock photos and convertible assets already provided by MINI. The reverse side had info about the model and its features.

MINI: OFFROAD

  • REMOVED black car.
  • Removed European license plate.
  • Added US regulation side marker lights.

MINI: PIER

  • EXTENDED pier.
  • Removed person.

SUBWAY

  • Removed mirrors, wires, advertising, cameras, reflections, etc.
  • Straightened tracks.
  • COLORED some ceiling tiles.
  • Removed debris from tracks.
  • Color ADJUSTMENTS.

LIGHTHOUSE

  • Removed all RUST STAINS.
  • Removed protrusions, objects behind railing, and rope fence.
  • LEVELS adjustments.

TAME THE BEAST: OFFICE

  • COMPOSITED vector octopus into office photo.

TAME THE BEAST: EXAM

  • Composited vector OCTOPUS into exam photo.

BEACH

  • Removed all people and man-made structures.
  • STRAIGHTENED horizon line.
  • Levels adjustments.

ALBUM COVER

  • PHOTOSHOPPED together elements from 4 different stock photos.
  • Changed color of balloon, shorts, sky, and camera lens.

HTML, CSS, AND JAVASCRIPT

Understanding prudent coding BEST PRACTICES and how code works in general proves useful, even in the design phase. Everything is VANILLA javascript, no external libraries were used.

RANDOM GOOGLE MAPS

A GENERATIVE ART experiment coded using the Google Maps API. It generates a random map every 4 seconds. There are 20 DIFFERENT ELEMENTS on each map, such as highways, arterial roads, and parks. Each of those elements is set to a RANDOM COLOR, is randomly turned on or off, and the zoom level is set to a random number. The geographic location is randomly chosen from a list of 33 predetermined cities.

NUMBER GAME

A javascript PUZZLE arcade game in which the player uses the arrow keys to MERGE numbered tiles until there are no possible moves left.

CRAZY LACE

An ANIMATED generative art experiment that creates random patterns with layered concentric circles. It uses a library of predetermined color palettes.

AUDIO PLAYER

A MADE-FROM-SCRATCH audio player. Includes an interactive playhead scrubber and duration bar for SEEKING FUNCTIONALITY.

UNDULATING POLYGONS

An animated javascript EXPERIMENT that simulates 3D LOW-POLY WATER using 2D triangles.

NONSENSE WORDS

A DUMMY TEXT GENERATOR that is customizable from the number of paragraphs down to the length of words. The ALGORITHM creates random, but PRONOUNCABLE fake words.

TOWER DEFENSE GAME

An unfinished proof-of-concept JAVASCRIPT game. Enemies enter on the left and follow the shortest possible path to the exit on the right. Towers can be placed anywhere on the grid, fire at enemies, and act as walls that the ENEMIES will maneuver around. The player can create a MAZE with the towers that the enemies have to NAVIGATE through.

WIGGLY CONNECTORS

A generative art experiment. Wiggly points randomly WANDER around and are CONNECTED with a line when they get close to each other.

FLUID JUSTIFIED GRID

A grid system that takes any number of images of ANY SIZE and any aspect ratio and CALCULATES new image dimensions to perfectly fit any browser window size. The images are not cropped and their aspect ratios are not changed. The algorithm runs every time the BROWSER WIDTH changes.

RESUME