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].

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.

 

 

Usability Evaluation of AirIndia Website

 By: Archa Jain

 Introduction

The website "Airindia.in" is one such system that helps users to book flight tickets in advance over the internet using online payment methods from anywhere in the world. When purchasing a flight ticket, it offers users a variety of options, including the ability to choose between various ticket classes, such as economy, business, and first-class, as well as the ability to choose their preferred seat for their desired flight. This removes the need for the customer to purchase flight tickets in person at the airport. User values feature, but that is not the only thing they seek in software. The usability of the software is another such aspect that the user takes into account. The usability of an application is determined by its user interface, in addition to its functionality. If the software is difficult to use, it can lead to a poor user interface and applications that no one wants to use. 

In this blog, I will discuss some of the major usability problems discovered using various methodologies like heuristic evaluation using Jakob Neilson’s 1994 heuristics and think-aloud user testing of the Air India website. It also mentions the heuristics that are broken in those issues. Furthermore, it suggests some fixes for those issues that developers can use to make the software more usable. Then finally all the findings and the result are concluded.

Usability Issues and Recommendations

1.  Login page does not work and does not even provide any feedback or error message.

To login into a user account, the user needs to click on the login hyperlink on the home page. For logging in to an account, a user needs to fill in the registered email address and the password. Along with that, the user is required to fill in the captcha and click on the login button. On clicking the login button, only the page refreshes and the user does not get logged in even if the information provided is correct as shown in figure 1. Also, it does not provide any kind of feedback or any kind of error message about what is wrong.

This issue violates the following heuristics:

§  Heuristic #1 –Visibility of system status

§  Heuristic #5 –Error Prevention

§  Heuristic #9 – Help users recognize, diagnose, and recover from errors.

 

Figure 1: Screenshot of the user performing Login.

Recommendations 

There are two things that can be done to resolve this problem. 

• One involves resolving the issue by improving the system to accept the login details and allowing the user to login into the website. 

• Other involves making a clear error message if any fault occurs and with a relevant solution on how to proceed further from that specific issue.

 

    2.     Unclear input fields in enrolling/user registration form.

To create a new user account, there exist two options, either click on the login hyperlink on the home page and then click “New Users – Register” or by directly clicking on the “Enroll” hyperlink on the home page to access the registration form to create an account. While creating an account, the user needs to fill a huge form with all of them set as mandatory fields. One of the fields is “Name on Card” to fill as shown in figure 2, which does not specify any information on which card they are referring to. This kind of field made users very confused about whether to put a full name or just first name as some users mentioned they had some cards with full name on them and some with just first name.

This issue violates the following heuristics:

§   Heuristic #2 – Match between system and real world

 

Figure 2: Registration field on the Enroll page.

Recommendations

The solution has three parts for this problem. 

• First one involves showing the descriptive or clearer label for the field so that user can clearly understand about which card the system is asking for. 

• Second one includes a place holder with an example of the text that user needs to enter in the field. 

• Last but not the least, a validation to check the value is not garbage and it matches the username that has been entered by user in other fields like first name, middle name, and last name. Also, show the error message if the validation fails with the description of what the exact error is and what user needs to change in it to make it correct. 

3. Country selection dropdown does not perform any action.

If a user wants to change the currency of the tickets on the website, then he needs to change the country from the country dropdown list on the homepage as shown in figure 3. But when the user changes the country to the UK to get the ticket prices in pounds, either the page just refreshes or sometimes it navigates to the error page as displayed in figure 4. There is no feedback provided to the user when the page refreshes. If the user continues to search the flights, he/she does not see the prices in the expected currency.

This issue violates the following heuristics:

§  Heuristic #1 – Visibility of system status

§  Heuristic #5 –Error Prevention

§  Heuristic #9 – Help users recognize, diagnose, and recover from errors

 

Figure 3: Country dropdown  menu on home page

Figure 4: Error message on changing the country.

Recommendations

There can be 2 parts to the solution for this problem. 

• First is to show a message with the name of the country it is changed to and the name of the country it is changed from when the country changes, along with displaying correct country flag as it is a part of their design. 

• Other part is to display the prices of the flight tickets in the currency of the selected country when user searches for any flight. 

 

4.  The Navigation menu covers the entire screen.

The navigation menu displayed on the home page helps to provide relevant paths or links to the users for easier accessibility. But it also hinders the entire aesthetics of the website as well by covering the whole display of the screen as displayed in figure 5. Also, there is excessive information displayed in the dropdown along with wastage of a lot of space (highlighted in the figure) of the navigation menu which is not mandatory to be shown there. Also, the navigation menu contains huge images (highlighted in the figure) which should not be included in the menu structure.

This issue violates the following heuristics:

§  Heuristic #4 – Consistency and standards

§  Heuristic #8 – Aesthetic and minimalist design

 

Figure 5: Navigation menu on the home page

Recommendations

There can be a solution for this problem, which involves reducing the content in the navigation menu. Only display relevant links in the list without additional information, irrelevant images, and excessive space. Also, the width and height of the navigation menu should also be minimized or adjusted as per the content so that it should not cover the entire screen.

5.       Flexible dates radio button does not perform any action.

When the user searches for a flight, the user needs to fill out some of the specification related to the flight on the home page like from (the place from where you want to take a flight), to (the place you want to go), and some other details as well as shown in figure 6. There is one radio button on the form labeled as flexible dates which are selected by default (highlighted in the figure). When the user clicks on the flexible dates radio button, nothing happens. It does not get unselected nor even shown as disabled. Also, no error message or feedback is provided to the user when it is clicked.

This issue violates the following heuristics:

§  Heuristic #1 – Visibility of system status

 

Figure 6: Flexible dates radio button in the booking area of the home page

Recommendations

One such a solution for this problem can be done by making the flexible dates as a checkbox instead of a radio button. As there can be two options in this case the user wants to search with flexible dates, and he does not. For a field like that, a radio button should not be used. Radio buttons are more useful in case of multiple mutually exclusive options. Also, the radio button is unselected only when another mutually exclusive option is selected.

 Conclusions

The website "AirIndia.in" is used by millions of people all over the world. When anyone wants to fly, they connect to this system to book a ticket for their preferred flight. However, after conducting the heuristic evaluation and think-aloud user testing, it was discovered that the application has several issues that can impede the user experience. There were several problems on the home page itself, leading to the user's decision not to use the website based on their first impression. As a result, with the explanation of the problem in the above section, some suggestions for resolving certain issues have been given to make the job easier. To conclude, several other improvements are needed to make the “AirIndia.in” website more user-friendly and accessible.

 

References

1. Air India Ltd, Air India, [Online]. Available: http://www.airindia.in/. [Accessed 15 February 2021]

2. J. Nielson, "10 Usability Heuristics for User Interface Design," Nielsen Norman Group, 24 04 1994. [Online]. Available: https://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 12 02 2021].

3. J. Nielson, "How to Conduct a Heuristic Evaluation," Nielsen Norman Group, 1 11 1994. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/. [Accessed 12 02 2021]