top of page

ProducePic Mobile Application

Making the unfamiliar, familiar.
fruit2_edited.png
fruit3_edited.png
phoneslsdfhs.png
iPhone 8 Plus Copy 95.png
The Application

ProducePic is a mobile application designed to identify unknown fruits and vegetables from around the world.  The app gives users information on produce preparation, nutrition, and purchase location. 

Solo Project: Concept & UX/UI Design

Goal: Provide the best information needed for users to feel comfortable cooking or purchasing something new.

PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 75.png
PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 96.png
The Challenge

What key information would users need to make a new purchase? It became clear in the early stages of research that people were naturally curious, but afraid of the unknown. 

DISCOVER

Secondary Research

This concept came to me while I was living in Asia and noticed many foreigners who were apprehensive at local markets. I observed tourists struggling to purchase items because of language barriers and lack of accessible information. 

I researched food and travel trends to make sure there would be enough demand for this project. 

The Process

Group_edited.png
Screen%20Shot%202020-07-08%20at%2011.54_

Top 3 takeaways

1) Plant-based diets are on the rise globally and across America.

2) A recent Nielsen global survey found that 23% of consumers want more plant-based proteins on the shelves.

3) More people are traveling based on their food experiences.

Heuristic Analysis
I studied three different competitors and made my evaluation focused on the principles from Jakob Nielsen's 10 general principles for interaction design: 
Screen Shot 2020-07-06 at 12.10.26 PM.pn
Screenshot_20200706-120635.png
Screen Shot 2020-07-06 at 12.10.02 PM.pn

PlantSnap

Nature Mobile's Exoctic Fruit

PlantNet

PlantNet

Screen Shot 2020-07-06 at 12.10.02 PM.pn

Aesthetics and Minimalist Design

Rating: 2/5

 

This application relies heavily on alphabetical order creating an overwhelming screen for users to scroll through. More negative space would help the overload of information. Also the white text blends into the images on the first screen making the words difficult to read.

Screen Shot 2020-12-23 at 9.27.59 AM.png
Screen Shot 2020-12-23 at 9.27.50 AM.png
Screen Shot 2020-12-23 at 9.35.35 AM.png
Screen Shot 2020-12-23 at 9.35.24 AM.png

Nature Mobile

Screenshot_20200706-120635.png

Aesthetics and Minimalist Design

Rating:1/5

There is a ton of useful information, however it is so dense and visually unvaried that reading it feels laborious. 

 

My competitors supplied too much information on the screen at one time. It was important to me that ProducePic stay streamline, not overwhelm it's users and be a source of inspiration and delight. 

Screener Survey

Screen Shot 2021-04-10 at 9.49.02 AM.png

Screener Objective

Identify potential users and select information that users would find useful in and after produce identification. 

  Recruiting Methods 

  • Recruiting at local produce markets 

  • Social Media outreach to friends and family that currently live or have lived abroad

Interviews

After reviewing the 29 completed survey responses, I contacted 5 participants to schedule in-person and remote interviews.

"...I'm curious, but I won't buy it because I don't know how to prepare it."
"I love local markets, but I struggle with the language barrier."
"I can't tell if some fruit is ripe or not and that on it's own will stop me from purchasing."

DEFINE

Organizing the Discoveries

Screen Shot 2020-07-06 at 12.37.04 PM.pn

People wanted to know: 

  • What does it taste like?

  • Can I eat it raw?

  • What season does it grow?

  • How can I tell if it's ripe?

  • How do I prepare it?

  • Nutritional value?

User Personas

I created my personas based on my qualitative research and interviews, so to better understand the goals and motivations of my target audience. These personas helped me to get out of my mind and into that of potential users. 

Screen Shot 2020-07-06 at 12.45.39 PM.pn

Hilary Healthy

Screen Shot 2020-07-06 at 12.45.51 PM.pn

Ava the Avid Traveler

Screen Shot 2020-07-06 at 12.48.37 PM.pn

Jeff the Chef

How might we...

Make international produce shopping more accessible to non-native speakers?

  1. By providing an in-app translation

  2. An interactive map that allows users to select a country and find what produce grows in the region and is in season.

  3. Displaying price comparisons for different countries. What is the average price for something in a region? 

  4. Highlight traditional dishes that feature each piece of produce

  5. Picture recognition for unknown produce, which will link to the most pertinent information

User Stories

I created a spreadsheet to identify what the user wanted to do and what action could be taken to complete it. I highlighted the most crucial actions to be used as red routes (main application flows) in the application. 

