Summary: The design process is focused on understanding problem areas of grocery shopping in New York City to generate solutions through digital interfaces while also raising sales at local grocery shops.
The output is conceptualized to be in the form of an app, with a phone home screen widget feature to enable live finding of nearby stores/ deals when a user is walking in any locale to facilitate enhanced in-store shopping.
This design process is being performed by a team of three, with research methods of in-depth interviews, journey mapping, synthesizing mental models, Information Architecture, Site Map, Wireframing, Prototyping.
Key App Selling Point: Focuses on both Online + Offline experiences
To begin our research stage, the groups conducted interviews, in-depth observations and contextual inquiries. By the end of our research process, we had a total of four interviews, three observations, and one contextual inquiry with two users.
We determined our context to be Chelsea in New York City- an area offering a mix of residential, institutional, retail, and workplace establishments.
I went to numerous local stores of varying sizes at different times of the day in one neighborhood (Chelsea, New York City) to better understand, and take field notes on the following:
User behaviors
Patterns
Importance of context, types of products purchased
User interactions with products, store staff, fellow patrons, etc.
User Emotions - Frustration and pain-points
The observations also determined the Interview Protocol as a team to conduct 30-minute interviews with users. While we knew our app would be for patrons, we wanted to be able to gain a deep understanding of the grocery shopping process on both ends, including how well local store owners adopt new technology and their opinions on the rise of grocery delivery.
SECONDARY RESEARCH
1. Contextual Inquiries
From the contextual Inquiries, we could also understand the user flows of some existing online grocery ordering apps and interfaces and the pain points of users using those apps in a better manner
We felt conducting this study would give us a better idea of designing a digital interface for a similar function, and to locate gaps in the current apps that we could bridge.
Contextual Inquiry : User 1 Case 1 (WalMart)
Contextual Inquiry : User 1 Case 2 (Instacart)
Contextual Inquiry : User 2 (UberEats)
RESEARCH INSIGHTS
In the Interview and Contextual Inquiry stage, we reflected that we had three different typologies of users. We realized we would need to first note down observations from the users before moving to Affinity Mapping.
We categorized the users as:
In-store shoppers
Shop Managers
Online shoppers
We noted the important elements from the interview conversations with each user, and then started marking the observed repeating patterns like pain points, frustrations, shopping context, etc.
.
While there are many apps on the market that help grocery stores increase sales through online shopping and pickup, most of these apps primarily assist large or chain grocery stores in becoming more efficient. Few apps cater to local grocery stores, helping them increase sales and enabling regular customers to learn more about their neighborhood grocery store. For instance, InstaCart is full-featured, but it doesn't allow users to simply search for local grocery stores in their neighborhood, nor does it help regular customers filter their preferences and discover discounts. Therefore, we have decided to design a new app and framework to empower local grocery stores to compete with larger counterparts.
Design Frame: A new app for raising sales in local grocery stores through in-store and online shopping.
RESEARCH MODELS
1. Personas
From our affinity diagram, we developed two distinct personas that cover both sides of grocery shopping: online and in-person.
2. User Journeys Charting
The larger goals are kept the same, such that we can understand the variations within the two journeys to design better accommodations for both major typologies of users.
We have added a layer of recorded user pain points and observed frustrations in the process to make problem areas clearer with the point it is experienced at in the journey, and its relation to the other interactions and activities.
3. Mental Model
The solution area has a Type 1 (focus on in-store shopping) and a Type 2 (preference for online ordering). In this manner, we could link the different design requirements the app would need to have to cater to the user groups in an effective manner.
Implementation Stage : Information Architecture and Site Map
The information architecture and site maps were inspired by trying to create a dual solution for both in-person shoppers and online shoppers. With a heavier emphasis on in-person shopping, as one of our main goals for the app is to increase in-store sales, we were able to incorporate most ideas from our solution space of our mental model to suit the needs of both users.
I also assigned a 'Templates' code like Product Information, Store Information to a set of information elements that are repeating across pages, to maintain consistency of data and UI.
SITE MAP ITERATIONS
The features like 'Map View' and 'List View' are integrated with a new concept such that, if a user is walking through an area, they get notified of live deals around them, that they can pickup from the store on the way/ order online.
A user can either open the app to check relevant deals (in accordance with their food preference) or enable notifications. At this point, we also thought adding a Widget feature would work best for patrons to be aware of deals.
Wireframing iterations for the app features from discovery, search, shopping and cart flow
The following are the core insights application from the earlier process and Design Frame that we have integrated while iterating and developing the wireframes and navigation flows, and why these decisions were taken.
Online and In-Store Toggle:
WHAT: This feature allows users to easily switch between online and in-store shopping options.
WHY: Based on primary research, it was discovered that there are two distinct user journeys, and this feature aims to cater to both. It encourages users to explore both online and in-store shopping, increasing foot traffic in physical stores and overall sales.
Highlight Deals:
WHAT: This feature highlights deals from local stores prominently.
WHY: The goal is to provide a platform for stores to post their deals and incentivize users to go to these stores in-person to quickly take advantage of the deal that they are offered.
Map/Live View:
WHAT: It's a live map displaying nearby deals and store locations.
WHY: Building on the Deals Highlight concept, this feature provides a clear and interactive way for users to locate stores with deals and navigate to them. It encourages users to discover stores while on the move and can increase in-store foot traffic.
Make a List:
WHAT: This in-app feature allows users to create grocery lists that can lead them directly to the product selection page.
WHY: The aim is to enable users to quickly add products to their lists for easy reference and faster shopping.
Usability Test Major Findings
The goal is to provide a platform for stores to post their deals and incentivize users to go to these stores in-person to quickly take advantage of the deal that they are offered.
A total of four user tests were conducted following the above protocol in order to understand how users interacted with the app. Through the tests, we uncovered a few minor and major issues that barred users from using the app to its full potential.
After gathering the data from each user test and performing a heuristic analysis of the responses, there were three main principles of the seven total heuristic principles that needed work within our app:
Principle 1: User Control and Freedom
Users had problems with being able to change the quantity of the product they wanted to purchase directly on the explore deals page. Additionally, users wanted a fix in the event they accidentally swipe past a deal they actually wanted. We also now offer a back button for users who may have accidentally swiped past a deal they actually wanted.
Principle 2: Consistency and Standards
Users were left confused by the icons on the bottom navigation bar and felt as though the pages were not matched with the correct icon. In our final wireframes, we re-assigned the navigation icons to pages that are more fitting for the symbol, and added a pick up option within the cart. The additional pick up option will also help us push our design frame by getting users to go to the physical store to pick up their groceries.
Principle 3: Visibility of System Status
Users had problems with not really knowing what was going on in the app, specifically regarding how many items were in their cart, what stores the items in the shop page were coming from, and an at-a-glance ability to see how far stores are located from them in the homepage. Two users wanted to know where a store was located in reference to their location on the homepage, rather than just show the store’s name. To solve this, we added a store location feature on the homepage that shows how far the store is.
Check out our prototype!
Building an accessible color palette for the app
Building for AAA ruleset standard according to WCAG guidelines, and removing web accessibility issues.
Tools Used: Contrast Plug-in in Figma, Tanaguru Contrast Finder, https://toolness.github.io/accessible-color-matrix/
Across all the wireframes, we primarily noted a few recurring color combinations of text over background color having a weak Contrast ratio for positive web accessibility. In simultaneous trials, at the locations where text is coming in across all the wireframes, we have revised the color palette, as seen in the revised wireframe design attached below.
We then defined a set of colors that work together and can be used as background and foreground colors for a web-accessible application with an AAA standard of a 7.1 Contrast Ratio for readability.
Going Forward
Going forward, we would like to strengthen our in-person shopping pathway on the app, and further incentivize users to shop in store and look for deals near them.
Users resonated with our mission and appreciated our push to highlight local grocery stores in the New York area. One barrier for them was the price level in some local grocery stores, such as Gristedes and D'Agostino’s. Upon the app’s launch and implementation, it would be a goal for our group to partner with larger local grocery stores to provide exclusive deals for in-person shoppers, such as an in-person 5% off discount or exclusive product offers and launches for in-person shoppers.
Personal reflections
Always connect the 'Whys' to every decision:
I feel at every node, questioning 'Why' the decision is being taken and adding it in the documentation for every stakeholder to understand makes the process more communicative, the output more meaningful, and helps avoid mistakes as a designer.
