Farmopolis

Project

This was a project for a UI design class at UC Berkeley. The theme was to design an app for an urban farm. Tools used include Miro, Marvel and Figma.

I also created a prototype for mobile using React and Redux to give a better idea of how to work through the app's happy paths.

Problem Statement

Many consumers want organic produce that they can't find at their local store. Ideally they would like to connect with their local farmers, but are not sure how to do so.

Many farmers, conversely, would like to let consumers know that they have produce available. Some do business with grocery stores and restaurants, but would like to do business directly with the consumer.

Mission

To design an experience that people will want to use to connect with small farmers to purchase organic produce.

The final deliverable will be a clickable prototype designed to illustrate at least two happy paths.

In the case of this project, those paths will include the following:

A user finds a farm where desired produce is found and adds a quantity of produce to their cart.
After adding an item to their shopping cart, the user will go through the process of checking out as a guest.

Personas

Proto-personas were built out based on some research on urban farmers and their respective consumers.

The next page shows the more fleshed out version of these personas.

Learnings

There are urban farmers who are able to make a living off of farming alone.

Tools Used

Pen and paper
Adobe Photoshop

Journey Map

The journey map follows the consumer, Lindsey as she discovers, and eventually uses the Farmopolis app to make a purchase.

Along her journey, I take note of her feelings and thoughts as she moves through the stages from awareness to advocacy.

Tools Used

Adobe Illustrator

Story Boards

I used Miro to map out the activities, tasks and sub-tasks in two flows. The first flow involves a consumer finding a local farmer and buying produce from them. The second flow involves a farmer signing up to sell their produce.

Sub-tasks for a most viable product were mapped out as well as back-logged tasks reserved for later enhancements.

Tools Used

Miro

User Flow

For this project, I concentrated on one flow for the consumer.

The use case for this flow shows a consumer finding a farmer that sells produce that they are interested in purchasing. The consumer visits a farmer's page from a results list. Once they have found the produce they are looking for, the consumer adds it to their cart.

Lastly, the consumer selects a payment option and checks out with their purchase.

Tools Used

Adobe Illustrator

Paper Prototype

At this point I'm ready to start putting things together in my first, rough iteration of the Farmopolis app.

I took sketches on paper and used Marvel's tool to generate a prototype on paper(POP). Below is an example of the lo-fi screens used for the POP.

Learnings

The filter layout wasn't very intuitive. Also, some of the fruit categories were a bit cryptic and needed some work.

Tools Used

Pencil, pen and paper
Marvel's POP tool

Medium Fidelity

After getting feedback from the POP, I was ready to take the app to the next level.

I used learnings from my paper prototype to come up with medium fidelity wireframes.

Learnings

The filters could be made to appear less complicated. Perhaps a button per filter option.

It made sense that the user may skip directly to the checkout screen without checking their cart, so show a summary of items to be purchased on the checkout flow's first screen.

Tools Used

Figma

High Fidelity

My next set of wireframes were more granular. I applied learnings from my previous iteration of medium fidelity wireframes. I also added Farmopolis branding (color palette, logo, etc...).

Learnings

The global search bar competed with other search inputs. It was therefore replaced with a search icon instead.

Scrolling of tiles wasn't evident, so I introduced an affordance by showing part of a tile below the fold.

Tools Used

Figma

Clickable Prototype

I used my high fidelity wireframes that I created in Figma and created a prototype using React and Redux.

The app could be tested more easily allowing users to navigate happy paths. I was able to use this prototype to see if the app made sense to the user.

The app can be viewed here.