Harvest App

Putting a seasonal spin on accessible farmers market information


Summary

The Harvest app sought to solve users’ challenges with the Farmers Market experience, particularly surrounding ease of access to seasonally-relevant information. Our full portfolio for this project showcases each step of the ten week process, and gives insight into our team’s learning and growth in tackling each phase of the user-centered design process.

This project culminated in the interactive prototype shown on the left, featuring high fidelity mockups of our final product.

Background

Context: course work for HCDE 318 (Introduction to User-Centered Design)

Duration: 10 weeks (fall 2018)

Collaboration: four-person team 

My Role: primary Content Strategist, Co-UX researcher, Co-UX/UI designer

Tools: Figma, Adobe Illustrator, Lucidchart, Marvel

Process

For access to all the documents for each stage as well as insights about our process, visit our project’s portfolio. In this overview, I cover <insert what I cover>


Research

  • Semi-structured Interviews

  • Walk-a-Mile Immersion

  • Personas

  • User Journey Map

  • Design Question

Semi-Structured Interviews

In the beginning stages of this project, we had chosen Farmers Markets as our design community but wanted to learn more about the challenges, goals, and experiences of two particular user groups: vendors and customers. Our team conducted 8 semi-structured interviews: 3 vendor interviews, 4 shopper interviews, and a phone interview with the executive director of the Neighborhood Farmers Market Alliance. Over the course of a week, we visited various farmers markets to recruit and interview vendors and shoppers in their environment. For my research I interviewed vendors, and synthesized insights with the rest of my team when we regrouped.

 
Walk-a-Mile Immersion at the market

Walk-a-Mile Immersion at the market

Farm fresh produce at the Ballard Farmers Market

Farm fresh produce at the Ballard Farmers Market

 

Key Insights from Vendor Interviews

Seattle’s turbulent weather patterns are often vendors’ largest obstacle to successful sales

Vendors rely heavily on word of mouth to attract people to the Farmer’s Market.

Vendors feel that having a more intimate platform to sell their products allows them to form more meaningful connections with customers than if they only sold their products in a store.

Narrowing Our User Group

After this initial research, we decided to focus our project on designing solutions for Farmers Market Shoppers. Many of the vendors were satisfied with their overall market experience and each had their own distinct challenges. However in interviewing shoppers, distinct pain point patterns emerged, highlighting problems we felt were both widespread and solvable.

These decisions led us to create two personas and a user journey map to encapsulate our research findings and allow them to better guide design decisions.

Personas

From our interviews, the two most prominent categories of farmers market shoppers tended to be tourist shoppers and regular customers, each represented by a personas shown below. After deliberation, our team decided to design specifically for the regular shopper, whose values, goals, desires and pains are encapsulated in the Farmers Market Frequenter persona.

Click to enlarge

Click to enlarge

User Journey Map

After choosing to focus on the Farmers Market Frequenter, we created a journey map detailing significant moments in their journey. While I did contribute to the journey map through input on visual design and collaborating to determine the graphic scale, this deliverable was where I began to find my role as the primary content strategist on our team.

Click to enlarge

Design Question

After synthesizing insights from each of these research stages, we identified our final design question. Shown below, this question breaks “shopper confusion” down into three key challenges we saw shoppers repeatedly encounter. This question and its components guided our design strategy moving forward, and directed our problem solving efforts towards specific, solvable pain points.

 
design-question-v2.png
 

Design Process

  • Storyboards

  • Information Architecture

  • Interface Design

  • Paper Prototyping

  • Wireframes

  • Final Mockups

Storyboards

Moving into the design phase of this project, we used storyboards to generate ideas on how to solve the challenges defined by our design question. Each member of the team was given a specific problem to solve for, and we generated two storyboards each — one sketched, one digital — to illustrate ways we might solve these problems.

 
 

After comparing storyboards, we decided that a smartphone app was best suited to solve the problems we’d identified. An app’s ability to be accessed on the go, as well as user research suggesting our audience would be willing to use an app were the driving factors behind this decision.

Information Architecture

As a team, we decided which features would be most important to include and created an information architecture diagram. This exercise allowed us to more explicitly see the screens and interactions we would be creating, as well as better understand our application’s overall structure.

 
FreshUX IA-page-001.jpg
 

Interface Design

Each team member developed their own version of what the screens could look like, then through group discussion we determined the features from each set of sketches we wanted to carry over to our final design. Following are my original interface design sketches.

 
 

In discussion on this round of interface design, we agreed to include several key elements:

  • A navigation bar at the bottom with tabs for Home, Grocery List, Vendors, and Profile

  • A dropdown menu at the top of the app that allowed the user to switch markets

  • The ability to search for / filter by both products and vendors in the search bar

Paper Prototyping

To test our early-stage interface designs, we created a paper prototype and took it to the Ballard Farmers Market to solicit direct user feedback. This step allowed us to test hypotheses on what interface designs users understand and prefer. We tested volunteers’ ability to complete three key tasks:

 
  1. Checking to see if a particular vendor would be at the market that week and if they would, finding that vendor’s accepted payment types

  2. Adding “eggs” to their grocery list and determining which vendors would be carrying eggs that week.

  3. Switching from the Ballard Farmers Market view to the University District Market view and saving the new market to their “Saved Markets” list.

video Block
Double-click here to add a video by URL or embed code. Learn more
 

Key Insights

 
Key+Insights-01.jpg
 

In response to these insights, we modified our design before creating wireframes. The next round of interfaces included simplification of several features in response to this research.

User difficulty with identifying which vendors carried a different product led us to eliminate the ‘profile’ tab int he navigation bar, replacing it with a ‘products’ tab. This decision prioritized usability of the app over retaining consumers’ information. The usefulness of a profile for this type of app was limited as data can be stored locally on the device, allowing us to clear up a major pain point for our users.

Descriptions of the home screen as cluttered and at times overwhelming led us to prioritize features core to the product and eliminate others. For example, originally we had included a 'featured events’ section on our home screen, but this feedback led us to remove it for the sake of emphasizing interface elements more central to the app’s fundamental purpose.

In testing both the list and icon based interfaces for the grocery list feature, users didn’t show an overwhelming preference for either one. Our tests were evenly split between users who preferred the icon and list views, but those who preferred the icon view still recognized the value of the list view. With this information, we decided to include a toggle feature that could display the list in either format. This toggle feature gave slight priority to the list view by landing a first-time user on that interface design and allowing them to naturally discover the icon based view.

Wireframes

Insights from our users tests were incorporated into wireframes of each app screen. With these wireframes, we were able to clearly map out Key Path scenarios our users could take through the app, and scrutinize possible pain points in the usability of our interfaces when working through these crucial process flows. An example key path scenario is shown below.

 
key-path.jpg
 

Final Mockups

As our team discussed the emotions we wanted to evoke through our visual design, we decided on a friendly, playful aesthetic in line with the atmosphere of the farmers’ market. In particular, we wanted to evoke these feelings while still maintaining a sense of cleanliness and usability, features we felt were sometimes lost in overly playful interface designs. To achieve these goals, we honed in on certain features we planned to carry throughout our visual language.

 
Visual Language.png
 

Our most prominent decision in creating our final screen mockups stemmed from a desire to visually enforce the understanding of Farmers Markets as seasonally reliant entities. After ideating through several representations of this characteristic, we settled on an interface background that changes according to season. This quirk was intended to draw our users’ attention to the changing of the seasons and bring notice to the parallel changes this will cycle produces in the Farmers Market experience.

 
SeasonalScreens.png

All other details of this project, including access to documents like our user journey maps, information architecture, and wireframes, are available at our website

harvest-header3.jpg