Hello!

I'm Case.

About Me

I'm a designer, developer, data-visualizer, and maker.
I've worked in Hi-Tech, Ed-Tech, Advertising & Marketing.

I'm currently looking for a new gig visualizing interesting data and cracking hard challenges with fun colleagues.

Here's my resumé and some favorite projects:

LED Clock

TraceView

TraceView is a best-of-breed full-stack Application Performance Management (APM) SaaS Application. As a member of TraceView's Web App team, I collaborated with Product Managers, Designers, and Developer teams to design, develop, and deliver new features and visualizations. We also fixed copious bugs, eradicated technical debt, refactored pages & components, and introduced modern Javascript frameworks, libraries, and tooling, such as React, D3, and ES6/ES7/Babel.

The AppMap

A realtime network topology & health graph for distributed applications. I was the lead developer on the front end visualization. I worked closely with our Product Managers, Designer and multiple brilliant teams of Developers, developing initial prototypes, rapidly iterating, polishing, optimizing, finalizing features, APIs & interfaces, integrating and ultimately deploying. This was an especially fun and challenging visualization to nail down. Some key challenges:

1. Performance & Scalability

The AppMap needed to be able to visualize anywhere 10 or 1000 networked nodes and still be performant. We chose D3 & SVG for the main visualization. This allowed us to abstract out styling via CSS, and leverage native DOM interactions. These benefits, along with D3's data-binding and SVG's DOM testability made it the clear choice over <canvas> or WebGL.

2. Information Density

With hundreds of nodes and network paths we needed to minimize on-screen text for smooth scrolling and digestibility. We used intuitive colors and CSS animation to indicate node health, and color and line thickness to represent network health and throughput. Contextual z-sorting of SVG elements enables users to quickly see (and easily click on) problematic nodes or edges.

3. Graph Theory

The earliest appmap prototypes used D3's force-directed layout, but with 500+ nodes our frame rate went down and our fans turned on. We dubbed the resulting tangles "angry spiders" and came to understand that force-direction is great for relatively simple maps, but isn't very scalable, especially with persistent text labels.

4. Intelligent Layout

Our intreped designer Quintin Marcus mocked up a 'column mode', intellegently grouping nodes by type, such that requests generally flow left-to-right, e.g. user nodes on the far left originate requests which flow to the right through servers, to caches, DBs, CDNs, etc. This layout mode was super fun and deceptively challenging to implement with smooth scrolling and dynamic responsiveness.

Notable features at launch include:

  1. Dynamic columns and rows by node type
  2. Vertical and horizontal responsiveness with dynamic node name truncation
  3. Column order dynamically prefers left-to-right network request flow
  4. Intuitive contextual z-sorting of nodes and edges

We erred on the side of over-delivering by flushing out both modes and persisting user preference for one or the other.

Press Release

TraceView

TraceView is a best-of-breed full-stack Application Performance Management (APM) SaaS Application. As a member of TraceView's Web App team, I collaborated with Product Managers, Designers, and Developer teams to design, develop, and deliver new features and visualizations. We also fixed copious bugs, eradicated technical debt, refactored pages & components, and introduced modern Javascript frameworks, libraries, and tooling, such as React, D3, and ES6/ES7.

Trace Details Visualizer

Ye olde Trace Details Visualizer was plagued by long-standing bugs and lackluster UI/UX. Customers were complaining about poor performance and even browser crashes when rendering complex traces. Sadly, we didn't have the time or budget to address these issues, and the legacy code had become unmaintainable.

Skunkworks

Unable to walk away from this fascinating challenge, I went rogue, burning midnight oil to create a green-field replacement. My prototype could smoothly animate, pan, scroll, and zoom through 20K+ extents at 60fps! This turned out to be the easy part. The hard parts came next: achieving full feature-parity, flushing out new features, adding unit & functional test coverage, and integrating with legacy endpoints & templates.

Hackathon

A tipping point when teammate Dan Riti organized a full-team hackathon. We all sat around the picnic table and I doled out subtasks to volunteers. Even our CTO Dan Kuebrich came down and hacked with us! Much fun was had and so much progress was made I was finally able to get buy-in from Product.

The Home Stretch

The last 10% (always the hardest) was brought home with help from our Senior Designer Quintin Marcus, Product Manager Jennifer Burner, our industrious intern Will de Rivera, and QA extrordinare Rob Salmond.

Ship it!

We worked with marketing, documentation, sales & support teams to prepare for launch, hosting demos for Product and Sales Engineers, writing a blog post and recording a video walkthrough. Since this was a critical visualizer, we preserved the legacy page in production behind a hidden URL as a fallback and for QA comparison.

The Vis That Keeps on Giving

