Jive Market

JIVE Market is a mobile platform for locating farmers markets that provides people with specific market information, connect with individual farms, and select available items ahead of time.

Challenge

The original challenge with Jive was to create an application that would solve the problem of not only tracking down farmers markets, but to enable users to view in real time what is available at any participating market and "pre-order" items, thus enabling remote discoverability of the market and dissolving the risk aversion that would usually push them toward visiting a familiar chain grocery store. Jive is also meant to foster a better relationship between farmer and consumer via hosting a social platform that would allow communication between them - sharing stories, recipes, and feedback - beyond the usual short-form discourse you'll find happening during transactional periods at the markets themselves.

The process for this was fairly straightforward: Research what is currently available via comparative analysis, understand the demographic trends, curate a handful of surveys to gain more specific understandings of what prospective users might be looking for in a product such as Jive, develop personas based on survey and interview results, use the personas to create journey maps that would then inform information architecture for the application, use the IA to develop a prototype for usability testing, iterate for least amount of cognitive friction, and then finalize the 'look & feel' of a finished product.

*breathes*

There's a tremendously exciting "but," that we'll get to a little bit later. I'm story-telling here, and you don't get to see the monster yet.

Comparative Analysis

Mobile Takeaways

  • Limited functionality
  • Outdated design elements
  • Market information unsubstantial
  • Shopping functions kinda useless
  • Nothing you can't already do with Yelp & Google Maps

Web

The map utility offered by MassGrown has much of the functionality we're looking for, including filters for market type, list & map view, and information about individual locations accessible via pop-up element. Our challenge for this particular portion of Jive will be transforming this into a format that is conducive to use by the average human's fat fingers.

Who wants JIVE and why would they want it?

Survey Monkey Survey. Eek Eek.

The most astonishing finding resulting from surveys and interviews wasn't at all that the demographic of primary interest is educated, health-conscious women between the ages of about 24 to 45, but in fact was the overall consensus that this is a thing they want.To quote one interviewee: "Wait, are you making this? Can I start using it, like, NOW?"

Cool. Thanks, Lucy. No pressure.

Meet Lucy.
She's the amalgamation of  survey respondents  we'll be designing for and she likes orchids.  

As for her journey ideality...

The ideal customer journey never really falls below the level of Confident; the mental model of visiting a market contains elements that are never not going to get in the way of Delight - such as parking in unfamiliar territory - but we can take measures to mitigate those aspects of the journey that cause general cognitive strife. For example, traveling to the market may be a pain, but we can inform the user when they're close, and provide socially generated tips for parking in the area - perhaps given by the Market Organizer. Or Jason Mamoa. We'll see.

Application Architecture

This is where things start to get hairy.

