CCAM Identity and Website

The Center for Collaborative Arts and Media is a newly re-formed center at Yale University, dedicated to arts research, and interdisciplinary collaboration. I created the identity for the center based on the architectural lattice I noticed on the center’s building. The new mark serves as a vehicle for showcasing all of the dynamic and innovative art coming out of the center, while anchoring it in the building’s rich history. I also designed a responsive website, which allowed the CCAM to put its events and programing in the forefront, and enables users to learn about and engage with the center. This project was completed at HvAD with art direction by Henk van Assen.

Website: ccam.yale.edu

CCAM Mark

A few process photos. The logo is based on the building’s facade. Fun fact, this building was once a bakery, as well as the university’s printing press.

CCAM Website Homepage

CCAM Website Page on Laptop and Phone

CCAM Website Example Pages

Wireframe sketches and style guides, showing the process of designing the website to be responsive and work on multiple screen sizes.

I created a number of animations for the Center’s dedication ceremony.

CCAM Opening Night Event
CCAM Opening Night Cupcakes

An edible user interaction

Cilantro App

Our relationship with food is constantly changing. Intrinsic factors such taste preferences and aversions and external factors such as scientific research, popular culture influences, and our social circles all affect the foods we eat and avoid. Cilantro is a recipe app concept that aims to accommodate the way we cook and adjust to our preferences. Rather than finding a recipe for a specific diet or around a particular ingredient, the app enables users to modify existing recipes to meet their needs. Standard recipes can become vegetarian, disliked herbs can be substituted for ones users love, and missing ingredients can be filled in with alternates. Cilantro allows users to customize and own the cooking process.

Cilantro App Paper App Map

Initial app map sketches and wireframes based on conversations I had with potential users.

Cilantro Wireframes

Cilantro App Map

After doing the initial hand sketching, I refined the app map and created a digital version which helped create a plan for creating the app’s views. I also began making digital wireframes which I could use to do some initial prototyping and user testing.

Cilantro Digital Wireframes

Cilantro Digital Wireframes

Cilantro Digital Wireframes

Cilantro User Testing

I conducted some user testing using paper and whiteboard prototypes, as well the digital wireframes. The processes allowed me to quickly see what was easy for users to do, and where they would get stuck or feel something was unclear.

Incorporating the feedback I received during the paper and digital prototyping phase, I refined the design of the app and create a more refined prototype, along with a UI design system.

Cilantro UX UI Views

Cilantro UX UI Views

Cilantro UX UI Views

Parsons Festival 2016

The Parsons Festival is an end of the year exhibit showcasing the work of graduating students from Parsons the New School for Design. The Festival takes place across a number of venues around New York City as part of NYCxDesign Week. I designed the identity system for the 2016 Festival, focusing the identity around the idea of movement—the exhibits moving through the city, and the students, moving on to the next stage of their lives. This project was completed at HvAD, in collaboration with Kelly Bryan, with art direction by Henk van Assen.

The logo design is adaptive, with the lines and text stretching and contracting based on the context in which they are placed

Parsons Festival 2016 Window Vinyl
Parsons Festival 2016 Vinyl
Parsons Festival 2016 Window Vinyl
Parsons Festival 2016 Postcard
Parsons Festival 2016 Bifold

CWB Mobile Site

As part of the team redesigning the CWB Architects website, I designed a number of the full site’s pages, and was tasked with translating the overall design to mobile. This project was completed at HvAD, in collaboration with Kelly Bryan, with art direction by Henk van Assen.

CWB Architects Site Home Screen
CWB Architects Menu
CWB Architects Project Page
CWB Architects about Page Scroll
CWB Architects People Page

Yale CIC 2016 Campaign

Leading marketing professionals and academics gather at the annual The Yale Customer Insights Conference to discuss findings in behavioral economics. I created the identity for the 2016 conference with the intention of developing a design which matched the innovative energy of the conference, and complemented the identity of the Yale School of Management at large. This project was completed at HvAD, with art direction by Henk van Assen.

The Yale CIC 2016 Logo
YCIC 2016 Program Cover

24-Page Program for the event

YCIC 2016 Sample Spread
Yale CIC 2016 Ads

Series of web ads

Reflect App

Reflect is a conceptual app which helps users achieve a greater sense of self-understanding by encouraging them to reflect on the events and emotions they experience. The app enables users to create entries, twice daily, in which they record their mood; energy level; a short summary of events; and any immediate reactions they may have to those events. Users can then revisit past entries and log additional reflections. An analysis dashboard allows users to view their emotions and energy states over time. By analyzing these records they can start to see patterns, finding causes and their effects. Users will gain a better awareness of themselves by learning about their own thoughts, emotions, and reactions. This project will continue to be updated.

Reflect App Onboarding