Post-launch, we continued reaching out to users for feedback, and shipping UI/UX improvements. In addition to happier customers, we gained new insight into previously invisible edge-cases of malformed data in our trace-processing pipeline and instrumentation. TraceView is very much an "eat your own dogfood" product, and this upgraded vis created a ripple effect of improvements throughout our codebase.

Space Pirate with Flying Toaster

Dance.js Audio Visualizer

Demo
caseprince.com/appneta/dancejs
Made with
three.js & TweenMax.js
For
Dance.js Vancouver Edition, 2015
Hosted by
Stephen Belanger

WebGL Globe

Site
http://ca5e.com/webgl-globe/
Client
Akamai Technologies
About
A prototype-upgrade for Akamai's Spinning Globe. Goals include:
  1. More visual impact, richer interaction.
  2. Easily readable, multi-dimensional data.
  3. Data display per City and/or Region.
  4. Auto-play mode cycling through top Cities
  5. Deployment in Network Operations Command Centers (NOCCs).
Challenges
  1. Effecient client-side spherical extrusion of custom TopoJSON shapes with THREE.js
  2. Too-Large-to-extrude Regions (Russa: Y U cross international date line on mercator projection?)
  3. Transparency, Shaders, FPS, Rollovers, 3d-to-2d 'unprojection' for H.U.D.
  4. Animating the short way from L.A. to Tokyo (How do I great circle?)
  5. Face & Vertex Normals (how do they work?)
Tech
WebGL, D3, THREE.js, TopoJSON, Constructive Solid Geometry
Conspirator
Leo Dornelas

Akamai Customer Dashboard

Static Archive
http://caseprince.com/akamai/cdb/
Client
Akamai
About
Akamai’s Customer Dashboard (CDB) is a multi-device tool that enables Akamai customers to view pertinent, near-real time site data via a single, simple user interface. Using data pulled at intervals ranging from 5 minutes to 7 days, the CDB provides current and historical views of site performance, streaming performance, and security threats. It demonstrates the value of Akamai to both technical and non-technical users, highlighting the performance benefits and enhanced security Akamai delivers.
Roles
Project Lead and Architect. Coordinated between internal designers, developers and outside contractors. Worked closely with backend developers on API & database design to create a regional, scalable, low-latency app with smart caching & optimization via a ‘variable interval’ API that enables low-latency display of high-granularity data for short time-ranges (e.g., 24hrs x 5min interval), and progressively aggregates low-granularity data feeds for larger time-ranges (e.g., 1year x 7day interval).
Tech
Yeoman, D3.js, TopoJSON, HighStock, Compass/SASS, RequireJS, History.js, Moment.js, Tween.js, John Resig's Simple JavaScript Inheritance
Collaborator
Leo Dornelas

Muppets Most Wanted - Catch Constantine

Game
games.disney.com/muppets-most-wanted-catch-constantine
Client
Disney Interactive
Agency
RED
About
A mobile-first HTML5 game for the newest Muppets movie; Muppets Most Wanted
Roles
Concept, Development, visual & sound design, game mechanics
Process
Concept, Development, visual & sound design, game mechanics
Tech
<canvas>, jQuery, CSS3, SASS, Compass, require.js, John Resig's Simple JavaScript Inheritance, Rosy
Collaborators
Alex Tyack, Pep Lupo

Spheres.js

Site
caseprince.com/spheres/
About
This is most of my sphere collection. The interface is a learning exercise & experiment in JavaScript modularity, inheritance, 3d & particle rendering and physics. Needless to say it's a work in progress.
Source
github.com/caseprince/spheres
Tech
<canvas>, jQuery, require.js, three.js, Box2DWeb, tween.js, Simple JavaScript Inheritance.

Lionsgate Megapage

Site
www.facebook.com/lionsgate/app_314732065322886
Client
Lionsgate
Agency
RED
About
Lionsgate needed a central facebook hub to connect their many facebook Pages and allow fans to discover new content. We developed a facebook App that aggregates Likes and timeline feeds from a large and scalable collection of Pages. The mobile-optimized site lets users Like, browse, and filter Pages by category, genere, tag, and a unique sliding filter. Facebook pages and filters are managed within the main lionsgate.com CMS. New Pages automatically pull default meta, image, and video data from the Open Graph API.
Roles
Front end development (HTML5 templates, CSS3, jQuery, JSON), facebook App integration, analytics
Tech
HTML5, CSS3, jQuery, jQuery UI, JSON, SASS, Compass, RequireJS, Rosy, Django
Collaborator
Kliford Hernandez

eThreads.com

Site
ethreads.com
Roles
Co-owner, CTO, Branding, Webmaster, Photography, Print design
About
A wordpress & Flash eCommerce site with custom handbag configurator and order management system. This site maxed out at over 2 trillion design possibilities in an earlier version, which included a (now retired) bag with 5 customizable outside panels x 300+ fabrics, multiplied by additional lining, zipper & hardware color options.

The current version has less total design configurations, but it has more bags, is better optimized & more object oriended, can publish custom Facebook Open Graph actions, and socially aggregate designs via the Design Gallery.
Tech
HTML, Flash, CSS3, jQuery, Wordpress, Amazon AWS (S3, Cloudfront & SimpleDB), Facebook Plugins, PHP & JS SDKs
eCommerce
Google Wallet, Amazon Checkout, and Paypal. Payment gateways push customer and order data to an O.M.S. (Order Management System) emphasising order printability and quarterly sales and tax data aggregation.
Social
Facebook, Twitter & Pintrest — Social Channels & API Integration
Collaborator
Emily Worden

Coke Zero Ad

A Rich Flash ad produced in 2008 for Coke Zero's Rooftop Racer 'advergame'. Grab the bottle and shake it up! Designed in collaboration with Crispin Porter + Bogusky

Foam physics sumulated with Box2D

The Thrill of the Catch

Site
discoverylake.discoveryeducation.com
Client
Discovery Education
Agency
RED
Roles
AS3 coding of dynamic fish behavior and animation in fish-feeding & fishing simulators. Integration between fronend & backend APIs and between fish configurator, fish-feeding & fishing simulators, user achievements, and shared lake environment. Balancing of social game mechanics, e.g., Bait preference radii per fish species, or user trash collection rates vs. pollution levels.
Awards
FWA Site of the day, Creativity International Award
Tech
Flash, Flash Builder, TweenMax, TimelineMax, Python
Collaborators
Matt Mangus, Jared Kroff, Adam Devincent

Ford Mustang 2013 Customizer

Clients
Ford & Team Detroit
Agency
RED
Site
www.ford.com/cars/mustang/customizer
Roles
Updating the customizer from the 2012 model. Removal of ‘12 contest across site, removal of Boss 302 engine type from configurator. Addition of user selectable garage backgrounds & other site updates.
Tech
Flash, Flash Builder, ANT
Collaborator
Taka Kojima

Ford 150 Comparison Tool - Arabic Localization

Site
www.me.ford.com/ar/sau/trucks/f-150/comparison
Clients
Ford & Team Detroit
Agency
RED
Roles
Complete dual localization into Arabic & Middle East English. Conversion of all units into Metric, e.g.; towing & hauling capacity, fuel consumption & torque. Arabic translations were deployed to XML, Flash, and Photoshop, each of which presents different technical challenges due to Arabic’s right-to-left paragraph flow, common ligatures, typographical style, & conventions. Horizontal mirroring of many interface elements & content-sections to preserve right-to-left content flow & legibility. Added geo-specific content and multi-currency selector & calculator for 10 different regional currencies and corresponding petrol prices.
Tech
Flash, Flash Builder, Photoshop, Opentype
Collaborators
Matt Mangus, Jared Kroff, Adam Devincent

Trueblood Twitter App @ bloodcopy.com

Client
HBO
Agency
RED
About
A twitter hub for "Trubies". Included @anywhere API integration (now depricated) and a live feed of trueblood related tweets, official twitter accounts & superfan list filtering, schedulable real-time tweet feed from guest Celebritiy Hosts, and real-time #trueblood trending topic visualizer using a custom physics-based chronological "tag cloud" with interactive tweet volume timeline. Also included mobile-optimized versions targeted to Mobile Safari on iOS, with a streamlined & touch-enabled interface for the small screen.
Roles
Visualizer-concept, UX, Wireframing, Development, Optimization, Stress-tester, & Twitter API dimlomat; We used 3 of the 4 APIs available at the time: @anywhere, the search API, and the older REST API.
Challenges
Integrating all 3 Twitter APIs & reacting to rate-limiting and fail-whales. Visualizer data aggregation, formatting & compression. Spam account filtering. Custom styling of @anywhere interface elements. Load balancing and load-time optimization.
Tech
HTML, CSS3, Flash, Box2D, jQuery, JSON, gzip
Awards
2011 Shorty Industry Award for Best Use of Twitter in a Marketing Campaign
Collaborator
Balind Sieber

Monster High: Monsterfy Yourself

Archive
Monster Configurator
Client
Mattel
Agency
RED
About
A Facebook App for configuring and sharing a Monster-High-style cartoon avatar of yourself. Users can configure face-shape, hair, facial features, makeup and accessories. Most assets can be scaled, positioned and/or tinted any color. Finished avatars are shared on users’ timelines and in a public gallery. 20K+ avatars were created in the first 2 weeks after launch.
Roles
UX design, Flash interface development, vector asset management & prep, and integration with Django backend.
Collaborator
Balind Sieber

970x250 ESPN.com Takeover

