---
title: How lawn care relates to product design
teaser: 'Don''t half-ass your lawn and product design.

  '
tags: design
author: Ryan Coughlin
published_on: 2015-05-27
---

It’s easy to quickly mow your lawn and believe you're finished. In reality
you’re only about 70% done: there are trimmings everywhere and the edges look
like a patchy uneven fence. All you need is a little more work and attention to
detail and you're left with a well-groomed lawn.

The things that make a great lawn are trimmed edges, clean even lines and a
driveway free of clippings. You can find similar aspects while designing an
interface for applications. It's those details and care that take a lawn, and
app, from being ok to something great.

![Mow lawn](https://images.thoughtbot.com/lawn-care/mow-lawn.png)

## Firing up the mower

You start the mower and take the height down across your lawn. You're working in
broad strokes to get something down and you're not worried about the tiny
details. You nail down the UX, layout, and hierarchy. Once defined, you can
start to work down to the smaller details.

![Mow lawn](https://images.thoughtbot.com/lawn-care/trimmer.png)

## Trimming the edges

Take out the trimmer and make your way across mulch beds or where the pavement
meets the grass. Clean up anything that the lawn mower missed. In product terms,
this is your padding, type and use of color. Ask yourself:

- Are padding blocks clear enough to delineate section breaks?
- Are type faces used in the proper setting?
- Is color used in a meaningful context or are you steering people in the wrong
  direction?

![Mow lawn](https://images.thoughtbot.com/lawn-care/mow-clean-lines.png)

## Keep your mow lines clean and even

When you're mowing your lawn keep an even line on each pass. Stare at the front
of the lawn mower and not at the tire because it helps maintain a straight line.
You see them when you are pulling in to the driveway as well as when walking to
the front door. Think of this as your consistency throughout the product:

- Are button styles, font sizes, colors, and other UI patterns used
  consistently?

When done well this creates patterns throughout the product that makes even
unfamiliar parts of the product feel like an old friend.

![Mow lawn](https://images.thoughtbot.com/lawn-care/clean-driveway.png)

## Clear the driveway and lawn of any clippings

This is the final pass before it ships. I love to do this with a fresh set of
eyes in the morning. Do a top-to-bottom pass to check if you missed anything.
Use this time to nudge padding, adjust font sizes, and ensure your mow lines are
even.

## What's the lesson here?

Just like mowing your lawn, product design requires not only tackling the larger
problem you're trying to solve, but also spending time refining the finer
details. When you take that extra time for refinement, it not only feels good,
but you're left with a solid product and a well groomed lawn.

(And yes, this idea started as I was mowing my lawn back home in Maine 3 years
ago.)