The onboarding process enables users to schedule their daily reminder times, to help them remember to make their two entries. They also set a passcode to protect the privacy of their entires.

Reflect App Onboarding Screen 2

The onboarding process summarizes the quick settings the user chose, and prompts them to make their first entry.

In New Entry  users can enter their mood and energy levels on a sliding (Likert) scale and to enter a record of events from this half of their day. They are also encouraged to enter any immediate reflections. Each of these steps is broken up into its own screen following the “one thing per screen” paradigm. This strategy helps keeps user attention focused on one task, and avoids overwhelming them with content.

Reflect App New Entry Screens

Users receive a supportive message once they have successfully submitted an entry.  This lets them know that the everything went smoothly, and also serves as positive reinforcement, encouraging them to keep the entry-making habit.

Reflect App Past Entries Screen

Users are able to look more closely at their past entries to remember events and feelings of the day, as well as add any new reflections they may have about those events.

Reflect App Analysis and Menu Screens

The Analysis screen enables users to get an overview of their mood and energy ratings for this week, as well as look at summaries of previous weeks. They  are able to customize the dashboard to view ratings during intervals that are of most interest to them. Importantly it also provides a friendly, easy to read and understand summary of their mood and energy levels, along with an individualized analysis and tips for maintaining and improving their emotional wellbeing.

Reflect App Overview

A number of process images follow. After doing research on other apps, summarizing user needs based on interviews, and creating a list of features, I set out to create an overview of the app’s structure and hierarchy.

Reflect App Entry User Flow
Reflect App Wireframe for Past Screen

Wireframing the screens helped me figure out the general layout structure of the app. The iterations also helped me realize when items or even whole screens were not necessary.

Reflect App Wireframe Enter Screen
Reflect App Prototypes for the Past Screen

Prototyping the Past Entries screen.

Side Show Catalog

Lisa Kereszi’s Side Show exhibition at the Yale Art Gallery brought the eccentric and bizarre world of the circus sideshow into the realm of the art world. The exhibit included both images of the sideshow acts, and the outlandish promotional material advertising these acts. I designed the catalog for the show, and hoped to capture the “abnormal” and marginal nature of the artworks in the design of the book itself. The content is pushed to the sides, and the text columns vary in width, creating a sort of funhouse mirror, reflecting the acts and performers of the sideshow. This project was completed at HvAD, with art direction by Henk van Assen.

Side Show Catalog Cover
Side Show Catalog Title Page
Side Show Catalog Table of Contents
Side Show Catalog
Side Show Catalog Essay Spread
Side Show Catalog Divider Page
Side Show Catalog Sample Spread
Side Show Divider Page
Side Show Catalog Sample Spread
Side Show Catalog Credits Page and End Sheet

This American Life Identity

This American Life is a weekly radio program which features fascinating documentary stories. The show’s theme, and correspondingly its tone, changes every week. I created a flexible identity system, inspired by the dynamic nature of the show. The concept for the logo revolves around the soundwave, which would change every week based on the actual sound waveform created by host Ira Glass saying “This American Life” in introducing the show.

This American Life Logo iteration

A portion of the logo would change on a weekly basis

This American Life Business Card Concept

Business card concept, in which each employee would have a unique business card, marked with a soundwave created by their voice.

This American Life Donation Campaign

Collateral for a donation campaign gifts, at varying donation levels. At higher donation levels, donors could get a tote with a personalized logo

This American Life Mobile App

App concept, designed to allow listeners to listen to live and archived shows, as well as create their own version of the This American Life Logo

Pillbox Sans

I constructed a physical typeface, using a pillbox with 28 slots (four slots per day), and a set of pills. The pillbox served as a 7×4 grid, and I created each letter by adding and removing pills from the slots. I created the typeface in response to the discussion of the state of healthcare in the U.S., and the growing rate of overmedication by both doctors and patients.

Pillbox Sans Alphabet
Pillbox Alphabet Closeup
Pill Box Sans Double-sided poster

Double-sided poster

Pillbox Sans Book

I put together a book documenting the process of creating the typeface.

Pillbox Book Table of Contents
Pillbox Book Process Photo
Pillbox Book Process Photo
Pillbox Book Process Photo

GNAM Report Book

The Global Network for Advanced Management conducted a survey of MBA students to assess the students’ views on environmental sustainability. GNAM tasked our team with creating a design that would translate their finding into an accessible report. We designed a 24-page book, for which we created a series of illustrations and infographics that highlighted the report’ key facts and findings. This project was completed at HvAD, in collaboration with Kelly Bryan, with art direction by Henk van Assen.

GNAM Report Cover
GNAM Report Table of Contents
GNAM Report Opening Spread
GNAM Report Sample Spread
GNAM Report Sample Spread
GNAM Report Sample Spread
GNAM Report Closing Spread
GNAM Sample Infographic

Sample Infographic