Clients
ESPN & NBA
Agency
RED
About
A takeover ad run on espn.com on Christmas day 2012 promoting their 5-game-lineup. Features a custom “2.5d” ESPN/NBA logo, interactive Flash 3d, and a custom Pixel Blender 3d snow particle effect. The banner used time-code to dynamically update the CTA and layout as games began and ended throughout the day.
Roles
Concept & Implementation

Method Clean-Fiend: The House Party

Ad Archive
client-projects.com/droga5_method_game/960x66_expanded.php
Client
Method
Agencies
Droga5 & RED
About
A rich, expanding mini-game ad for Method cleaning products. The ad showcases 3 products through compelling interactive parallax vignettes with humor, easter-eggs, and rich sound effects. Users are scored according to cleaning speed and Type-A-ness.
Roles
Game mechanics, UX, development, sound design, optimization, assest prep and management
Tech
Flash, TweenMax
Collaborators
Gregory Nichols, Flor Espinoza

Columbia Extreme Product Tester

Ad Archive
client-projects.com/columbia_sportswear/columbia_xTester.php
Client
Columbia Sportswear
Agency
RED
About
We developed an expanding pencil ad for traffic on ESPN.com that encourages users to put Columbia products through the proverbial interactive ringer. We delivered 5 mini-games that each showcase a specific Comumbia technology and enable dynamic clickthroughs to individual products on the eCommerce site.
Roles
Game mechanic conceptualization, animation, development & deployment. CGI asset & sequence management, video optimization, compositing & integration.
Tech
Flash, TweenMax, Maya, FLV, AS3 Displacement Maps
Collaborator
Christian Kowalchuk

NVIDIA Speak Visual Ad Campaign

Archive
client-projects.com/nvidia_speak_visual/
Client
NVIDIA
Agency
RED
About
3d Flash ads for NVIDIA's Speak Visual campaign. Each ad is based on a draggable spinning 3d cuboid and features 4 visual artists working in different visual mediums, including Designer/Coder Jousha Davis and Spore Art Director & artist Ocean Quigley. We took flat image files from the print campaign and massaged and seperated them into layers for 3d display with 'baked in' shadows. We curated, edited and compressed examples of each subject's visual communications for maximim creativity with minimum Kilobytes, including one mouse-interactive piece from Jousha Davis. We included a demonstration animation and fine tuned the 3d interaction & snapping for an intuitive and smooth UX.
Roles
Concept, Design, Development, Animation, Asset prep, Optimization & Support
Tech
Flash, Papervision3D, After Effects
Awards
Internet Advertising Competition 2009 - Best Computer: Hardware Rich media Online ad
Collaborators
Gregory Nichols, Leo Dornelas

Word Central

Site
www.wordcentral.com/games
Client
Merriam Webster
Agency
Six Red Marbles
About
A fun language skills building site designed for younger humanoids.
Roles
Concept & character development, illustration & dynamic animation for Robobee and Big Bot games.
Awards
2007 MITX Interactive Award in Education and Learning
Collaborators
Tim Lynch, Joanne Markow

LED Bonsai

About
A piece for my little sister. Hundreds of red, green, blue and white LEDs, lots of copper wire and a mahogany base.

G.N.T. Temerity

About
My SCUL ship. Frigate Class, Ti hull, with 7 speeds & coaster primary retro thrust (aka brake). 40 Watt modular sound system with pre-amp. 12V multi-modal, remote controlled LED ground effects. Retro-reflective tires and accessories, including custom stitched traffic-cone saddle. Adafruit Spoke POV (Persistance-of-Vision) LED display integrated into navigational thruster (aka front wheel).

Traffic Cone Armor

About
My halloween costume for 3 years running, with new additions each year. Materials include traffic cone plastic, reflective nylon stitching, EL wire, LEDs, grommets, zip-ties, rigid foam, insulation tape, a volkswagon seatbelt, and an Arduino LOL shield (charlieplexed LED matrix belt buckle). Little kids always think I'm a space-lobster gladiator of some description.

Super Mario in the 3rd Dimension

Cairns

iYak

SCUL GoPro Timelapse

Temerity Detail

Spoke POV

LEDs

Case 'n' Smoke

Kendal Square Timelapse

RED Canvas Logo

Site ca5e.com/staging/red/logo

Source github.com/ff0000/red-canvas-logo/

About This was a "Dev Day" project and ended up being used as the main logo in our office, projected on a cool translucent wall at reception. My brilliant colegues made too many canvas animations to list them all, but some favorites are; Physics, PathTree, and Hairs.

I contributed some mathy animations, live weather reports & street-views for the office locations, and a traffic map for L.A. because their rush-hour is epic. Never quite got around to adding the surf-report/forecast.

Tech <canvas>, jQuery, CSS3, SASS, Compass, SVG, Google Maps API, Weather Underground API

Conspirators Tim Wood, James Deagle, Jay Weeks, Christian Shum-Harden, Jacques Altounian

Brands I've worked with: