Portfolio

Agrisuarus UI

Agrisaurus is an app to help users cultivate food on a small scale. It allows users to design and manage high-yielding food gardens using auto-generated planting maps, calendars, tips, and reminders. The app had a successful kickstarter that funded it’s beta launch.

I designed the branding and user interface. I also built the front-end in Backbone.js, worked on our client-side plant placement algorithm, and occasionally delved into the Django back-end.

Agrisaurus Designer

As the first gardening web app of it’s kind, Agrisaurus presented unique design challenges. It had to combine the earthy feel of gardening with the clean simplicity of modern web design. It also had to resonate with a wide range of user profiles, including elementary school kids, first time homeowners, DIY data geeks, and hobbyist retirees — both rich and poor.

Finding the Agrisaurus Look

One of the design goals on our minds from the start was to address the “image problem” of gardening — namely that growing food at home is a quaint, unkempt hobby from a bygone era. Our goal was to make gardening clean, modern, and inviting for users from all backgrounds by organizing the information and tasks in a better manner.

When I joined the project, the team had already selected the name Agrisaurus, so I figured I could combine our dinosaur motif with a vintage mood and the clarity of modern design principles to reconcile the anachronism of gardening “in the cloud”.

zeke-dinosaur-kale

From my work on the Farmscape website, I knew a little bit about the history of gardening in the U.S. so I turned to World War II “Victory Garden” propaganda posters for inspiration.

victory-gardens-03

These posters encouraged U.S. citizens to plant gardens in their yards and local parks to relieve pressure on the food supply. I felt they captured the friendly, pastoral mood that Agrisaurus needed. With that in mind, I experimented my way to the playful, but faded, tones of blue and green that you see in the Agrisaurus logo, below.

Since white is often associated with cleanliness, energy, and happiness, I knew I wanted to use a bright tint for the app’s background. However, to reinforce the vintage feel and incorporate more of the brown tones representative of soil, I chose an off-white tint. I then added subtle canvas and burlap textures to help ground the design.

vintage-colors-and-textures-crop

Streamlining the User Flow

The original Agrisaurus prototype was needlessly complex. It had multiple pages and began new sessions on a dashboard page that listed the user’s garden beds, presented alerts, and displayed nonessential information like the week’s weather. When I joined the project, I knew immediately that we need to cut through this cruft and bring the core functionality of the app to the surface.

I worked with my project manager to identify a more intentional user-flow through the app. We carefully considered the process that a gardener goes through as they plan a garden and reduced it to three simple steps — Design, Plant, and Manage — which I prominently featured as the main button-tabs of my new designs.

After discarding the dashboard, we realized that the app really centered around the “Design” tool, since it formed the spatial representation of the user’s real life garden. To embrace the idea that the “Plant” and “Manage” tools were really just temporary diversions from the garden, I converted these tools to lightboxes and devised an animated transition wherein the lightboxes slid up from the bottom of the screen as though the user was raising a notebook into view.

 lightbox-animation

These adjustments really improved the cohesion and simplicity of the app.

Dealing with Time and Space

One of the trade-offs we quickly identified was the tension between displaying temporal and spatial information. Initially, we found it necessary to separate the spatial garden design from the temporal tools for planting and managing, but there were drawbacks to separating these displays. For instance, in the “Plant” feature where we showed a timeline, it was difficult to indicate to the user which plants were which since we could not show the user where the plants were located in the garden.

timeline-differentiating-plants

One long-term design goal for Agrisaurus, if the project had continued, was to integrate time visualization into a unified spatial view. I did manage to take one step in this direction by coloring the outline of crops in the garden according to their lifecycle state (i.e. default, planted, harvestable, compostable) but we had many more ideas in store.

specie-states

Freeing Users to Experiment

Another tension we discovered was that between providing recommendations and allowing users to make their own decisions. We knew it was important for users to be able to diverge from our recommendations if they knew better or simply wanted to try something different.

In our plant date scheduler, we enabled this user agency by providing fixed recommendations but allowing the user to experiment with different planting dates. Instead of just asking the user to set a planting date with a calendar widget, we allowed them to drag a “Lifecycle bar” along a seasonal timeline.

timeline-lifecycle-bar

As the user moved the bar — and, thus, the planting date — the length of the harvest period would grow or shrink according to projections for that crop in the user’s climate (as derived by our machine-learning algorithms). If the user moved the planting date outside of our recommended range, the harvest period would disappear and the life-cycle bar would enter an invalid state. This allowed users to discover the relationship between the planting date and the length of the harvest period, hands-on.

In the garden designer, on the other hand, we couldn’t provide real-time feedback because our plant-placement algorithm was too slow to run in real-time. Instead, we organized gardens on-demand and, by default, whenever a user added or removed a plant from the garden. To prevent subsequent runs of the algorithm from overriding a user’s alterations, we allowed users to “lock” plants so that the plant-placement algorithm could organize the unlocked plants around the user’s locked plants. Since plants cannot be moved once they are planted, we locked plants automatically after their scheduled planting date. If we ever managed to optimize our algorithm to run in real-time, we hoped we could lock plants automatically when the user began moving them so that the user could experiment in real-time with the effect of different placements.

Reception

Agrisaurus had a successful kickstarter which funded our beta launch. Hundreds of early adopters contributed funding and useful feedback which we used to guide our product road map.

Unfortunately, our angel investor withdrew funding shortly after launch, despite the demonstrated potential.

Screenshots

agrisaurus-screens-_0021_zeke-info-welcome-back

Agrisaurus Timeline

The planting timeline that teaches users when to plant crops to get the longest harvest in their zip code.

Agrisaurus Alerts

A todo-list for your garden which can also be emailed to users.

Agrisaurus Store

A store we added in the weeks before our beta launch. Here users can unlock access to crops in packs or individually.

  • Date: 04/01/2013
  • Categories: Design