Responsive Web Design - GroGetters

GroGetters is the team final project of Interaction Design Studio, aiming to facilitate grocery shopping during the pandemic. My primary responsibility in the team includes initial research, initial sketching, overall visuals style, and logotype design.

To understand the problem space, the team started the project by conducting pop-up research through interviews. Insights gained from the interviews were made into an affinity diagram, and the information was summarized into one comprehensive customer journey map, reflecting common findings. Below are some images from our research.

From our research, we found that there are increased importance of grocery lists, increased concern about being economically frugal, increased aversion to use mobile devices, and increased desire to minimize their time in store. Interestingly enough, we found that despite these challenges, they still preferred in-store grocery shopping. Based on these findings and the customer journey map, we found that the greatest opportunity for improvement lies in the “shop” phase of a grocery trip.

To further narrow down our focus, we decided to target two goals: minimizing cognitive load and total time in store. With this focus, we all conducted secondary research to better understand the current landscape for “time-saving solutions” within retail experiences. From this research, we learned that the element of greatest frustration (and fewest solutions) was in-store navigation: customers had no idea where their groceries were as their lists got longer, and spent too much time navigating the store and checking their lists.

With the focus of quick in-store navigation and easy management of grocery lists, the team generated ideas of the layout of the app and I consolidated them into an initial paper prototype in scenarios. The app allows users to create and reuse their grocery lists in the app, and provides in-store navigation to ensure the items on the list are all picked up and the quickest route in-store is picked to minimize the exposure in store during the pandemic. Users can also view deal information and edit their list while in store.

For the purpose of pitching in class, the team chose Whole Foods Market to be the client. I created the following logotype that fits the branding of Whole Foods Market while providing the sense of direction and swiftness the app is aiming to provide.

The key functions of the app are importing store and grocery list information, in-store navigation, finding deals and item recommendations, and modifying the list while in-store.

For the mobile design, we made a concerted effort to simplify in-app navigation as much as possible. Our hi-fi prototype has only one page once users begin navigating – the map page. The list, search, and deals sections each were represented on modals that could be clicked to from the maps page, and they could each easily be closed with a button at the bottom or by pressing outside the modal.

For the watch design, we heavily relied on pre-existing design patterns to focus on our objective of creating an easily recognizabe and usable experience. Some of the patterns we used were vertical scrolling for longer lists of options, horizontal scrolling to navigate through the different pages of the application, dots at the bottom of the screen to signal the current page, back buttons in the top left corner, and button layouts.

GroGetters provides the opportunity to use a combination of the mobile app to have full control over the customer’s end to end shopping experience and the watch app to limit touchpoint while in the store. Below are video demos of the high fidelity prototype the team produced, used in our in-class pitch.