User Experience Evaluation of Instacart

By Shuvankar Saha

Introduction

Instacart is a widely used e-commerce platform primarily focused on grocery items in Canada and the United States of America. Instacart service is available on websites and in mobile applications. This service has changed the conventional way of doing the grocery and brought the whole market of grocery items in a distance of one single click. A user can browse the grocery items by department, category, and supermarket. In addition, the users are allowed to sort the products by price and popularity within a single marketplace. Finally, a shopper assigned by Instacart delivers the grocery items to the user’s doorstep within a predefined scheduled time. It allows a user to schedule a delivery at any point of future time, communicate with the shopper while picking up the items, change the preferences on the fly, get an instant refund if the item is not available, and some other excellent features that have made this platform widely accepted and popular.

In the next section of this blog, I will talk about some of the major usability problems encountered while conducting a heuristic evaluation and an in-depth evaluation by real users on the most frequently features used within the platform. During the evaluation process, it has been observed that several usability heuristics are not followed, and it has been impacting on user experience at error prevention, user control, flexibility to use and in many other aspects. This blog will also share the recommendations that can resolve the usability issues and add more values to a user experience.

Evaluation Methods Used

This blog has focused on assessing the user experience in the Instacart website which still considered one of the most popular mediums of interacting with an e-commerce platform. As a UX expert, I have conducted the heuristic evaluation for the end to end process that includes searching for a product, determining the quantity, placing the item in the shopping cart, confirming the order, completing the payment, tracking the order, and finally providing the shopper's feedback. Additionally, I have chosen a set of six real users which is divided into the users who have previous experience in using Instacart and the others who have not worked with this platform before.

User Experience Problem in Instacart

1. Users cannot define the quantity in pounds (lbs)

Problem:

In Canada, a large number of people use the pound (lbs) metric system as a unit of measurement. Instacart only allows selecting the amount in pieces, and in kilograms. So, it does not display the amounts in pounds (lbs) for any product which is not measurable in pieces. Therefore, it leaves the users in between two compromising situations. They are either forced to do the mathematical conversion between kilograms and lbs by themselves or they purchase the product in an approximate quantity in kilograms. In both cases, it creates a non-convenient user experience. This problem violates the following two usability heuristics-

1. Match between system and the real world
2. User control and freedom

Figure 1: Users are not allowed to select the quantity in pounds (lbs)

Recommendations:

Instacart should introduce a choice between pounds (lbs) and kilograms (kg) for every product which is available to purchase in weight. In this way, users will have more freedom to pick up their preferred unit. The switch between the lbs and kg should act as a radio button. If a user opts for an item in lbs, the system should deselect all previous selections.

2. Users cannot recommend a particular grocery outlet

Problem:

An Instacart user can browse the items and place an order by supermarkets. But in the real world, each grocery outlet has a different set of available items in its inventory. But Instacart internally picks up the nearest grocery outlet (nearest outlet of larger supermarket like Costco, Walmart, Loblaws, Sobeys, etc.), and the shopper purchases the items from there. Sometimes, the user knows that some items are only available at a specific outlet from their own experience. But Instacart does not allow the users to mention the preferred outlet while placing the orders. Therefore, the shopper cannot find these (special) items from the nearest stores and it causes a large number of unsuccessful deliveries. This problem violates the following two usability heuristics-

1. Match between system and the real world
2. User control and freedom

Figure 2: Users are not allowed to select a particular Loblaws outlet 

Recommendations:

Instacart should introduce a new section to define a specific outlet if the user wishes. This field should require optional user-level input. Because not always the users will be eager to set a preference. By default, the system should pick up the nearest store and the user will be allowed to change it in any special circumstances. As the delivery fees are associated with the distance between the user's address and the outlet's address, Instacart will notify about the increase of fees if a user selects a distant outlet.

3. Misguiding the users to register before shopping at the homepage

Problem:

The initial visible portion of the Instacart home page asks a user to enter his/her respective delivery address and become a registered user of this platform. It is uncomfortable for first-time users who do not have a detailed understanding of Instacart items but still need to register themselves to browse the items and place orders. In many cases, the users prefer to complete the shopping as a guest, without registering for e-commerce service. Moreover, there is an option to start shopping right below the registration option that does not work and does not show the appropriate error message to users. Instacart has a feature to browse the items before registering which is not easily discoverable. The user needs to scroll all the way down to browse the Instacart products by different categories. Very often the users will struggle to find the guest access or forced to register for the service at the initial steps. This problem violates the following two usability heuristics-

1. Error prevention
2. User control and freedom

Figure 3: Users are asked to register at Instacart right after landing on the home page 

