↑ Back to Portfolio
Yankees Typographic Narrative
This six-panel foldout book was an assignment for a graphic design class that I took at Penn. Before starting the project, our professor told the class to write down the story of a childhood memory, using as many sensory details as possible. We were then to take this text and transform it using typography, using variations in type size, weight, and position to convey the narrative as specifically as possible. We were not allowed to use images of any kind, only type, and the dimensions of the final product were specified by the assignment.
I selected two typefaces, Gotham and Century Schoolbook, to tell the story of my experience attending game one of the 2000 World Series between the Yankees and the Mets. I felt that the friendliness of these fonts suggested the fun and excitement of being at the game, while the contrast between them helped me convey a sense of dramatic tension. I experimented with many different type treatments and placements before arriving at the design I felt most effectively communicated my memory of being at the game.
Click to view full image
Suzanne Vega CD Insert
For an assignment in the graphic design class that I took in the spring of 2008, I produced an eight-page booklet containing a visual interpretation of the song Tom's Diner by Suzanne Vega. The instructions were to imagine that Vega was releasing an updated version of the song, and to create a small booklet, similar to liner notes, that could be inserted into the hypothetical CD case. No text was permitted in the booklet, only images, but we were free to use and modify any pictures we could find on the Internet.
As source material for my CD insert, I selected Automat, a painting by Edward Hopper, because I felt it reflected the song's mood of wistful loneliness. I used the painting on all eight page of the booklet, but manipulated it in various ways to create a narrative sequence. I tried to design this narrative in such a way that it remained open-ended, much like the final notes of Tom's Diner.
Click to view full image
Why/How This Book Now
"But why? Why now, in
this age of multi-mediated stimulation and simulacral everything take the time to create
these idiosyncratic and intimate spaces of carefully crafted experience? What is the
purpose of a book in our current culture? And artists's books? The most complicatedly
unreadable and often baffling form of book? What are they for? Is making a book art
object any different from making any other kind of artwork? Who asks what is art for?" —Johanna Drucker
On February 14, 2008, book artist Johanna Drucker visited Penn to give a lecture about the role of art in contemporary culture and the reasons she continues to make art. My typography class attended her talk, and afterwards our professor provided us with a transcript of her lecture for us to transform into hand-bound books. We also had access to the images that Drucker projected during her presentation, many of which were directly referenced by the text.
With the exception of the book's content, this project was completely open-ended. I chose to design my book in the style of Johanna Drucker's art: carefully crafted, with attention to nuance. The combination of Clarendon and Century Schoolbook gave Drucker's words a strong but non-threatening voice, while full-bleed, black and white images added context without distracting the reader from the narrative. I purchased smooth off-white paper to print my book, and bound three copies by hand using a needle and thread.
Click to view full images
Overheard at Penn
This letterpress project was completed for a typography class that I took during the spring of my sophomore year at Penn. Each student in the class was told to walk around campus for a couple of days and eavesdrop, then return to the print shop with a list of funny or interesting snippets of overheard conversation. We then were to select our favorite quote to typeset by hand and run through a letterpress. The final prints were collected and assembled into twenty or so copies of a book we titled Overheard at Penn.
Click to view full images
Having grown up in Connecticut and dated a drummer in high school, my quote had personal significance. I tried to select type that communicated the meaning of each word, for example by italicizing and capitalizing "Connecticut" in order to emphasize it and by using a big, blocky sans-serif to suggest the loudness of drummers. The most interesting part of this project for me, however, was not so much the typographic decisions I had to make but rather the physical process of selecting letters from trays and arranging them backwards in preparation for the letterpress. It was eye-opening to see the origins of a discipline that has become much less hands-on since the computer. Leading, it turns out, is actually lead.
Schedule Me
Click to visit site
Tired of the tedious process of making tables in Microsoft Word, I designed this web application for formatting a course schedule along with my friend Nirav Sanghani, who was responsible for the back-end development. Schedule Me takes a list of course information and transforms it into an organized grid, so that you can easily get a sense of the structure of your days. Multiple color schemes are available, and each schedule has a public URL associated with it so that it can be easily shared with classmates and friends. To view the application in action, you can log in with the username/password combination "demo/demo."
Recently, we added Facebook Connect functionality to the site, so that users can publish the schedules they make to their Facebook profiles, where their friends can then view and comment on the classes they're taking.
Penn Appétit
At the start of my junior year at Penn, I was approached by a friend of mine, who asked if I'd be interested in designing the layout of Penn Appétit, a student-run food magazine that had been founded the previous year. The first issue had been printed in black and white, the second in color but with limited design guidance, and the magazine's editor and her board wanted the third issue to really stand out as a professional-quality publication. Having been an avid follower of the Food Network and various food-related blogs for years, I happily agreed to come on board.
Click to view full issues online
This decision was the beginning of a three-semester commitment to Penn Appétit, a period during which I probably learned more about print design and the publishing process than I ever could have absorbed from taking a class. The design work for each issue occurred during a two-week sprint of long but productive nights in the computer lab. Emma, the magazine's editor and founder, would provide me and my co-layout editor, Olivia, with finalized (or near-finalized) articles, which Olivia and I would divide between us and copy into Adobe InDesign. We would then scan through folders full of photos that had been taken for each article, and start thinking about how the words and images might work together to form spreads. Before designing anything, however, we always made sure to set up paragraph and character styles to enforce consistency across the entire magazine document.
Ideas for different layouts came in various forms, but the process always involved moving things around, changing the sizes of photos or number of columns, and sometimes even deleting everything and starting from a blank page. It was frustrating at times, and certainly exhausing, but the feeling of having the first physical proof in our hands at the end of the two weeks made everything worth it.
Swigg
Swigg logo
Swigg was a group project completed for a Databases class that I took during the fall semester of my junior year. I worked with Nirav Sanghani and Roman Pedan to design a Digg-style web application that allowed users to submit and vote on their favorite drink recipes. As we explained in our project write-up:
Swigg.com serves as a central portal for sharing drink recipes among beverage enthusiasts. Registered Swigg users (Patrons) are invited to share their own drink recipes by posting on Swigg, to show their appreciation for other patrons' drinks by voting (Swigging) for other patron's entries, or to share their enthusiasms or concerns by posting their thoughts as a comment to the drink recipe (Toasting). Unregistered Swigg users (Guests) are also invited to browse the drink recipes that have already been posted but are not permitted the intoxicating powers of Swigging, Posting, or Toasting. Guests are also restricted from viewing drink recipes that Swigg Patrons have marked as private.
Click to view site screenshots at full size
I was responsible for the design and HTML/CSS development of the application, Nirav implemented the back-end database, and Roman wrote code for an inverted index and search engine. Unfortunately, the site is no longer online, but screenshots of the design are available above.
An Open Book?
Click to view full image
This graphic was a project for Information Design & Visualization, a course I took at Penn the first semester it was offered, in the spring of 2009. Our first assignment was to introduce ourselves through the lens of personal data, and I chose to analyze the books I've read as a way of telling a story about my life. I have an active Goodreads account that I've retroactively updated with all the books I can remember going back to sixth grade, and this account served as an excellent source of data for my project.
In order to calculate aggregate statistics such as total number of pages, cumulative pages per season, and pages read by genre over time, I used a Google Spreadsheet. After manually copying in the page data from Goodreads and organizing it into columns, I was able to compute the numbers I was looking for.
Spreadsheet and early sketches; click to view sketches at full size
I then used Adobe Illustrator to generate the graphs, and InDesign to lay out the final page. To present my project to my classmates, I prepared a set of slides that summarized each year of my life with a book from that year, the first sentence of each book, and a photograph of myself at my age that year. By revealing the books I've opened, I hoped to portray myself as an open book to my class.
Zoom
Zoom was a narrative animation of my daily life at Penn, completed for my Information Design & Visualization class. I created it in response to an assignment called Mapping Experience, wherein my professor challenged the class to apply the metaphor of a map to information that wasn't purely geographical. For one week, I recorded the amount of time I spent in various locations around campus, including my own room. I then experimented with various ways of visualizing this information. Some of my early explorations weren't entirely successful, but they did help me figure out how to connect the physical location of each place to its relative importance in my life.
Sketches and early concepts; click to view at full size
The end result of this project was a Flash animation that highlighted my most emotionally significant locations from the week while placing them in the context of campus geography. The abstract grid corresponded to city blocks, but avoided any direct references to a physical map. By creating this animation, I wanted to explore the line between photographic and abstract representations of reality and also between discrete and continuous experiences of time.
Click to view full animation
How to Find Food at Penn
Early sketch; click to view
This was another project completed for the Information Design & Visualization class I took as an undergraduate. Under the Button, a popular student-run blog and source of news on campus, wanted to run a series of "How To" illustrations for various aspects of life at Penn. I chose to focus on food, and created three information graphics to help students navigate Penn's culinary landscape.
Taking a few cues from New York Magazine's Approval Matrix, the first graphic charted campus food establishments on two axes: cheap to expensive and disgusting to delicious. The second placed dining options on a spectrum of drunkenness required to enjoy them, while the third mapped out a walking tour of popular food trucks. The graphics were featured in an Under the Button blog post that ran on April 10, 2009.
Click to view full images
PennApps
Click to view PennApps 2009 website
I designed and built the website for PennApps, an annual web development competition for Penn students that I founded and co-hosted in the fall of 2009. The goal of PennApps was to teach students the latest cutting-edge web technologies (such as PHP, AJAX, etc) that they probably wouldn't have the opportunity to learn by taking a class. It also encouraged students to pursue projects outside of class, and to build something for fun instead of for a grade.
In 2009, PennApps began with a tutorial on the basics of HTML, CSS, and PHP, led by myself and my classmate/friend Nirav Sanghani. Students then had a month to design and develop their applications, during which time they had access to a handful of resources posted on the PennApps site as well as a Google Groups listserve where they could post questions and share advice. Submissions were judged according to four criteria: functionality, usability, appearance, and originality.
Overall, I was very impressed with the quality of the inaugural submissions, and I am happy to report that the PennApps competition is thriving over a year later, with sponsorship from Google, Microsoft, and many other technology companies. I look forward to following its progress further in years to come.
This Mortal Magic
"It's not so much what we do, or even what happens, it's the way things overlap and intersect."
—Dave Hickey
This Mortal Magic was a warm-up exercise of sorts for the fine arts thesis seminar that I took throughout the course of my senior year. Our assignment was to read Air Guitar by Dave Hickey, and then to select a chapter to use as inspiration for our first project. The only constraint on the project was its title, which had to correspond to whichever chapter we chose.
My favorite chapter, "This Mortal Magic," discussed the relationship between life and art and the impact of photography on painting during the twentieth century. I responded to Hickey's ideas by taking photographs of everyday life in Philadelphia and overlaying these images with Impressionist paintings. I wanted to discover unexpected connections between the photographs and paintings, in order to establish a meaningful relationship between them that previously did not exist. More information about the project and instructions for viewing are available on the project gallery site that I created.
Click to view full project gallery
Infinite Loop
I created Infinite Loop as exploratory work for my senior fine arts thesis at Penn. After writing down some preliminary thesis ideas, I decided to make something that confronted the issue of information overload on the Internet. To do this, I first defined a set of constraints for my project: I would sit down at my computer for thirty minutes and read as many Google Reader articles as I could within that time period. As I consumed each article, I would take five screenshots of its content in various forms: the article in Google Reader, the original source URL of the article, the RSS feed of that source, the HTML of that RSS, and finally, the HTML copied into a blank document without any formatting. Each subsequent step in this screenshot process decreased the amount of structure and organization contained by the underlying information.
After the thirty minute time period had ended, I compiled all of my screenshots into an Adobe InDesign document and printed that document at full size, with no scaling of the images. The result was a huge sheet of paper, nearly four feet wide and twelve feet long. To display the project in an end-of-semester gallery show, I built a large box out of plywood with the help of my friend Ted Aronson, and we attached the sheet of paper to rollers inside the box so that it would scroll when a small motor was activated.
The form of the box combined with its scrolling contents referred to a computer, but here the information was analog rather than digital. With this project, I wanted to explore the dramatic shift in scale that occurs when digital information is made physical, and the ways that shift affects our perception of the underlying information.
Three-ting Feelings
Three-ting Feelings was the second major project I completed for my senior fine arts thesis. From my project statement:
I have used the blogging platform Twitter as my data source, and have filtered the public timeline of tweets to those that contain exactly three words (hence the project's title, three-ting). I made this choice because I personally believe that three words is the minimum length for an English sentence to be able to express something meaningful.
I've also selected seven words to serve as an additional filter. Six of these words are pairs of opposites: love/hate, good/bad, and happy/sad. The seventh word, feel, is an umbrella term that encompasses the others. I am interested in the idea of raw human emotion as raw data, and I have attempted to structure and design that emotion in a way that might reveal something about people and the way they interact with each other and their technology.
Click to view project website
I presented the project in two forms: a website that displayed a stream of filtered tweets, and a series of prints that I hung on the wall for a gallery show in December 2009. Seven large, square prints represented my favorite tweets, which I found poignant or amusing, and boxes of smaller prints hung below them. Each box contained multiple copies of ten different tweets for each of the seven words, and viewers could take these home as souvenirs if they wanted to.
Click to view images at full size
Fine Arts Course Timetable
Early sketch; click to view
In the spring of 2010, I took a class at Penn called Graphic Design Practicum, the focus of which was to give students real-world experience with design principles and clients. Over the course of the semester, we completed three projects for three different clients, starting with a course timetable to be used by the fine arts department for the fall 2010 semester. Each student would design their own timetable, and the chair of the department would then select the one she liked best to be printed and distributed to fine arts majors.
My initial concept for the timetable was to use the metaphor of a subway system, where subway lines would represent departments within fine arts (drawing, painting, etc) and stops would represent classes. My first iteration copied the design of the New York City subway system pretty much exactly, right down to a Photoshopped metrocard for the cover. During a class critique, my professor pointed out that while executed well, my design was too imitative, and perhaps more importantly, the NYC theme wasn't appropriate for a school in Philadelphia.
Click to download PDFs of the front and back
In response to this feedback, I revised my design so that it still used the transit map metaphor, but did so in a more generic, universal way. I selected a new color scheme, changed the typeface from Helvetica to DIN, and removed any specific references to the NYC subway. After making these changes, I was pleased to find out that the department chair had selected my design as her favorite, and I worked with her to prepare it for printing. The printed copies were folded accordion style and distributed to students in March 2010.
Click to download PDFs of the front and back
Bar for the Course
Initially inspired by the San Francisco Bar Experiment, my friend Emily Barlow and I challenged ourselves to visit as many bars in Philadelphia as we could during our last semester at Penn. We called our project Bar for the Course and set up a blog to track and broadcast our progress. Each time we visited a bar, we rated it according to six criteria: service, decor, vibe, strength (of drinks), tastiness, and creativity. We also placed each bar on the Bar Graph, whose axes ranged from sketchy to classy and bad to awesome.
Blog brainstorming sketch and graphics; click to view at full size
I designed all of the blog's graphics, including the logo, and used Processing to generate the interactive bar graph. Emily and I managed to visit 80 bars in four months, and our blog was featured by a handful of local Philadelphia websites, including Thrillist Philadelphia and Foobooz.
Caplet
Click to view Caplet website
Caplet was the senior design project I designed and built with Nirav Sanghani in order to complete my engineering degree at Penn. As we wrote in our project proposal:
Caplet is a mobile application and accompanying website that allows users to record one unit of personal information a day, or "caplet." Each caplet is a time capsule of data, capturing a particular moment in a user's life, and including the following dimensions: image, text, location, time, mood and weather. While the mobile application functions as a tool for entering content, the website provides a means of browsing and visualizing it. The fact that users can only post one caplet a day causes them to think more carefully about what they choose to record, and therefore makes that information more meaningful.
While various web services already exist to facilitate data collection and analysis, few attempt to achieve both simultaneously, and few take full advantage of a mobile platform. In addition, most of these services allow users to post an unlimited amount of information each day, cluttering the Web with lower-quality content and making it increasingly difficult to filter out relevant information from noise. In response to this problem, Caplet introduces a simpler form of content creation for the Web and a more effective approach to structuring information.
Click to view sketches at full size
Click to view site screenshots at full size
Screenshot of iPhone application
The original inspiration for Caplet came from a five year diary I received for Christmas in 2009. Inside the diary, there is a page for each day of the year, and each page is split up into 5 sections. Every day, you can write something down on the appropriate page, and then come back to that same page the next year and see what you wrote exactly a year ago. I like how this provides an added dimension of context compared to a normal diary: the structure of the five sections gives me an easy way of comparing where I am now to where I was in the past. Because the information is recorded in an analog form, however, there's not really much I can do with it besides writing it down and then taking the diary with me everywhere I go. Nirav and I built Caplet in the hopes of solving this problem, by making it easier for people to record, store, and analyze data from their everyday lives.
You can read more about the process of building Caplet on our project blog, or log in to view public visualizations by using the username/password combination "demo/demo." Throughout the project, I was responsible for the design and Objective C development of the iPhone application, the design and front-end development of the website, and the visualizations. Nirav handled the back-end development of the website, which was powered by Django, and also wrote an API for third-party developers to access Caplet data.
Sunday Night/Monday Morning
Sunday Night/Monday Morning was the culmination of my senior fine arts thesis at Penn. It was a gallery installation of 720 photographs of New York City and Philadelphia, presented in a variety of formats. The center of the installation contained a wall of thumbnail images that I printed and mounted individually. Each image belonged to one of four series of photographs:
- Grand Central Station in New York City on a Sunday night at 8:00pm on January 10, 2010
- The Philadelphia skyline on a Sunday night at sunset (5:51pm) on February 28, 2010
- Grand Central Station in New York City on a Monday morning at 8:00am on January 11, 2010
- The Philadelphia skyline on a Monday morning at sunrise (6:34am) on March 1, 2010
To create each series, I set up my camera and took one photograph every ten seconds for half an hour, for a total of 180 images per set. I then created visualizations of the photographs by selecting and analyzing certain aspects of their data over time. For the New York images, the information I calculated was the number of people in each frame. For the Philadelphia images, it was the average color of each frame.
Surrounding the central wall, I installed alternate formats for viewing the images. On the left side, I hung two small monitors that displayed interactive visualizations of the Sunday Night pictures, created using Processing. On the right side, I hung a large LCD screen that played a looping video of the Monday Morning pictures. Opposite the wall, I displayed prints of the visualizations, out of context from their original data source.
Click to view each piece online
The images in each set existed both as individual frames and as a single aggregate sequence, and could be interpreted by the viewer in both contexts. As frames, they contained a high level of information density, functioning as snapshots of specific moments in time. As a sequence, they revealed change over time, and through this abstraction lost a degree of detail. I was interested in the transformation that occurred between these two states, and I tried to display the images in a way that highlighted the tension between the individual components and the sequence as a whole.
As I completed this project, I felt that I had discovered a system with which to document, process, and visualize information from everyday life that might otherwise have gone unnoticed. This idea really resonated with me, and I'm interested in pursuing it further. I have always been fascinated by the intersection between art and technology, and I feel that this work speaks to that relationship. While I write code to generate the visualizations and display the images on a computer screen, it is important to me that the process of recording them remains entirely manual; as such, I use a stopwatch to time the ten second intervals rather than a timed shutter. The fact that a human being assumes the role of an automated machine during this process, in my opinion, informs the meaning of the end result.
Windows
Windows was my first attempt to apply my process from Sunday Night/Monday Morning to new content. The piece consisted of two sets of images: photographs of the view from the window of my boyfriend's apartment in New York City, and screenshots of a browser window displaying my Facebook news feed. For each set, I captured a new image once every ten seconds for half an hour (either by taking a photograph or a screenshot). I then used Processing to visualize appearances of people, real and digital, over time.
Click to download interactive applications for Mac and Windows
After making Windows, I wrote an artist statement describing my process and intentions. Some of these ideas originated with Sunday Night/Monday Morning, but I wanted to clarify the concepts further and see if I could transform them into a general approach to making art rather than something I tried once for a particular project.
Facebook Friendship Page
I am currently working as a product designer at Facebook, where one of my goals is to make the social networking site function more as as a digital archive for its users" life experiences and memories. Every day, users generate an enormous amount of data to store on Facebook, but that content rarely gets resurfaced later on. I believe that significant value could be created by allowing users to explore and navigate their digital pasts in an easier and more engaging way.
With this goal in mind, I recently served as the designer on the friendship page, a new Facebook feature that reveals what any two Facebook users have in common. For close friends, this page is usually rich with wall posts, photos, and events the two people attended together, and as a result it tells a story of the pair"s relationship. I decided to display this information chronologically in order to create a sense of narrative and change over time. On one level, the friendship page is simply the intersection of any two Facebook profiles; on another, however, it is a timeline of shared memories between real people.
You can view the friendship page in action by logging into Facebook, visiting your best friend's profile, and clicking 'See Friendship' from the box at the top right corner of the page.
