Phase 3: Design Development

Design

We are designing an alternative online grocery shopping interface, with the goal of creating a more natural experience that facilitates the fun, impulsive, and discovery-based aspects of grocery shopping, while not becoming time-consuming or tedious to users who are time-pressed. Online grocery shopping is a broadly underdeveloped market compared to other categories of online shopping (even apparel and home goods), and we hope to better mesh the convenience and sensory rich traits of brick and mortar with the selection and other powerful potential upsides of online (search, personalization).

How it works

The interface attempts to mimic the spatial distribution of items and experience of a traditional store, but translate that experience into a digital format. Items on the website are grouped by “aisles/department” so that the user can easily navigate to the correct section of the store, then each isle has goods arranged on virtual shelves where the user can browse and drag items into their cart as they would in a traditional store. A core feature of the idea is to display items in logical groupings much like in a real grocery store. For example, all of the milks and jug sizes that one brand offers appear together, and all of the milk options are in one area of the shelf, allowing users to compare options and prices in the same way they do in person.

The website will also capitalize on the opportunity presented by moving your grocery shopping online by providing previously bought items for ease of return shopping and other recommendation/personalization techniques (exact integration of these features is TBD). Grocery stores already perform this technique by strategically clustering items nearby to encourage impulse buying or far away to force the user to spend more time in the store. We see upside in being able to make these experiences more effective (personalized) and less tedious (no walking).

User needs

In our first round of paper prototype testing, we found that users were really happy with the shelf-like layout of items, and enjoyed having a “previously bought” page where they could quickly add the specific items they’ve bought before. However, our design also falls short in that the current mockup of our shelf system is slightly jarring--the items are too close together, creating a visually busy interface that’s hard to understand.

Additionally the users provided the feedback that signifiers for the ‘drag and drop’ interaction were not conveyed effectively in our prototype. In the next phase we will improve upon this through the refinement and rearranging of the visual interface so the signifiers for this affordance become more clear.

Users appreciated the aisle or department navigation of the store, but they described feeling more connected to the interface and understanding of what it conveyed when the departments were represented through both text and images of an item associated with each aisle.

They also appreciated the functionality of filtering items in an aisle and searching for items within an aisle, however they thought that our signifier of highlighting the results was not as effective as simply decreasing the number of items displayed to only show the results of a search or filter.

Alternative designs and design decisions

In order to facilitate an interaction that encouraged users to look around and come across something they might want, we explored several architectures. One alternative option was a decision tree that would walk users through simple choices like cookies, chips, or crackers, and drill down until they found a specific item they liked. The idea was to create a modular experience where people felt comfortable navigating up and down the tree to explore different things, without having to think too hard at any step.

However, we found that this failed to create the ‘browsing’ experience we were looking for. Users we interviewed expressed that it is a specific item that catches their eye, like Cheez-Its, rather than an abstract category like crackers, so choosing categories felt uncompelling. This reinforces the idea that using the concept of the visual aisle structure is an effective way for people to peruse. In particular, the ability to show many results at once with logical groupings allows items to catch the user’s eye, because they see options as they navigate from one thing on their shopping list to another.

We also considered adding a recommended items feature, similar to current online store interfaces. However some of the preliminary designs for this did not integrate well with the “shelving system” interface that we designed. Additionally during user interviews there seemed to be some resentment towards these features of current online store interfaces, although these features are effective at selling items, users expressed feeling tricked into buying recommended items. Thus we decided to leave these features out of our design but leave the possibility open for adding them at a later period if we could find a good integration strategy.

Key insights

Our surveyed users had diverse shopping habits and preferences, but there were a few shared important points among them. Our main insight was that our users greatly preferred the browsing layout to the search layout, but still wanted some amount of optimized searching in order to get through the shopping experience quickly. We also discovered that users had mixed feelings about a recommended items feature, so we decided to leave the feature out of our current prototype but leave enough room to add it later.

There were a few affordance and signifier problems with our initial mockup, which we were able to pinpoint and come up with actionable changes to fix. First, the browsing aisle view pages have too many items on them that are too close together, creating a visually busy layout that’s hard for users to read and pay attention to. Second, we learned that users like mousing over items to learn more about them, and that this is an ideal location to put the price, rather than below the item in the shelf layout.

An additional feature we could add is audio--one of our users commented that they “could hear the muffled conversation around them.” We previously hadn’t considered adding any kind of audio or soundscape to our product, but if done effectively, it could enhance our intended user experience of feeling like you’re in a grocery store.

Design Artifacts From This Phase