The onboarding process, indicated in orange or coral or whatever that is, is fairly standard, allowing new users to sign up for the service with or without entering billing information prior to checking out the experience. From there, we've settled on five important aspects of the application for navigation: a user's profile, their connections within the Jive environment, the ever-so-important map, notifications (we'll be getting rid of this one later) and shopping cart/basket, which we'll call "Cart" but will look like a basket for recognition and associative memory.

The hairy part - where this strays from the standard path - comes in where we go from the simple act of locating a farmers market to then seeing the market page/profile, followed by looking at individual vendors at the market, and finally accessing said individual vendors' page wherein users can find out more about the farm/vendor (assuaging the "know where my food comes from" value) as well as to select items from the vendor's store to pick up on arrival. We'll need, first and foremost, to ensure that it's abundantly clear to the user that the vendors and the market itself are not the same.

Toward the end of the ordering process, users will once again have the option of inputting payment information or they may choose to pay at pickup. Risk averted.

Not At All A Paper Prototype.

However, tapping it may produce a similar effect. May.

Task Analysis: The purpose of this particular prototype was to perform a cognitive walk-through beginning at, well, the beginning of the experience, straight through locating a market, then farm, then making a purchase from said farm to be picked up. User testing revealed that first-time users are still having difficulty distinguishing between the vendors at the market and the market itself. Featuring a "Vendor List" button prominently front-and-center on the market page helps, as does creating layout contrast between the two. Market pages also display more generalized information regarding accommodations of the market, whereas vendor pages list more specific categories of their offerings; recall, then recognition, in that order.

Anyway, try it out.

While I do recognize that there is some value in paper prototyping - namely the act of creating a virtual interface tangibly and the benefits of shared cognition within a group - using XD is just a helluva lot faster, and is handy for developing the building blocks for a design system in tandem. Hashtag maximumEfficiency.

Further analysis available on desktop view.

After our introductory slides users will immediately be able to accomplish their primary goal of finding nearby markets. While the final introductory slide will prime them to accept location services, they will have the option to disallow and input a location anonymously. Notice that, should they opt out of auto-location, the input field for location is well within their thumb's range of motion. This is assomplished by propping it up with an automatically populated faux-farm prior to any locational information being provided.

Interactions

Once location information is collected, either manually or automatically, the closest market is highlighted both within a slide-up menu and via a text bubble above the location on the map. Tapping "More Info" within the bubble or on the list item will bring the user to the market's page for more granular information.

Initially the way back to the search input field was to simply tap on the portion of the search bar that was viewable, however it proved to be too narrow for fat fingers. A down arrow at the top of the slider was introduced to expand the field of interaction.

The market page slides up over 80% of the screen. The purpose of this is to provide the prospective market-goes with the important information they need, with an easy method of swiping it away should the particular market not possess the assets they're looking for. The information consists of whether or not the market is currently open, a summary, calendar, icons depicting services/amenities available, directions, and, most importantly for Jive, a link to the list of participating vendors.
Note: Placement of "Directions," "Vendor List," and "View Calendar" CTAs still in testing.

70% of survey respondents said they would be more likely to visit a farmers market instead of a grocery store if they had a better idea of what they would find there ahead of time.

The farm page is where prospective customers can learn what to expect from specific vendors within the market, eliminating the risk of not finding anything they'd like to purchase that normally drives them to chain stores.

The design of the page is similar to that of other social media profile pages, drawing the user in to connect on a more personal level.

The farm's store itself provides a sense of familiarity with similar e-shopping platforms, including the ability to filter items displayed by category, list view, and thumbnail images of the items for scannability. Images will be auto-generated by the application if not provided by the farm.

The shopping basket (research showed a distinct lack of shopping carts at markets) resides within a bottom slider to ease the user's working memory's load without going to a separate screen. This also distinguishes the process of checking the basket from checking out.

The basket persists to individual item pages, always keeping the user secure in being able to see what they've already selected.

The basket itself is fairly straight forward, including the ability to increase the quantity of selected items, remove items, as well as two methods for proceeding; an underlined 'Checkout' link beneath the basket in the upper right-hand corner, and a larger 'Checkout' button at the bottom. The purpose of there being 2 checkout links is to ensure the user has the ability to proceed regardless of the length of the list of selected items - more items in the basket will push the button down and out of view.

The checkout area first reminds the user of the total, and then provides two methods of transaction: Pay Now, which will either automatically charge the user's already established Jive account, or prompt them to sign up, and Pay at Pick-Up, which enables the user to pay the vendor directly. The latter will also prompt users to create a Jive account before reserving the selected items for pick up. Of course, we will give the user the option to reconsider with a Back to Basket button.

To confirm the user's actions and reinforce Jive's branding they will be rewarded with a short animation along with a note that their order is being sent to the vendor and they will be e-mailed when confirmed by the vendor.

The user's next goal of physically arriving at the market is accomplished immediately with a button leading them to the Google Maps Directions API.

A STylin' Guide

While this is well on its way to becoming a full-blown Design System, the current deliverable is a mere Style Guide. It provides the gist of JIVE's brand identity, details color scheme and typography, and includes a handy sticker sheet for XD prototyping. If Adobe would cut-it-out with the onslaught of XD updates and fix the prototype embedding bug, this would be a much cleaner section.

But Wait, there's a twist

Through farmers market infrastructure research, and a particularly informative interview with a woman who grew up farming and participating in markets in Vermont, it became evident that a successful implementation of this system would require three facets: 

As a Market Organizer
I want to:
  • Gain community support
  • Connect with municipalities regarding
    prospective market space
  • Be engaged with vendors and
    market customers
As a Market Vendor
I want to:
  • Sell my goods
  • Connect with customers
  • Share my story
  • Register with new markets
As a Market Customer
I want to:
  • Find a market
  • Get general information about market
    and participating vendors
  • View available items for purchase
    before venturing to market
  • Reserve items ahead of time

Takeaways

As much fun as the world of Jive has been to be in, I ultimately don't have the time or the resources available to legitimately pursue the project as robustly as it deserves. It would require a deeper dive into the world of the vendor; understanding their contexts of use - perhaps with a ride-along on a market day - and what actual problems, if any, they might have with the process of selling at a market. It would also require a better understanding of the archetypical market organizer, what drives them to create value within their community, and what tools and resources are most valuable to them. Furthermore, to bring it all together - to have three sides to the platform (Uber has two, Passenger and Driver, and that certainly took more than one fledgling designer) would be a monumental undertaking. I won't delve into the realm of ubiquitous UX possibilities ("HEY ALEXA, WHAT'S THE JIVE TODAY!?") for the sake of outro brevity, but it's there. Of course it is.

The value of this project to me, the aforementioned fledgling designer, was essentially applying knowledge of interaction design psychology to something tangible, virtually. In user research you're not just sneakily asking prospective users what their needs are, you're looking at what they're currently doing and noticing the pain points and cognitive distress that they aren't, and then you remove those pain points and create cognitive ease as best you can. Sometimes it's visual, sometimes it's a sort of one-sided form of social cognition, wherein you and the user are both solving the problem together - they're just not as aware of their role as you are. When Lucy (alright, her real name was Sarah) told me that in her farmers market days there was scant time for updating a virtual marketplace between packing up the truck and setting up at the market, I became a type of external cognition for her to possibly solve (Default options) that problem; input data, solve for UX.

TOP