Design
growing our ideas and solution
In the design phase, we built off of our research to narrow down the purpose of our app and determine the practicals of what a solution could look like. We continued to narrow the scope of our project throughout this phase, and ended with a final prototype for Harvest.
Design Requirements
Moving into the design phase, we synthesized what we considered essential components of interaction with our design would look like. These requirements addressed our overarching design question:
How might we mitigate shopper confusion caused by the dynamic nature of information about vendors, products, and the market itself?
​
This fundamental issue appeared most frequently as three major pain points for our users that we sought to address:
-
Lack of product information and availability
-
Lack of vendor information and availability
-
An inability to compare and view multiple markets easily
​
Many of our design requirements ended up as peripheral features on our final product, but the ones we chose to focus on moving forwards were: ​​
-
Inform users about seasonal changes at the market
-
Allow users to explore different vendors confirmed for the market each week
-
Allow users to access information about multiple markets
​
Specifying these design requirements was especially important for forming a vision of what our final product would do for our users, and for keeping us on track in the later design stages.
​
Information Architecture
After nailing down the more abstract interactions we wanted customers to have with our design, we mapped out the structure of our application through an Information Architecture Map. With this exercise, we felt our concepts about Harvest became more tangible, although we continued to modify our structure and iterate as we continued through the design phases. In particular, planning out the Information Architecture of our application allowed us to see how well the features fit together, and to question the fundamentals of our design before moving forward.
Paper Prototype
Once we finalized our key path scenarios in our Information Architecture, we began drafting our paper prototype. This was an affordable and easy way for us to test out the usability of our prototype without expending our resources.
​
We asked our users to test 3 main tasks we identified as key path scenarios from our Information Architecture and Interface Sketches.
​
-
Task 1 | Check to see if the “Bonnie B’s Peppers” booth is at the Ballard Farmers Market this week. Determine which payment types they accept.
-
Task 2 | Add “eggs” item to the grocery list and determine which vendors are selling them this week.
-
Task 3 | Search for the University District Farmers Market, then, bookmark it as a saved market.
Quick Evaluation Findings
For this next step, we tested our paper prototype with five target users at the Starbucks located across the street from the Ballard Farmers Market. This allowed us to quickly gather feedback about our design and eliminate any non-intuitive and unnecessary components. We then drafted a report of our insights, which we referred to when making modifications to our future designs.
​
​
​
-
Task 1 | Check to see if the “Bonnie B’s Peppers” booth is at the Ballard Farmers Market this week. Determine which payment types they accept.
-
After evaluation: Users easily determined Bonnie B’s Peppers was a confirmed vendor for that week from viewing the Market Dashboard page or the Vendors page. However, users had trouble determining which payment types were accepted due to the lack of clarity of the payment icons. ​
-
​
-
Task 2 | Add “eggs” item to the grocery list and determine which vendors are selling them this week.
-
After evaluation: Users expressed their satisfaction in being able to create a grocery list in both an icon and list view. However, users had trouble identifying which vendor carried the items in their grocery list due to the lack of visual cues on the page. ​
-
​
-
Task 3 | Search for the University District Farmers Market, then, bookmark it as a saved market.
-
After evaluation: Our users quickly determined that they could tap on the market icon to add a new market or toggle between different markets, despite our concern that the market icon would not be intuitive. The next step required users to add a new market to their Dashboard. All users successfully completed this step, however, the low fidelity of the prototype prevented them from realizing our intended pathway.​
-
​
task-related insights
​
​
-
It was difficult for users to see which vendors carried a specific product
-
There was no overwhelming preference for the icon or list-based grocery list interface
-
Our home screen was too information heavy
-
The placement and presentation of icons within our interfaces needed more clarity
-
Contrary to our expectations, users tended to save a new market before previewing it​​
general insights
Wireframes
After receiving feedback from our users on the paper prototype, we created wireframes. While designing the wireframes, we decided which elements to keep consistent between the pages, such as the menu bar. We also thought about spacing and font sizes. After receiving feedback on our wireframes, we realized that some of our alignment was not perfect and that our text was too small, so we fixed these for our final prototypes. The annotated wireframes were helpful in visualizing what the interface looks like and what needs to be done to make it clearer for the final prototype.