## Fall 2022 

### SOURCE

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5wL57rw4VSRPexxLk7KfbZYEQTP2%2FJws8XeghVlYVJ8qqrF4s%2F6e2219ec-ffe1-4397-b1ab-4b08b3b5e334.png?alt=media&token=64d6e360-8867-425f-b00a-58de207d8527","id":"6e2219ec-ffe1-4397-b1ab-4b08b3b5e334","width":3168,"height":2258,"filename":"Screen Shot 2022-10-26 at 16.50.24.png","type":"image/png","caption":"","border":false}]}
```

A graduate-level studio elective course focusing on the term “source” and its multiple meanings as a line of inquiry throughout the semester. A “source of truth” is the singular point which defines a piece of information. “Source code” is the origin from which a website or program is created. “Source material” refers to collateral that forms the basis for output. The notion of a “source” plays a significant role in how we design and produce work.

This course traces the various meanings of the term through a lens of digital design—focusing on the history of the internet, practical usages of web technologies, and a critical dialogue with the tools used to define the digital space. While this course serves as a technical primer for web design and development, it will also use the standards and definitions that underlie the internet as a springboard for interrogating how and why these tools and sources shape our output.

Through readings, discussions, and projects, this course charts a new path for what a “source” can be.

[Course Website](http://source.f22.href.blue/)

Courses Taught

## Fall 2022

### CD Studio: JavaScript

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5wL57rw4VSRPexxLk7KfbZYEQTP2%2FP2wuF1ilxxiFSPF9OO2f%2Ffb33a2d5-86c0-4823-82b2-fa94bc66355c.png?alt=media&token=41836ef9-0bff-4295-909c-7dad5bf05f45","id":"fb33a2d5-86c0-4823-82b2-fa94bc66355c","width":1280,"height":512,"filename":"186977711-6ffcf270-021a-45ab-88ea-476c54c90643.png","type":"image/png","caption":"","border":false}]}
```

This is a computer science class first, and a design class second.

This course is set apart from other CD courses at Parsons in that it focuses on fundamentals of computing through the lens of JavaScript and its particulars before diving into the creation of a web based application using Vue.

Students learn about computing paradigms such as objects and arrays, functions, data structures, and algorithms. This course reviews what a modern JS stack looks like and how to call an API, with the final project being a web app that students will design and build.

[Course Website](https://js.f22.href.blue/)

### MPS: Typography and Interaction

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5wL57rw4VSRPexxLk7KfbZYEQTP2%2FP2wuF1ilxxiFSPF9OO2f%2F72d0acbd-af3a-4f17-a8f6-f865c7038e59.png?alt=media&token=3e81ec3e-0444-4cd4-9215-c9ec5f18d397","id":"72d0acbd-af3a-4f17-a8f6-f865c7038e59","width":3168,"height":2258,"filename":"Screen Shot 2022-10-26 at 16.55.41.png","type":"image/png","caption":"","border":false}]}
```

Typography and Interaction is a year-long course, divided into two classes, which provides a rigorous foundation of typographic and interaction principles in the context of digital design. The first semester focuses on a mastery of type and layout concepts, with the second semester emphasizing interaction and interface design principles. Over both, students acquire and hone the skills they need for success in the field of interactive design. Cotaught with [Michael Fehrenbach](https://michaelfehrenbach.com/).

[Course Website](https://typography-interaction.github.io)

## Spring 2022

### Core Interaction 2: Lab

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5wL57rw4VSRPexxLk7KfbZYEQTP2%2FP2wuF1ilxxiFSPF9OO2f%2F89d9028b-b698-461b-9b92-7b4e3a4f5914.png?alt=media&token=d53d9bda-efd0-43a1-86ac-6f61092debc7","id":"89d9028b-b698-461b-9b92-7b4e3a4f5914","width":3168,"height":2258,"filename":"Screen Shot 2022-10-26 at 16.57.39.png","type":"image/png","caption":"","border":false}]}
```

Core Interaction comprises two courses, taken concurrently: studio and lab. Together, they form the foundation for interaction design and practice on the web.

Lab meets once a week and will focus on providing a technical and historical background to web development and the internet. The assignments are built to work in tandem with the projects students are developing in the studio class while reinforcing concepts taught in class. The lab is designed around a series of small workshops that teach beginning and intermediate interaction design through a hands-on engagement with HTML, CSS, JavaScript, and software engineering.

[Course Website](https://ci2.s22.href.blue)

Product @ Eames Institute

Taking a Walk across the Internet

An essay about rethinking the “furniture” of the web, and how we can use the internet more mindfully.

When it Changed (Parts 2 and 3)

With David Reinfurt, wrote a series of essays that grounded the first Are.na Annual about the history of the internet, and the attention economy.

NetArt: New Tab with MoMA

Sigma Xi Scientific Research Society, Tau Beta Pi Honor Society, Jim Seawright Award in Visual Arts

w-t-f is a show that primarily focuses on my relationship with graphic design at Princeton and the challenges of practicing it within the context of the visual arts program. It attempts to address the difficulties of presenting graphic design outside of its context and explores my interest in reconciling the differences between having an independent visual arts studio practice and producing “traditional” printed matter, such as posters and logos. The show also focuses heavily on my interest in the process as being equal to, if not more important than, the finished product and the challenges of conveying these ideas in a space that has traditionally focused on showcasing the finished product. This interest in process stems from Max Bill’s essay, “Continuity and Change,” where he discussed design and gestalt as continuously testing and evolving a form in order to push it to some idealized “true form.” Whether that form exists remains an open question. After all, What’s True Form?

w-t-f:

BSA asked sixteen American artists and writers to compose "new" open letters, letters that will honor the influence of Broodthaers' original documents by taking up the mantle of speaking to the world now, in 2022.

Studio Ercan–Li contributed a design which makes use of the EURion constellation, an anti-counterfeiting pattern many currencies use, which pushes against the notion that open letters should be widely distributed.

New Open Letters

An exhibition organized by Joe Scanlan and Eric Li that brings together over forty artists, graphic designers, musicians, and writers whose work engages the alphabet.

WRECKED ALPHABET

Spoke about the role of Marcel Broodthaers’s seminal piece and how it straddles design and art.

Eric Li on Marcel Broodthaers’s “A throw of the dice will never abolish chance”

An interview with Jonathan Zong and I on our collaboration throughout college and our thesis work.

w-t-f: A Conversation with Seniors Eric Li and Jonathan Zong

Contributor to essay by Matt Owens on how MoMA’s bespoke Atomic CSS library bakes in our design system to make design and developer handoff easier.

Tools not Rules

Codeveloped a living design system in CSS and JavaScript, which we lovingly called “Sol” after Sol LeWitt. This included core units such as page spacing, type sizes, and even custom calculation to include baseline alignment and cap spacing. Since our brand relied so heavily on type to express itself, we always championed clear and considered typographic information architecture throughout the website.

Design System

Designed, built, and shipped visual and UX changes to moma.org, as part of our 2019 redesign. Continued to work very closely with Graphic Design to ensure and consistent brand expression and accessibility in our new visual language, and championed good design across the Museum with other collaborators. With Michael Fehrenbach, built Sol a bespoke Atomic CSS library that includes our core design system metrics.

moma.org Redesign

Led the design process and front-end implementation for introducing Single Sign On for all MoMA’s digital surfaces (moma.org, store.moma.org, and membership.moma.org). This included untangling tricky UX patterns and merging two different existing account sign in processes. We also had to pay particular attention to brand expression as each stakeholder wanted their own sub-brand expressed.

Single Sign On

As part of the 2019 expansion, MoMA introduced a suite of 31 digital screens interspersed throughout the Museum. These digital screens served as digital wayfinding in concert with the screenprinted signage. I was co-lead developer on implementing the designs of these screens in Vue, pulling from our CMS to render constantly up to date information. I also worked closely with design to tighten up the screens prior to the reopening of the Museum.

Digital Wayfinding

Worked closely with marketing and communications to ensure COVID-19 precautions were considered and communicated at all parts of the digital and onsite visitor journeys. This included thinking strategically about all visitor touch points online and in person, as well as helping write the copy that the Museum used for its COVID messaging.

COVID Visitor Strategy

In response to COVID-19 and to reduce environmental waste, we transitioned from a printed visitor guide to a digital only one. I worked with Michael Fehrenbach to design and build the new digital visitor guide, focusing on shipping MVP features and strategizing on a clear user journey for our visitors from online to in-gallery touch points.

Digital Visitor Guide

Collaborated with Google Creative Lab to design and build a new tab extension for MoMA, randomly showing works of art from the Museum’s collection. (2023 Webby Award NetArt Winner)

New Tab

Studio Ercan–Li gave a talk on our design practice and work to Anthony Zukofsky’s SVA class.

Studio Talk

A talk about my practice and career, focusing on the topic of “Why I Do What I Do.” Given at Parsons as part of their Communication Design yearly lecture series.

CD Lecture Series: Eric Li

A talk about the product design process for digital at MoMA, including our bespoke tooling for creating our website.

Product Design at MoMA

Gave a talk about my career and practice, and gave a workshop on the history of the web, and HTML.

A Distributed Practice

For Mindy Seu’s class at Yale, I gave a workshop on content management systems as part of the design process.

Developed heuristics for sentiment analysis used in highlighting Google Play store reviews.

Software Engineering Intern

Design and build of SPAN 2016 website. Contributions to Material Design libraries.

UXE Intern

Software design and prototyping for a client relating to healthcare services. Designed prototypes of a mobile van sharing service for a automotive client.

Software Design Intern

Designed and developed websites for the ICA London, Radio Athènes, Materia Abierta, and more. Developed screensavers for Mac OS and apps for iOS. Designed books and collateral for Yale School of Architecture and the Sternberg Press series, The Contemporary Condition.

Designer

Design and execution of brand identities, digital products, and collateral for various clients. Services also include long term design and content strategy.

Select clients: Princeton, Miko McGinty, Karel Martens, Adam Pendleton, MGMT design, Friends Indeed Gallery, Innisfree Garden, CUE Art Foundation, Rivers Institute, The Brooklyn Rail, Orchard Analytics, IDSR Architecture, and the Harry Frank Guggenheim Foundation.

Designer and Developer

All things digital at the Eames Institute. 

Senior Digital Product Director

I teach graduate level design in the Graphic Design MFA program at RISD, focusing on digital interaction and the web.

Critic: Graphic Design

I teach a mix of graduate and undergraduate classes in the Communication Design program at Parsons. The courses range from core classes focusing on interaction design, typography, and the web, to more advanced topics in research and computing.

Part-time Lecturer

Over my 3+ years at MoMA, I led product design and front end development of the Museum’s public-facing digital surfaces. This included the entirety of moma.org, which is visited by 14 million visitors a year, as well as in-Museum way finding, digital signage, and in-gallery interactive experiences.

I performed user research and prototyping, led product inceptions, and managed certain products from conceptualization to completion. I was responsible for hiring full time staff and contractors. I also played a significant role in the redesign of the Museum’s website in 2019, and helped lead the Museum’s digital and content strategy throughout COVID.

I developed a bespoke Atomic CSS library which bakes in the Museum’s design system into CSS classes. This involved building Vue based UI components for use across many products and platforms.

Senior Product Designer and Developer

Senior Product Designer

Design, development, of websites for TREsPASS, World Press Photo, and more.