Screen Shot 2020-07-07 at 10.42.13 AM.pn

  •  Create an app that allows users to identify unknown produce through camera identification

  •  Allow users to find local produce through an interactive map

 

  • Create a user library so users can save produce and recipes directly in the app

MVP Statement

This application will allow users to identify produce through photo identification. They will be able to find useful information on produce including: what it tastes like, ways to prepare it, ripeness cues, nutritional facts, photos of what the produce looks like inside, and whether it is in season. Users will also be able to search locations on a map for regional produce information.

Screen Shot 2020-07-07 at 11.42.57 AM.pn

Site Map

Sketches

Screen Shot 2020-07-07 at 12.05.31 PM.pn
Screen Shot 2020-07-07 at 12.05.01 PM.pn

I organized the produce information page to include different sections so users could quickly find what they needed, instead of scrolling an entire page of dense text. I made sure to add lots of image examples since users expressed how crucial photo evidence was to them. 

Wireframing

iPhone 8 Plus Copy 43.png
iPhone 8 Plus Copy 21.png
iPhone 8 Plus Copy 22.png
iPhone 8 Plus Copy 26.png
iPhone 8 Plus Copy 9.png
iPhone 8 Plus Copy 56.png
iPhone 8 Plus Copy 57.png
iPhone 8 Plus Copy 20.png
iPhone 8 Plus Copy 23.png
iPhone 8 Plus Copy 30.png
iPhone 8 Plus Copy 58.png

Moodboard

UI Decisions

Group.png

I created the logo to resemble a camera’s aperture disguised within a pumpkin, the two key concepts of the application. 

Screen Shot 2020-07-07 at 4.24.50 PM.png
Screen Shot 2020-07-07 at 4.23.04 PM.png
Screen Shot 2020-07-07 at 4.23.40 PM.png
Screen Shot 2020-07-07 at 4.28.25 PM.png

High Fidelity Screens

I created five different categories to organize produce information. These were the categories that users expressed most interest in when purchasing an item. Each page is filled with detailed imagery so users can compare what they are looking at in real life to examples on the screen.

PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 96.png
PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 73.png
PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 74.png
PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 62.png
PikPng.com_iphone-template-png_1519961.p
iPhone 8 Plus Copy 75.png

Users can choose to take a picture or upload from their gallery to identify a piece of produce. 

The map section allows users to explore produce from all around the world. They can choose from local fruit, vegetables and traditional dishes that feature local produce. The entire app features this UI element so users can switch effortlessly between the three options.

TEST

Usability Testing

Testing Objectives:

- To assess the usability of the app’s primary tasks 

- Understand how quickly can users adapt to the app (learning curve)

- Identify any problems users encounter while completing given tasks

- Allow participants to openly share their level of satisfaction with the app

- Evaluate accessibility  

- Determine how clear or unclear any language/visuals are to the user

- Evaluate ease in navigation throughout the app

- Collect all findings and use data in further iterations 

Example Testing Questions

“You find an unknown vegetable at the grocery store, use the app to identify it”

“You are currently in Hanoi, Vietnam and want to learn more about the local produce” 

“You have an excess of bananas and want to find recipes that feature bananas”

Iterations

One of the small adjustments I made was changing the "save" button to a toggle switch. When I had it as a button one user thought it would take them to the library so they didn't want to press it. With only two options "save" or "unsaved" a toggle provides more visual clarity to the user.

phoneslsdfhs.png
iPhone%208%20Plus%20Copy%2037_edited.jpg
phoneslsdfhs.png
iPhone%208%20Plus%20Copy%2094_edited.jpg
phoneslsdfhs.png
iPhone 8 Plus Copy 87.png

Another adjustment I added was "Mystery Pick", because users vocalized being indecisive and wanting someone to choose for them.

CONCLUSION

ProducePic's Effectiveness

After all the iterations were made I conducted a second round of testing with five participants. The testing sessions ran smoothly with the users being able to complete all the tasks and present positive feedback on feel and information. After completing this app I have gone on to show more people many who feel a real need for this product.   

"I can finally go to markets without fear! I need this for all of my trips." 

Takeaways

 This design helped me uncover the users’ perspective and how user-centric design is critical for any application. The initial problem of giving users confidence through information was solved. If time permits, I would continue to work more on this product and add an additional idea that the user expressed need it but I didn't I didn’t have time to execute.  Adding a “Price” section to the produce info page would allow users to compare the average price of produce between different countries. This tool would allow users to know how much they should be spending at the markets instead of having to guess. 

Custom Preset.png
Next project
bottom of page