UX can be a limiting concept. Although usually user driven, digital experiences can transcend a user experience, especially outside the context of a website or an app. Participant Experience, though more vague semantically, includes those passively engaged. In a world of UX driven design, users are the driver, and that's all that needs to be designed in single user apps. With a more open-ended experience design approach, the screen is no longer a limitation. From apps that remotely control home automation to custom built interactive environments in marketing campaigns, the user is the driver, but that concept can be blurred, and the participant can be the user, the driver, or a bystander and still be engaged. In a physical interactive space, engagement isn't necessarily user-centric, and UI doesn't have to be either. Similar to UX design, the holy grail standard is the intended behavior of the user so it's goals are parallel, however Participant Experience is also responsible for a grander spectacle and the interactions beyond the immediate.
My passion is design, my tool is code. I have a split career as a UX developer and a SVG & 2D web graphics animator. I've taught graduate level interaction design at Pratt and have experience with OpenFrameworks with just enough C++ knowledge to build an app with the code libraries available. Currently I'm learning Cinder and have found it to be essentially the same as OpenFrameworks, but better documentation and platform support.
Who is Eric?
Hogarth Worldwide @ Wall Street Journal
December 2019 – Present
New York, NY
• Building an email template and component system with a Ruby/node/SASS/handlebars build
• Assisting design team by establishing an enforceable style system for template workflow
• Multifaceted role spanning tasks from front-end dev, animation, design and emerging techread more
Media Lab Fellow
July 2019 – Sept 2019
New York, NY
• 10-week Fellowship with the Business Development & Innovation team
• Focus on augmented reality in journalism contexts
• Ideating, building AR prototypes and presenting moonshot design initiativesread more
Jan 2019 – May 2019
New York, NY
• Building and maintaining a style guide as React.js components in Storybook
• Hybrid prototype engineer, UX role at a fintech startup for SaaS appread more
Freelance Developer / Animator
Sept 2018 – Oct 2018
Helped build a multi-screen, tablet driven interactive experience for a permanent installation.
• Built a dynamic system of charts from API data
• Highcharts.js is the primary data parsing tool with significant GSAP manipulationread more
Front End Developer / Animator
J.P. Morgan Chase & Co.
Full Time Employee
Jan 2016 – July 2018
New York, NY
• Recruited internally as an initial member of a new internal design agency at JPMC, Core Digital
• built the prototype for the JPMorgan.com 2018 redesign
• built prototypes / dev work for many Chase, J.P. Morgan and JPMC lines of business
• built several high profile site such as Jamie Dimon's Annual Report website
• animated infographicsread more
UX Developer / Animator
Corporate Investment Bank
May 2011 – Dec 2015
New York, NY
• Helped build and maintain the JPMorgan.com 2012 and 2015 sites
• Build modules and reusable front-end components for Fatwire deployment
• Built and animated small interactives, infographics, SVG graphics
• Built a data visualization component in the CMS with Highcharts.js for JPM.com
• Interactive components showcasing small collections of the firm's art, media or history archives
• Contributed to brand templates and internal demo site
• Animated many (online) holiday cards for the firm. These were animated with Raphael.js so I could animate SVG vector graphics across all browsers. Yes, IE6, and this was a requirement
• I built banner ads in Flash / HTML and used Sizmek to deploy them
• After Effects when neededread more
Mar 2011 – Dec 2015
New York, NY
• HTML5 banner ad animations using SVG, canvas and lots of GSAP
• Rich media units with varying levels of interactivity and server side data
• QA and perfectionism
I took many of the challenging projects, like the Thanksgiving Day Parade ads with 1000 balloons, 4th of July Fireworks ads with perfectly tweaked particle emitters, or the Versace ads where the client provided one flat image and we had to make an etherial luxury animation out of it. Originally this was a Flash animation role but our team moved to HTML in 2013. When we moved to HTML I stepped up to build the branded templates using SVG — this included training the design team how to prepare SVG assets and training the dev team how to animate them.read more
Jan 2011 – Dec 2015
14th St. campus, NY, NY
I taught courses in interaction design in the Graduate Communications Design Dept. Primarily my students were very green with code, but between their existing skills with inVision prototypes and my code examples, often students found they loved the code. Several of my students work at fantastic design firms in the city specializing in hybrid design/development roles. Other students concentrated on UX strategy (less development), and other students experimented with OpenFrameworks. Responsibilities included several rounds of critiques during the semester and departmental critiques at the end of semester.
I also taught one semester of Motion Graphics in the undergraduate COMD on the Brooklyn Campus in Spring 2011.
Missouri State University
In the Fall of 2010 I left NYC to teach at my Alma mater for one semester totalling 5 sections of undergraduate courses.
3 sections: Animation 1, This is the first course offered for Animation majors. This course taught animation fundementals using After Effects. This might be my favorite class I've ever taught because the students were all entering the first class for their chosen major so they were excited to learn and were fully invested.
2 Sections: Intro to Digital Media Arts, this was an open ended intro course for interactive and digital media. Primariy I introduced students to the worlds of interaction design, web animation with small projects that were acheivable by beginners. For instance I introduced OpenFrameworks very early in the semester to show the possibilities and the grander vision of interaction design beyond the web, but the primary goal for the course was to introduce them to the tools and the concepts and not necessarily to get them to try to learn entire development languages.
Jr Front-End Developer / Animator
May 2009 - Aug 2010
New York, NY
CS Designworks is a small design studio in Midtown with primarily corporate and real estate clients. I helped build pages in an existing framework for Cushman & Wakefield's marketing website, built microsites for other clients, firms and corporate office buildings, and the ocassional After Effects animation for an event. At CSD I built a flash banner ad for One World Trade Center just as the building was being completed. I left my role here to accept a temporary teaching position at Missouri State University.read more
Cranbrook Academy of Art
M.F.A. | 2D Design
2005 – 2007
Bloomfield Hills, MI
Missouri State University
B.F.A. | Animation / Sculpture
1999 – 2005
Awards & Achievements
Biannual Faculty Art Exhibition
MSU Art & Design Exhibition Center
Another kinetic sculpture Landscape Machine was included in the MSU Faculty Art Exhibition. The piece was mounted to the ceiling in two parts, one side that mounted a fixed height cable, and another side 12ft away that moved a cable mount up and down, allowing a wheel with a video projector to freely roll left or right. I used OpenFrameworks and a video camera to then capture the movements of this free-rolling projector so I could play video based on the projector's left/right proximity. The video is of a traditional outdoor landscape (with a a few digital augmentations) and the OF software simpily slid the video left and right to make the video to appear to shine a hole through the wall.read more
MSU Centennial Art Exhibition
Springfield Art Museum
My kinetic sculpture The Relationship Between Free-Wheeled and Determined Actions was chosen to be included in the MSU Centennial Art Exhibition Art Exhibition for Missouri State University. The piece hung in the center of a room with 20ft ceilings and it spins a bicycle wheel at a constant pace causing an attached bowling ball to drop and shake the machine, which in-turn caused a loosly attached wheel at the far end to flip, or spin somewhat irregularly and unpredictably.read more
Ranked top 30 in the 1650 Freestyle
NCAA Division I Men's Swimming
Boy Scouts of America
Lee's Summit, MO
- Custom nav architecture built in 3D CSS coordinates
- User initiated animations are GSAP or pure CSS
- ERICBINTNER.COM subtractive color logo built in canvas with js
- three.js WebGL (desktop site) modified from these sources
WebGL Clouds on Experiments from Google
WebGL Aurora forked from this broken CodePen
- This site contains many features that push the boundaries of browser graphics – some browser rendering differences are likely to occur.
- Likewise, I do not have *all the devices and browsers* and the QA process includes *only my hardware*, therefore (as of this writing) expect bugs in Android and Windows.
- This site lightly uses jQuery as I needed a site built ASAP (I built this in just over 2 months). I realize how and where many aspects of constructing the DOM in my usage can leverage a virtual DOM such as in React.js, especially for larger, more scalable projects than this.
People I want to thank:
Vonda Yarberry: Missouri State, Animation Professor Elliot Earls: Cranbrook, 2D Design Artist In Residence Andrew Prinz: Artist/Musician, Mahogany (band) Cheryl Molnar: Painter, J.P. Morgan Graphic Designer Santiago Piedrafita: Pratt, Grad COMD Chairperson
Brain Eno Golan Levin Cyrak Mike Bostock Pipilotti Rist Michel Gondry Guy Debord That challenging Radiohead website released at the same time as Kid A.