Lawn Stories

Undergraduate thesis
Stamps School of Art & Design
University of Michigan, 2017–18

A web project presenting the peculiar and sometimes baffling tales of personal struggle, triumph, battle, and camaraderie between both nature and neighbor.

 

Solo project

Research
UX + Visual design
Animation
Development

Duration

6 months

Outcome

Exhibition at the Stamps Gallery, April 2018
⭐️ Written Thesis Award 2018 →

map-01.png

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 and also 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.

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.

Lawns 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.

Lawn Stories is a web project that untangles the collective and personal histories of the American front lawn.

It includes 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 gathered myself through interviews and observation.

 

Creating Lawn Stories

 

Using maps

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.

Initial sketches

With this in mind, I began sketching possible layouts for the website. I explored variations on map formats, including different angles and zoom levels.  

 
 
 
 

Adding stories

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. 

 
 

Combining into the map

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. 

 
sketch.jpeg

 Iterations and drafts

 

Visual explorations

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.

isometric.png
Screenshot+2017-11-25+09.08.34.png
 

Creating neighborhoods

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.

color_studies.png
 
21century.jpg

21st century

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. 

 
A suburb of Detroit built in the mid-20th century.

A suburb of Detroit built in the mid-20th century.

20th.png

20th century

For the 20th-century, the streets are more grid-like with many intersections. Schools and parks were integrated into the neighborhood as well.

19th century

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.

 

Adding details

With these structures established, I began adding details to the illustrations, like cars, trees, mailboxes, and sidewalks. I also looked at other visual references, such as Edward Scissorhands for color inspiration.

Collage.png

Putting it all together 

With the illustrations of each neighborhood relatively settled, I turned back toward the functionality of the site: how would users uncover the stories hidden in the illustration

 

Adding interactions

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. 

Looking at video games

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. 

Sims 2 menu map

Sims 2 menu map

 
 

Making adjustments

I brought all the illustrations together and used gradients in the backgrounds to help blend the neighborhoods together.

1.png
 
 

Creating cohesion

Other elements, such as water, highways, and clouds helped unify the neighborhoods. Finishing touches included adding animation to the background of the site to add more life and personality.

Writing Lawn Stories

 

Establishing tone

I decided to use the interviews and documentation I gathered over the course of this project as inspiration to write my own fictional lawn stories. This way, I had control over the length and content of each story and could maintain consistency across the site. I wrote each story in a journalistic tone, as I did not want my own voice to come through, but rather, the voice of each personality. The stories include an array of characters from peppy real estate agents, to snobby landscape architects, to playful children.

Here’s an excerpt from one of the stories:

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

Shadow.png
Artboard+Copy.png

Special thanks

I'd like to thank my advisors on this project, Franc Nunoo-QuarcooSophia Brueckner, and Brandon Keelean. Also thanks to Ethan Krajewski, Karli Johnson, Lian Wardrop, and Sam Bertin for all your help!