I’m hungry now!
An apples-to-apples analysis of three popular virtual grocery shopping apps.
This is a part of a blog series for my UX Academy Bootcamp with DesignLab.
Many of our chores are doable on our phones and computers. This means that applications helping us accomplish these tasks must be designed to be convenient.
As a long distance commuter and someone that has to manage my time wisely, I would be likely one of many customers that use these apps to solve one problem: to make grocery shopping convenient. I would love to have an app that helps me avoid long checkout lines, traffic, long aisles, shopping lists, advertisements, and other distractions. I analyzed the design of three similar grocery shopping apps (Instacart, Safeway, and Amazon Fresh) to see how well they are designed for the busy grocery shopper like me.
My approach to evaluating these designs was to fit my personal experience with design principles we learned in the UX Academy pre-course. I evaluated the experience, from functionality to aesthetic, using the Design Hierarchy of Needs. This framework, similar to Maslow’s hierarchy, postulates that the following components make up good design. When an application demonstrates functionality, reliability, usability, proficiency, and creativity is a well designed product. A diagram and examples show what these levels mean.
Functionality: I can find the grocery item I was looking for and build a cart of items.
Reliability: The service consistently deliverS all of my items on time, undamaged, and exactly as expected from the pictures and cart on the app.
Usability: I can easily find my items, build, and order my cart in the application.
Proficiency: I can quickly build and complete my order and specify exactly how much and where to deliver.
Creativity: The app looks unique, polished, and gives me additional functionality that goes beyond just grocery shopping.
Instacart — A Good Design Example
Instacart is like the Uber of grocery shopping: it connects consumers with Personal Shoppers who do the trip for them. They advertise fast delivery in your zip code area, in as little as 2 hours, and from stores the consumer selects.
Looking with the basic functionality, I noticed that Instacart allows me to search groceries and build a cart. Consumers can type into a search bar that makes suggestions on which “Aisle” (or category) to find it. The functionality is responsive too, as I can scroll down and still access the search bar on the top without scrolling up again (a “sticky” search bar). The add buttons allows me to adjust the item amount in the same screen, and the cart saves items in both web and mobile platforms.
The reliability of the service has varied between my experience and other customers’. All of my cart items were included in the order, and none of them were damaged nor look different from the online pictures. After ordering my items, I received them within the promised two hour window, as advertised. I’ve read customer reviews saying this has not always been the case, but I have personally not had issues with the few times I used them.
On the topic of usability, the app on both web and mobile platforms does a solid job of guiding me through a seamless shopping experience. Instacart uses its bright green for all of its buttons (like adding items and opening the cart), which works as a contrasting color and does not obstruct from the most important piece of information on the page: the grocery product. It notes in bright green what I ordered previously, and notes when there’s an item in the cart. Even the interface looks very similar between platforms, with the minimalist plus size button, sticky search bar, and categories at the bottom of the page. This makes it easier for me to navigate both applications because they feel familiar.
The proficiency of the app is also apparent, because of its automatic save feature and checkout menu. The cart between mobile and web versions automatically carry over my items, so if I am ordering from my desktop before leaving work and have to finish on my commute home via mobile phone, I have that option. The checkout menu also gives me the option to select any hour for delivery as long as the store is open. The checkout shows me the store hours and if they are opened/closed so I don’t have to check their store hours outside of the application. Other features like the built-in chat for updates and custom delivery times are useful additions that provide transparency to the user.
After exploring the application, there is not much that shows creativity (as defined by the hierarchy). The expected functions of building, ordering, and specifying delivery are there. Visually, it feels simple, polished, but does not add anything innovative to the online grocery shopping experience.
Overall the design is good because it accomplishes its goal in a logical manner. The minimal use of green buttons, familiar notification like circles on top of the buttons, and logical layout make the application feel intuitive.
Safeway — Another Good Design
Safeway joined the grocery delivery business in 2000, before most of its startup and tech competitors. They offer a mobile and web app experience that is tied to a user’s Safeway free account.
Similarly to Instacart, it is a functional application. You can order items, adjust amounts, build a cart, and specify delivery times. They also provide reliable services by delivering on time, with no damaged goods or unexpected mistakes in the order.
Safeway’s app demonstrates strong usability & proficiency as well. They utilize a clean aesthetic by using only one primary color (red) for its application. Finding produce is an intuitive and quick experience, with a sticky search bar, buttons to add/subtract to the cart, saved cart between the web and mobile app, and specific checking out process.
The difference between them and Instacart are very slight, as many of the features of the app are present. The red commands attention to the most important actions on the app: to build a cart and search for items. One drawback is the repetitive use of the red Add buttons and larger amounts of white space used around the products, arguably take up potential room from the screen for more items. This could slow down the shopping experience because it required that I scroll more to see what products are available.
One feature present in the Safeway app that is not in the Instacart app is the use of recipes. They suggest recipes and automatically bundle the ingredients, which is a nice addition for users that are figuring out what to cook for dinner. This creative feature encourages more grocery shopping and less hassle on the users end.
Overall, Safeway’s product offers an uncluttered shopping interface that goes the extra mile with its recipe function.
Amazon Prime Fresh — A Not So Good Design
Amazon Fresh is a branching service from the popular and growing Amazon shopping marketplace. The service offers members a full convenience store experience by offering groceries and other good.
While the service has a large customer base, compared to its competitors, the design is not as strong when creating a grocery shopping experience. Amazon’s web and mobile platforms check all of the boxes for basic functionality. Some reliability issues to note: when you search for an item, it will narrow down search results like the other two competitors, but sometimes will bring up the wrong item. For example, I searched for snap peas and somehow got blackberries and carrots in the search. The search does not consistently bring results that I expect or look for.
When it comes to usability and proficiency, the application falls short. There are nuances to the design that prove the app does not work as well as the other two in this analysis.
For example, there is a lot of visual clutter on every part of the page that makes it difficult to navigate. Looking through the home screen can be challenging amidst the advertisements, deals, dark solid color banner, side bars, and repetitive green buttons under the product. The hierarchy of the site is confusing as well, as the ads, customer rating stars, and small type in different bright colors crowd the page. I can only see two or three products in one page, while in the other apps I can see three or four without having to scroll down.
It is challenging to complete my task quickly as well with an excessive amount of screens to navigate through. The search bar does not follow the user when they scroll down, which means they have to scroll up and down more when shopping. Additionally, in contrast to the other apps, I have to click through three screens to change the amount on the mobile app. Also, when checking out, Amazon prompts me with a “Before you Check Out…” page of products they m suggest to buy. In order to get my groceries quickly, I have to click through extra screens.
Perhaps because it is also an online retail shop for non-grocery items, Amazon juggles and advertises other products not found in grocery stores. For an online grocery experience, that can slow down the goal of finding groceries conveniently. Even in the cart check out process, the cart in both the web and mobile app become confusing. Sometimes there are cases when both the groceries and non-groceries are in the cart, and the flow on the screen does not clearly delineate what you are checking out.
Overall, the design of Amazon offers a basic grocery shopping experience, but with lots of visual and functional clutter compared to other applications.
Concluding Thoughts
The purpose of online grocery shopping tends to be for convenience. After all, these services all offer door to door fast delivery for its consumer base. However, the experience in the application can be subtly different between applications. I will admit it was a challenge to compare the three because all of them achieve a similar goal and have a similar visual structure. However, as I played around with the applications more, those subtleties become more prominent on how much time they save me (or not). Design choices like color, layout, and contrast become very apparent as I look through the grocery products. So while visual differences can be slight, they add up to the experience as a whole.
