Lawn Stories is an interactive website about the American front lawn. I designed, animated, wrote, and coded it as my undergraduate thesis project at the University of Michigan. This project also won the Stamps School of Art and Design's 2018 Written Thesis Award. Sections of that piece are included below, but you can also find it in full here.
a little backstory
My childhood summers in suburban Michigan were spent sprinting through the sprinkler, squishing my toes in the thick carpet of waterlogged grass, and humming along to the pleasant, far-away drone of my neighbor’s lawn mower.
The front lawn was a significant feature of my habitat. I suspect that I have this in common with other suburban dwellers: the lawn is the backdrop in front of which we choose to live our lives. It is an essential landscape in the collective memory of suburban life. And while the lawn is a common feature in any suburb, it is also a uniquely personal landscape, most significantly as the site of disputes.
Lawns fall in the middle of the venn diagram between personal and collective property—it’s yours, but we all have to look at it.
Jeffersonian ideas still manifest themselves in lawns. We see conflicts of property, ownership, and responsibility play out in the space between our homes and our streets. How one maintains their lawn might as well be a statement on their contribution to the community and on their character. A neglected lawn in turn might reflect a poor citizen.
It is the relationship between one’s lawn and their personal identity that I sought to explore through this project.
In my research, only one thing become perfectly clear: lawns are strange places. But they also have profound contributions to the way we see each other and our environment, whether we are turning up our nose at our neighbor’s “dandelion problem” or spraying gallons of fertilizer in an attempt to out-green them.
To document and sort my findings I have created Lawn Stories, an interactive website that untangles the collective and personal histories of the American front lawn.
Lawn Stories presents a series of personal accounts from lawn-owners, arranged within a virtual neighborhood. These histories are sourced from written documentation of suburban dwellers’ thoughts on lawns throughout the past two centuries, as well as contemporary accounts that I gather myself through interviews and observation. Ultimately, Lawn Stories presents the peculiar and sometimes baffling tales of personal struggles, triumphs, battles, and camaraderies between both nature and neighbor.
creating lawn stories
In the beginning stages of this project, I spent a lot of time zooming around on Google Maps looking at lawns. The imagery of the suburban landscape was visually stunning from this aerial perspective and it inspired the main format of my project: an interactive map.
With this in mind, I began sketching possible layouts for the website. I explored variations on map formats, including different angles and zoom levels.
I originally intended to tell the history of the lawn within this map interface (possibly including a timeline of some sort), but through discussions with my advisors and peers, it quickly became apparent that personal connections with lawns were more compelling. The stories my peers had of strange neighbors and family members were humorous, interesting, and did a better job to imply the range of experiences with the front lawns.
From here, I focused my project on individual accounts of lawn-owners.
To incorporate these accounts within my map, I decided to link the stories within an illustrated neighborhood. I imagined a dot or icon could indicate where a story was hiding within the illustration; the user could then click and access the story. As assemblage of these short blurbs would provide a bigger picture of lawns in America.
iterations and drafts
I began to draft designs for how my map would look and function. Taking from my initial thumbnails, I tried a few styles.
I explored an isometric view, but quickly realized this placed more emphasis on the houses than on the landscape. Instead, I opted for a flat, aerial perspective to balance the emphasis.
To give a more comprehensive picture of lawns, I also decided that I wanted to span my stories across three centuries. To organize this, I created three neighborhoods, one for each century. I looked at urban planning trends for each era to inspire layouts for these neighborhoods. I also opted to create three distinct color palettes for each neighborhood to further emphasize their difference.
For the 21st century, I looked at my own neighborhood, which dead ends at multiple points to give privacy to the residents. The street curves and only has a couple intersections. After exploring many color options, I chose a high-contrast color palette featuring a bright yellow-green.
For the 20th-century, the streets are more grid-like with many intersections. Schools and parks were integrated into the neighborhood as well.
For the 19th-century, I looked at Olmsted's designs for the Riverside suburb, which featured long curved roads that created circular pockets of houses.
With these structures established, I began adding details to the illustrations, like cars, trees, mailboxes, and sidewalks.
pulling it all together
With the illustrations of each neighborhood relatively settled, I turned back toward the functionality of the site. I decided I wanted users to be able to pan across the map using their mouse. When they hovered over a house containing a story, a dot would appear to indicate a clickable area. A modal window would contain each story.
For inspiration on how to create a seamless map of different time periods, I looked toward video game menu and map designs which often blend worlds in close proximity.
When writing the content, I used a journalistic tone to remain relatively objective and let the stories speak for themselves.
Here is an examples of one of the stories from the site:
Ben Goodson, 37, works nearly sixty hours a week and doesn’t mow his lawn that often. Next door, his neighbor’s lawn is kept consistently pristine and trimmed. There wasn’t a problem between the two until Goodson noticed that his neighbor had mowed over the property line onto Goodson’s lawn. He assumed it was a mistake. But then it happened again. And again. His neighbor kept over-mowing by few feet—or as Goodson put it, “trespassing!” He feels that the whole situation “is just so rude—possibly even vandalism!” In the meantime, Goodson went out and bought a “no trespassing” sign to post on the property line. He casually adds, “if he keeps doing it, I might get the police involved. I don’t know, we’ll see.”
the final goods
Finishing touches included adding animation the background of the site to add more life and personality.