Recommendations:

Instacart should introduce a new "Continue as Guest" feature (placing a button right beside the login) that will allow the users to browse the items, add them to a shopping cart, make a payment, and place the order as a guest. Registering to Instacart should be an optional choice that should be left for the user's discretion. The system can ask to register for the platform once a user has successfully placed an order. During this time, it can attract the user by displaying the benefits of a registered user.

4. Redirecting the users to stores when they want to navigate to homepage

Problem:

Once the user steps out from the homepage and starts browsing the items at different stores, there is no system-defined way (back button, home icon, or any external event) to return to the homepage. The usability problem encountered when the user clicks at the "Instacart" icon at the top left corner. By default, the logo icon redirects a user to the system's homepage. Instacart takes the users to the "store" selection page. More importantly, the users are not allowed to go to the homepage even if the user types "instacart.ca" in the browser URL. In both cases, the system automatically redirects the users to "instacart.ca/store". The system also does not display any error message or proper guidelines to land on the initial home page. This problem violates the following two usability heuristics-

1. Error prevention
2. Consistency and standards

Figure 4: Users are redirected asked to select a store when they click the home page 

Recommendations:

The system should display a proper error or information message when a user is redirected to a different page that is opposite to the user's intention. The top menu should have an option to browse the products by multiple categories. This menu should be constant throughout the system so that the users do not need to frequently return back to the homepage to make a customized search.

5. Multiple terminologies used for the same item

Problem:

On the homepage, Instacart has defined the grocery stores as "Retail stores". Once the users have navigated to browse the items by the supermarket, the system has named each store as "Shop". Finally, the system has mentioned each supermarket as "stores" in the top left menu. There are three different namings to refer to a supermarket. It creates a lot of confusion among the real users. They assume these names as different types of shopping spaces and does the navigation back and forth multiple times. It increases the operational time to perform a specific task (i.e., searching an item in a particular supermarket, placing an order, etc.). This problem violates the following usability heuristic-

1. Consistency and standards

Figure 5: Users are perplexed by the different terminologies 

Recommendations:

Instacart should name a single item constantly throughout the system. "Store" should be used as a unique identifier to refer to a shopping outlet. 

Conclusion

The usability issues mentioned in this blog have been affecting the user's operations and therefore influencing Instacart in a financial and strategical way. More importantly, some of these issues are encountered by only a set of six real users. So, the impact of user experience will be much higher if we consider a sample of a million users using this platform for their daily groceries. The product development team should have their eyes on the problems mentioned in this blog. A proper design, layout, workflow, and the dataflow between multiple widgets create a substantial impact on the user experience.  Proper implementation of these usability issues according to the recommended solutions can improve the operational time consumed by each user and help Instacart to increase the user-base.

References

1. Jakob Nielsen, 10 Usability Heuristics for User Interface Design, Nielsen Norman Group, Published Apr. 24, 1994; Updated Nov. 15, 2020. [Online]. Available: https://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed on Mar. 12, 2021].

2. Jakob Nielsen, How to conduct Heuristic Evaluation, Nielsen Norman Group, Published Nov. 01, 1994. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/. [Accessed on Mar. 12, 2021].

3. Jakob Nielsen, Similarity Principle in Visual Design, Nielsen Norman Group, Published Sep. 06, 2020. [Online]. Available: https://www.nngroup.com/articles/gestalt-similarity/. [Accessed on Mar. 12, 2021].

Codeforces’s Problemset Evaluation By Lovepreet Singh

Codeforces is a competitive programming platform used by thousands of people daily and has a huge archive list of programming problems known as a problem set. Programmers visit this page to practice their skills or to retry a problem they have seen previously. In this blog, we are going to see different usability issues with the UI that are found using heuristic evaluation and thinking aloud with real users. The solutions to the various problems are given after going through the evaluation methods and recommending the solutions which can give a better user experience.

Usability Problems

In this part, we will explore major usability issues that a user faces in the problem set’s UI following the evaluation methods used. 

Page Search Icon

The problem set UI contains a local search bar that allows a user to search inside the currently opened page from tens of pages. However, the search bar is not opened by default and an icon of the right arrow is given to open it as we can see in Figure 1. This arrow does not represent the search functionality in any way and the user can assume that there is no search function provided for filtering. The icon is very small and hard to recognize as something important without any information attached to it.

Figure 1: Local page search in the problem set (source)

The search UI is breaking Neilson's Consistency and Standards heuristic by not following the standards used by most of the websites by opening the search bar by default and using a standard search icon for a search function. When a task was given to the users to filter out a problem on the page, all the users didn't consider the right arrow icon for finding a search bar and assumed this icon as a shortcut for the next page. This behavior shows the influence of industry standards on the user where the user is connecting his previous experience to the icons, so the website should follow the standards in the industry.

Global Search

The global search bar provided in Codeforces’s UI does not search for a specific problem from the problem set. The user searching for a problem might assume that the problem does not exist on Codeforces if the search function cannot find it and might go away from the website. We can see in Figure 2 that after searching for a problem "AB Tree", the search results are not showing any reference to the problem set.

Figure 2: Codeforces's global search (source)

In the thinking aloud method, users struggle to find a specific problem in the problem set when given by name. After a long time, most users went on to take help from Google to search inside Codeforces which resulted in finding the problem easily.  Codeforces should search inside the problem set for a given text in the search bar so that users can directly search for a problem. Using this approach, the design will follow Neilson's Flexibility and efficiency of use heuristic that allow a user to speed up the interaction with the design. 

Finding a Problem's Solutions

All the problems in the archive list have solutions by different users and two steps are required to get to the solution of a problem. Besides, the steps are not clearly marked to point to the solution but represent something else as we can see in Figure 3.

Figure 3: Finding the solution of a problem (source)

First, the user has to click a number on the right which represents the number of users who have solved the problem, and then the user has to click a random number assigned to the solution on the left. The learnability is high in this case as the user has to navigate and experiment with different options to find the solution. The design is not following Neilson's heuristic known Recognition rather than recall as the design is enforcing the user to remember the steps to find the solution.

Undocumented Elements

Lastly, there are certain elements on the UI for which no documentation is provided to know their use. One of such elements is shown in Figure 4 where the three horizontal bars are given which should show some menu bar after following the standards but it only shows a pop up with some empty user list. 

Figure 4: Undocumented element (source)

There is no documentation link or information provided on the UI that can inform about the role of the element. When the task is given to the users to explain the use of this element, the users fail to do so as no information was provided for its use. The best recommendation is to add some link beside the UI to inform users about the role of a certain element and then it will also follow Neilson's help and documentation heuristic.

Conclusion

Codeforces have some major design issues that hinder the user to perform certain actions efficiently or the inability to do certain tasks. It should follow some industry standards and consistencies so that the learnability curve for new or returning users should be not high. The website should try to reduce the cognitive load of the user by providing direct access to certain functions which a user performs frequently such as looking for the solution of a problem, finding the solution by a particular user, etc. These design enhancements will certainly be good for the user experience and will increase the learning experience of the user which is the core motive of the website.

Usability Evaluation of Priceline Website

-By Tanya

Introduction

       This blog intends to provide an in-depth evaluation of the software product, the Priceline website. I chose this website because I found some issues while using it for booking a flight. Priceline is an online travel agency for finding discounted deals for hotels and flights all around the world. To ensure a well-ordered booking process, the user experience of the site is essential. Hence, to evaluate the site's usability, I performed the Heuristic evaluation using Neilsen's ten general principles for interaction design. In addition to that, I also analyzed the website with real users using the think-aloud protocol remotely. The three participants selected had different demographic information and experiences with the internet. 

       Some key issues were recognized while evaluating the website and some recommendations to solve the problems are suggested too.

Usability Issues and Recommendations

1. Multiple tabs open with almost every click of a button: 

User Problem: On clicking a single button, the website opens the link in a new tab by default. It causes an increased clutter of the task information. Hence the user has to put more effort into managing the content. The users also face difficulty going back as they usually use the back button. 

Recommendations: Example, when choosing a hotel deal by default, the link should not open in a new tab as it becomes difficult for the user to go back, and after seeing some hotel deals, their window fills up with distinct pages.

Heuristic 4: Maintain consistency and adhere to standards was broken.

Figure 1: Multiple tabs open for a single task

2. The confusing price breakdown of round trip flights:

User Problem: It is not clear that for round trip flights, the prices displayed on the departure page are for return flights also or not.  On the return page, some flights show zero dollars as their price. The customers get confused about whether the return flight is free. Furthermore, only on the trip summary page, does the user come to know that the prices are in USD.

Recommendation: The price breakdown of departure and return flights should be clear and separate. More knowledge about the price should be visible when the user hovers over it. The currency in which the fare of flights displays should also be visible in the beginning. Additionally, on the trip summary page, an option to see the base fare, taxes, and other charges can show the transparency of prices.

Heuristic 2: Match between the system and the real world was broken.

Figure 2: Confusing price details

3. Not flexible enough to change a single condition before checkout:

User Problem: The user has no option to change a condition on the trip summary page. Though the user wanted to change only the return date, they had to go through all the selections again. Furthermore, the change flight link is not that visible and discoverable by the users.

Recommendation: The departure and return flight should have different options to change flights and be easily discoverable by the users. So that if the user wants to change the return flight, they should not be required to select the departure flight again. 

Heuristic 7: Flexibility and efficiency of use was broken.

Figure 3: Only one link to change both flights

4. Missing information like the refund policy:

User Problem: Before making any purchase, users tend to find the refund policy of the company. There is no option listed on the website to know the refund policy of the company.

Recommendation: There should be a clear policy definition of refunds defined on the website that can either be linked from the footer or in the FAQs section. It can also be dynamically be loaded on the deals and trip summary page so the user has a clear understanding of the policies. This will help in increasing not only customer trust but will also help to decrease the number of support tickets the company might be getting.

Heuristic 10: Help and documentation was broken.

Heuristic 7: Flexibility and efficiency of use was broken.

Figure 4: No proper information regarding the refund policy

5. Some features were not compatible with all browsers:

User Problem: The frequently asked questions were not closing in the firefox but were working accurately in google chrome. While collapsing a question, the page reloaded and displayed the same data again.

Recommendations: Every feature of the website should be made browser compatible.

Heuristic 4: Consistency and standards was broken.

Figure 5: Page reloading and showing the same data

6. Only one way to contact the company via call: 

User Problem: There should be at least two ways to contact a company. So that in case a method is not working, a customer can use the other way to get in touch with someone in the company.

Recommendation: Add two or three more ways a user can reach out to someone in the company. The other methods of contact can be an email address, social media, or a live chat on the website.

Heuristic 4: Consistency and standards was broken.

Figure 6: Only one contact number

Conclusion

Priceline.com is one of the largest online travel booking websites. So the system was evaluated to determine issues faced by the users. From the results of the evaluation, we can see that some problems hinder the user experience with the system. For example, the users prefer transparency in prices and information before making any online purchase. Participants also do not like the clutter of pages when performing a single task. Candidates also want multiple ways to contact the company regarding any queries. Also, before launching, it is vital to make sure that all features are browser compatible. All users prefer a simple and more intuitive interface. Improving these issues can make the website more user-friendly and would be able to attract more customers. Making upgrades to the system can increase the sales of the company and give it a financial boost.  

Usability Evaluation of MakeMyTrip Website

By Heli A. Patel

Introduction 

Usability evaluation identifies if the product is usable and learnable enough using which users can achieve their goals. This blogpost presents an evaluation of MakeMyTrip website which is an Indian online travel agency they provide booking for hotels, flights, train, cab, visa, and the evaluation is based on the usability of the system.

MakeMyTrip is one the best online travel service firms in India. They have 14 company-owned travel stores in 14 cities, over 30 franchisee-owned travel stores in 28 cities, and counters in four major airports in India. MakeMyTrip has offices in New York, Singapore, Kuala Lumpur, Phuket, Bangkok, and Dubai. In the figure 1 we can see the Home Page of MakeMyTrip.        

   Figure1. MakeMyTrip Home Page 

The evaluation was performed using heuristic evaluation and think aloud user testing. For directing the heuristic evaluation, 10 usability heuristic by Jakob Nielsen were used. User testing was done by 4 users with no experience of using this website. Recommendations to resolve issues have also been suggested.

 

Usability Issues and Recommendations

1.   Vertical filter bar is inefficient to use.

Every time users select any filters; website immediately updates listing, and user will be again shown top of the page, in other words users brought back to top of the page. When users scroll down to the filters and select something from the bottom part then they will have to begin from top as website’s listing update will force them and have to go through unwanted filter listing to reach back to where they were. Also, when users are accessing these filters, they have to remember lot of things as they scroll down, because they cannot see in one go what type of filter are available as shown in Figure 2. It is inefficient to use and I also believe that, it increases the cognitive load. 

Heuristics violated are as follows:

•  Heuristic #7 – Flexibility and efficiency of use                

Figure 2. MakeMyTrip Flight Listing Page

Recommendation:

• According to me, filters can be added horizontally exactly below search bar and above flight listing. That way users will be able to access filters efficiently. There will not be any issue regarding scrolling up and down whenever webpage gets updated as per filter selection.
• Filters can be categorized, grouped, and can be presented as drop-down menu. Users will be able to see and use whatever the filters are provided in one go.
• If we do not want to make changes to existing design then we can keep “Apply” button at the end of filters as well as at top part of page so after selecting filters users can click on “Apply” button, then only listing will be updated.

 

2.    System fails to show the amount to pay status.

If users select “Yes”, to the insurance(Figure 4), to see how much they’d have to pay, users have to scroll up all the way back to the top to see the final amount(Figure 3). Even, when they remove default opt-in the “good cause” amount, they have to scroll up to see it in their invoice breakdown. The interface fails to show the user, how the changes made affected the overall amount they will have to pay. 

Heuristics violated are as follows:

• Heuristic #1 – Visibility of system status
• Heuristic #7 – Flexibility and efficiency of use    

Figure 3. Review Flight Booking Page(Top portion)

Figure 4. Review Flight Booking Page(Bottom portion)

Recommendation:

• This issue can be solved by giving instant feedback to users that can keep users updated on their current amount to pay. I suggest keeping the invoice part of the web page stable and the rest of the part movable so that users can stay updated of the status of their total amount to pay whenever they make any purchase or anything else. This will decrease the work of constantly scrolling up and down and increase the flexibility as well as the efficiency of the current system.

 

3.    Ambiguous error.

There was an issue loading the review booking page for the flight I already choose to book, but system gave an error something like this “No flights found on this route for the requested date” as highlighted in Figure 5. That made me think, did not I already choose the flight? and I was expecting to review my chosen flight, its rules for cancellation, timing, etc. This given error is so unacceptable, it can confuse the user by giving such system status and the user might not be able to get correct information.

Users can start using another websites as well because no proper guidance is available. So, a confused person might just leave the website and look for another source.

Heuristics violated are as follows:

• Heuristic #1 – Visibility of system status
• Heuristic #9 – Help users recognize, diagnose, and recover from errors
• Heuristic #10 – Help and documentation
   

Figure 5. Review Flight Booking Page

Recommendation:

• I think the proper error is required suggesting the reason for not able to show the review of booking. Also, solution should be given along with the error. The solution can be some documentation, help , or something that can guide users to complete their goal.

4.   Incompetent listing of rooms.

The way rooms of any selected hotels are presented is very incompetent. Basically, it is forcing users to remember a lot of things. Suppose users need to select a room that offers free Wi-Fi, so users have to scroll down and analyze these things by themselves only.

Given list of rooms can make users frustrated as it is not helpful to choose the room as per the user’s requirements and it seems to increase cognitive load because users have to scroll through all the unwanted information even if they are exploring options they need. In Figure 6, the room listing is shown.

Heuristics violated are as follows:

• Heuristic #7 – Flexibility and efficiency of use  
• Heuristic #8 – Aesthetic and minimalist design

Figure 6.  Room Listing during Hotel Booking 

Recommendation:

• There can be listed as per the facilities, the number of people, price, size of the room, etc. For that, we can arrange drop-down menus, filters which can help users with sorting and list out rooms as per their requirements.
• Also, minimize option can be added for each room information block that is listed so that users can minimize options they did not like.

 

5.   Inconsistent system status.

Hotel booking does not show proper system status whereas during flight booking proper status was given. The page has the heading “Review Hotel Booking” as shown in Figure 7, but it also takes user details as well as it contains a payment option too. Users might feel overwhelmed and they cannot know from the start what information can be found on this page, they have to scroll down till the end of the web page to get proper knowledge of information available because too much information is given on a single page and heading of the webpage is not entirely correct.

Another problem is that for the same website it is inconsistent to have different designs for flight booking and hotel booking because it feels like we are using different website. Flight booking does every task(review of booking, user details, payment, etc.) separately unlike hotel booking. 

Heuristics violated are as follows:

• Heuristic #1 – Visibility of system status
• Heuristic #4 – Consistency and standards
• Heuristic #7 – Flexibility and efficiency of use  
• Heuristic #8 – Aesthetic and minimalist design

Figure 7. Review Hotel Booking Page(Top portion)

   Figure 8. Review Hotel Booking Page(Bottom portion)

Recommendation:

• I suggest that tasks like review booking, user details, and payment can be given in a separate webpage with status scale is given on top that shows the status of completed tasks and upcoming tasks as per available tasks on each web page. That way status issue will be solved as well as users will not feel overwhelmed. It can help users to know what process is completed and what they will have to complete in further process. 

 

Conclusion 

MakeMytrip has sophisticated features, but those features should not compromise the efficiency, learnability, and easiness of the system. It will not make sense to have features that cannot be utilized by the users due to its complexity. In addition, implementing a proper feedback mechanism can guide users, prevent errors, and give them a sense of the system's status. Basically, as per the issues we discovered, it is essential to create something that has a good design, solid efficiency, robust feedback mechanism, straightforward instructions, and that all should lead to enhanced usability and learnability of the system. The recommended changes will be helpful to make the system more efficient, learnable, and adaptive.