The short version
Table of Contents
Click on any of the following to jump to that section
The project involves designing a proof of concept that would enable users to be able to locate grocery & food stands that sell avocados at a desired ripeness. Enabling users to be able to plan a desired use for the avocados without having to wait.
The Problem Statement
With the rise and popularity of avocados, it has become a staple in the diet of many Americans. Often purchased with groceries, people tend to have to wait for their personal desired ripeness. By enabling people to locate grocery stores that are selling avocados at their desired ripeness, we can eliminate wait time, such as someone needing one for guacamole.
The Research
The Research
Largest barriers are ripeness & price
Our first step was to delve into the fruit and avocado industry and who might be the biggest user of an application such as this. Coming from California, we are privileged with being able to access avocados at almost a year round basis, but in more rural areas of the country that may not be the case. We also wanted to get a better sense of peoples thoughts on the frequency, barriers, and reasons behind purchasing of avocados. We achieved this by sending out a survey and contacted a few of the survey takers and our results are below.
Survey:
Bulk Shopping
Grocery shoppers rarely shop for a single item and normally purchase avocados in tandem with all their normal groceries.
Frequency
Avocado purchases were normally bought weekly or bi-monthly.
Barriers
The largest barrier for purchasing avocados are ripeness, followed by price.
Interviews:
Goldilocks Range
Most interviewers enjoy purchasing avocados, but only purchase them when they fall within a certain personal criteria based on ripeness & price.
Day of
Scarce purchasers tend to purchase avocados on the day that they'll use them.
Price hunting
Frequent purchasers tend to shop around for the best price as rising cost climbs for the fruit.
User Flows
Detangling the web of grocery shopping
We aimed to get in the mind of how a user would use an app such as this to assist in the design process. We took what we learned from our surveys, interviews and research in creating what you see below. It informed us that we need to design our wireframes to be as linear as possible.
Shopping without Avocado Now!:
Shopping with Avocado Now!:
Initial Sketches
Designing with accessibility in mind
As we began to design our initial wireframe sketches, we had to keep in mind that one of the more prominent forms of colorblindness are those who are colorblind to red & green colors. With that knowledge we wanted to ensure that our layout didn't rely solely on color. In addition, how will we also represent an avocado icon in varying stages of ripeness? This was really important for us as we wanted users to be able to quickly identify what preferences they'd like without cluttering the whole screen & map.
Overlay Ideas:
-
The first thought was to attribute a numerical value to the days to ripeness.
-
Reflecting the survey results, price was added to the filter.
-
A sliding filter would allow for more real-estate for users to explore.
Icon Ideas:
-
The numerical values would be displayed prominently in the icons center along. This is to ensure accessibility.
-
Price is displayed on top as quick information.
-
The silhouette is also made to kind of look like an avocado.
V1.0 - Development
Designing with accessibility in mind - but missed the mark
The development of the icons to represent ripeness and avocados was a very daunting task. The design needed to be small enough to not take up a lot of real estate on the map screen, but also easily convey ripeness and an avocado. For price, the idea of a sliding price filter was removed at the clients request and replaced with a dollar sign that correlated to buttons. Due to the time frame, the sketches were turned in to wireframes in Figma and quickly tested with a small pool of users so that we can see if we were going in to the right direction. We received some great feedback from both potential users as well as the client.
Key take aways:
1. Smaller range
The general consensus was that people like seeing the days of ripeness, but found that they preferred a smaller range to choose from.
2. Confusing
The way price was represented was very confusing as people didn't know what the range was per dollar sign
3. Add more fun
The client liked the direction, but wanted the icons to look more like avocados and overall more fun.
Redesigning The Icons
When more is too much
With the clients feedback to add a layer of fun to it as well as to make it look more like avocados it was back to the drawing board for the icons. A lot of time was spent creating and reiterating until we felt that the icons represented both an avocado as well as a different ripeness without solely relying on color for accessibility. What you see below is the evolution of these icons as well as the reasoning.
Here from the homepage?
Click here to head back
Version 1.1
Overly complicated
While this was on the right track, the icons started becoming too complicated. People were still unsure which icon correlated to which stage of ripeness. I needed to take what I had before and and strip as much of it away as I can while still retaining the essence of what an avocado is and their ripe counterparts.
Version 1.2
Ripeness Representation
Distinguishing it's ripeness without solely relaying on color was a bit trickier. What I decided to was have it be a dotted line that progresses to solid lines as a way to show it ripening over time.
Map Icons
Here I wanted to follow conventions that are normally found in restaurant location applications, while also giving users information that they can retrieve at quick glance.
​
Based off of our research price points and location were the biggest factors when searching for a grocery store.
Filter state buttons
Ripeness filter buttons. Designed to be large enough for the tip of fingers. Strokes are there to make it apparent that they're buttons.
Note: None of the icons displayed here are finished products and are only to here to convey our progression of work. Production design was done at the end to ensure everything is pixel perfect.
Testing Out Multiple Prototypes
Refining our design through testing
My partner and I developed out 3 different designs using roughly the same layout as version 1.0. The first two are of my design including icons, with the last being my partners.
​
I exported my design in black and white to help test its accessibility as well as to keep comments and feedback on the layout as opposed to color.
Prototype 1
This version has a slightly minimized filter button that also acts as a legend for the map. This gives the user a reference point for all the icons and helps with accessibility. In addition, this also contains a map-to-list icons.
Usability Testing Results
Prototype 2 came out on top for its look and layout
We were able to find 8 users to test the prototypes out on and the following were our findings. Through this we were able to figure out what direction we should be heading. There was unanimous preference for the designs of prototype 1 & 2.
Key Takeaways (Negatives):
1. Map/List view intuitiveness
The map or list icon on all three prototypes isn't intuitive. Thoughts who are used to using an android were the only ones who saw it as a map/list view.
2. Hide & seek with the filter
The sliding up feature from full minimization was very confusing. Most people had a difficult time seeing that you were supposed to slide it up to view the filter.
3. Pricing is too complicated
The pricing scale & filter was confusing too many users. They had difficulty understanding that the graph represented current market value and much preferred a simple price filter slide.
The Key Takeaways (Positives):
1. Filter Button vs slide
Majority preference for the filter button. The test found that this was the least confusing option (Prototype 2).
2. Information card toward the bottom.
Testers preferred having the information card at the bottom. It gave people the ability to still look around (Prototype 1).
3. Design 1 & 2 icons were preferred.
The icons I developed test very well, though people were confused why a softer avocado was not the dotted outline as opposed to the other way around (which I think was a great point).
System Flow & Reiteration
Consolidating everything we researched and learned for the next iteration.
We took everything we had learned through from our research, user flows and usability testing along with our clients request, but felt as though we needed to take a step back and iron out the system flow to really cover what users will go through. In addition, it would also give us a clear sense on what else we needed to design and how many of those screens while still keeping it relatively small to keep it as a minimum viable product.
Key Takeaways
It was clear after building out the system flow that we were missing some crucial process out. Unfortunately with the deadline closing in on our statement of work we would be able to design these out, but wont be able to test it as throughly as we would have wanted to.
1. On Boarding Process
An onboarding process maybe needed to guide users and instruct them on what the app can do as well as how it works.
2. Sign Up
We originally though there may not be a need for accounts or sign ups, but over time we came to the conclusion that as the MVP is the foundation for something to later scale we would be able to implement favorite stores, or possibly a save recipe features to keep people coming back. Its easier to ask for account creation when the first comes out then asking them retroactively. We would add a skip button should the prefer to forgo it in the beginning (not shown on the system map) to allow users to still use the product.
Version 2.0 Final Final
As any designer knows, we always wish we had more time
With the deadline finally approaching we came up with the following after consolidating all of our research, flows, usability testing and came up with both a material design system as well as the screens needed to validate the app and help him search for investors. Additional screens are below the addressed solutions.
Map View
Pin & Card Selection Up
List View
Main map & list view points & solutions:
1. Accessibility
Establish a way to make the ripeness scale and map icons accessible without a reliance on color just color.
4. Ripeness filter
Give users the ability to filter for ripeness, and condensing it to three categories while also giving them a rough idea on how the scale works.
2. Range of price filter
Enable users to filter for exact price with a sliding filter range from min to max.
5. Map pin information
Develop and design out a map pin that that satisfied both the user as well as the client. Including copywriting the information that is displayed.
3. Consolidation for Ripeness
Enable users to filter for exact price with a sliding filter range from min to max.
6. Addressing inaccuracies
Create an avenue for users to report inaccurate information for specific stores.
Material Design Systems
This was created to make it easier should the project take off or adjustments need to be made
Version 2.0 Final Final
As any designer knows, we always wish we had more time
With the deadline finally approaching we came up with the following after consolidating all of our research, flows, usability testing and came up with both a material design system as well as the screens needed to validate the app and help him search for investors. Additional screens are below the addressed solutions.
Map View
Pin & Card Selection Up
List View
Main map & list view points & solutions:
1. Accessibility
Establish a way to make the ripeness scale and map icons accessible without a reliance on color just color.
4. Ripeness filter
Give users the ability to filter for ripeness, and condensing it to three categories while also giving them a rough idea on how the scale works.
2. Range of price filter
Enable users to filter for exact price with a sliding filter range from min to max.
5. Map pin information
Develop and design out a map pin that that satisfied both the user as well as the client. Including copywriting the information that is displayed.
3. Consolidation for Ripeness
Enable users to filter for exact price with a sliding filter range from min to max.
6. Addressing inaccuracies
Create an avenue for users to report inaccurate information for specific stores.
Additional screens:
