farm-fresh

Farm Fresh is a smartphone app that lets users purchase fruit, vegetables and herbs from local farms. I designed this app for my Introduction to Human-Computer Interaction class assignment that asked us to prototype a grocery app.

While designing the app, I considered the types of people who would probably be using this app. I envisioned an on-the-go millennial who seeks the freshness of organic farmers market produce but who doesn’t necessarily have the time or ability to actually get to the market. Keeping Nielsen’s 10 heuristics for user interface design in mind, I aimed for speed and simplicity so users could quickly add the items they wanted to purchase and avoid making errors.

Customer Focus

Julie persona

Above, persona for the app. Personas are a way to build empathy for the end-user. As a storyteller, I enjoy creating and imagining characters who might use my product. In real research, you would base personas on observations of real people; for this class project, I based it on the characteristics of people I personally know who are in their mid-20s and living in a big city.

The UX community often debates the effectiveness of personas. I don’t think they’re necessary in every design situation, but I do feel this technique was useful in creating this particular app. As I played around with design options in Illustrator, I imagined myself as the busy young professional, trying to compile her grocery list on the way to a workout class so she’d have fresh produce to cook when she got home.

Visual Design

grocery app screens

Prototype

This is the first working prototype I’ve developed using prototyping software. You can play with the interactive prototype on Invision. Steps/working elements include:

  1. Click “let’s shop” on the home screen.
  2. Click “username.” A keyboard will appear.
  3. Click anywhere on the keyboard, and a username and password will automatically show up.
  4. Click “login” to start shopping.
  5. Click “view all fruits.”
  6. Click on the picture of grapes.
  7. Click the “+” sign, then click “add to cart.”
  8. Click “check out.”
  9. From the cart, add another apple. Click the “+” sign next to the apples and click “update” to update the cart. The price at the top of the page increases after you update the cart to include the extra piece of fruit.
  10. Click “check out.”
  11. Click “confirm.”

Software

  • Adobe Illustrator
  • Adobe Photoshop
  • Invision

Fonts

  • True North Regular
  • True North Monoline Script

I purchased these fonts back in July as part of an awesome, huge bundle pack from Creative Market. The bundle also included some vector illustrations — one of which I also used for my app’s logo. I love Creative Market’s specials. Every week, they offer six products for free, so now I look forward to Mondays!

farm-fresh

The featured photo uses a mockup courtesy of Mockuuups.

Leave a note

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s