Usability Evaluation & Redesign for the groceries delivery service “Gorillas”
I have been wanting to use the Gorillas App on my iPhone since a long long time ago. I believe it was at the beginning of the whole pandemic when I first heard about it and I still remember being totally excited about the idea and telling myself and friends: “Why didn’t I think about it before?”.
Gorillas is a service that lets you order groceries and other household items on-demand with an average delivery time of only 10 minutes.
As a Peruvian living in Germany, shopping for “small” things spontaneously has always been a subject of worry. Being used to going to a “bodega”, two minutes from my home or pretty much anywhere to get whatever I needed, it was very hard for me to have to deal with only having supermarkets or very few shops close to home that I could go to, with very limited opening times.
So after finishing my UX/UI Bootcamp and hoping it’s not too late, I decided to finally give the super successful app a try and use it for a while to be able to analyze it a little deeper and put my new UX skills to the test.
This case study starts with a Usability Heuristics Evaluation based on the 10 Heuristics developed by the Nielsen Norman Group founder. I believe it is super interesting and rich for the next steps of this project to have an overview of those points that I as a user and UX designer think could be better in the app.
From there on, I will conduct user research to complement my findings, see how many of those problems are also perceived by others, and have a better idea of who is actually using the app; how, when, and why they are doing it.
The project will aim to redesign some of the main real pain points that those users are having in their interaction with the app. For that, I will bring my research findings together to conduct a series of usability tests with the right users and tasks. This will help me find those points and make sense of what to improve in the app.
To keep it a little shorter, the case will be divided into parts. This is part one.
*The evaluation was made before the last app update, which includes more “summer-like” pictures and a new product category “Frisch & Fertig” (fresh & ready-to-eat).
Heuristic evaluation of the Gorillas mobile app. based on the heuristics developed by the founder of the consulting firm Nielsen Norman Group.
1. Visibility of system status
Heuristic: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Adding/deleting an item to/from the cart
When a product is added to the shopping cart, a blue dot on the top-right side of the cart icon appears, adding the number of items selected. Along with this visual interaction, a very short vibration on the device accompanies each adding or product removal.
Nevertheless, the mentioned circle badge over the black navbar looks very subtle and difficult to notice due to the contrast of these two colors and the font size of the number of items. This could affect accessibility, for example, for users who use their phones with low brightness.
Also considering that the shopping cart icon doesn’t have a filled state - like the rest of the navbar icons when they are active. What happens is that once in the shopping cart, the user won’t see the navbar anymore. The rest of the time, this icon will then look inactive, except for the circle badge which should make the difference and bring the focus to this important, center-placed icon.
Quantity and Price for “X” Products
Added to that, when users add or remove an item, they are not informed about the actual quantity they will be purchasing, nor how much that number of items will cost.
For example, 250g of Wok Nudeln cost 1.79EUR. If the user was really into those and wanted to get it x4 times, they won’t know how much that sums up in grams nor price; and that even when going to the shopping cart icon where the item will still be shown as an individual one, with its individual gr. and price.
The user can only mentally calculate or see how the whole sum changes, which adds to the user’s cognitive load and can be even more annoying if they had a long list of products in their cart.
“Bald zurück” products
Shows items that are not available and gives no option for the user to actually be informed when this situation will change, which can get the users frustrated to even be shown those items they can’t buy in the present.
Order status
In the User menu, inside of “Bestellungen” (orders), the user is informed about every step, from when the order is received, approved, and when it will be delivered (estimate), nevertheless these points’ font is too small and thin, affecting the readability.
2. Match between system and the real world
Heuristic: The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
Searching for products
Even though the names used for the product categories are very direct and seem to follow a familiar language to the users, the search feature shows a series of “Beliebte Suchen” (popular searches) tags followed by an empty screen which seems rather impersonal and cold; no other filters are given as option and considering the case of a new user who has already been searching for products, it results impersonal.
Dialogues in pop-ups
Communication seems short and direct, but on some occasions, it might sound a little impersonal. For example, when the user clicks on “Code eingeben”(introduce code), a pop-up with the text “Enter promo code below” appears. This short text sounds robotic and, having in mind that almost all text in the app is in German, having this piece of info in English could give the feeling that someone might’ve just forgotten to translate it.
Same case with the “Schlage Produkte vor” (recommend products), button that in the shopping cart screen should communicate the user to help the app by recommending products they’d like to see in their stock. After clicking on it , a pop up with the text (this time in German) : “Sei so nett und nenne uns alle Produkte welche du gerne in deiner GorillasApp sehen würdest”. Although this is a much nicer and friendlier way of asking for actual help, the text is very small and has no space between lines making it difficult to read.
3. User control and freedom
Heuristic: Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Going back to the home screen
When selecting a product category, in this case, “Vegan”, which requires some scrolling, the user is directed to the list of products of the category but there’s no back button to return to the previous screen where the categories are visually displayed. The user has to now choose between a horizontal scrolling list of categories with only text at the top of the screen or click again on the home nav icon (which will bring them back to the top of the home screen, losing their screen position).
Undo deleting an item completely
To remove an item from the shopping cart, the user has to and can only click on the minus icon.
If there were 3 items of the same product, the user would have to click 3 times on the minus to delete the product completely. Besides, the user never gets to zero as after reaching 1 and clicking one more time on the minus, the item disappears quickly, not giving an option to undo the action or, in any case, save the item for another occasion.
Placing order button
Once in the checkout and to continue with the order, there’s only one button with the text “Zahlungspflichtig bestellen” (place order), which doesn't really inform the user what the next step will be (choosing a payment method before making the purchase).
4. Consistency and standards
Heuristic: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Conventional patterns & functional consistency in product categories
On the home screen, the categories are shown in a card layout.
Once one is clicked, the user is directed to a new screen where the list of all categories is now located in a thin row, on the very top to be scrolled horizontally, followed by another thin row of subcategories with very small text. This results in difficult-to-click-on elements placed in an unconventional layout, that looks heavy and represents a pain due to the necessary horizontal scrolling.
Situated on the same screen, the same list of subcategories is also included inside of a fixed floating menu list icon on the bottom right corner. Even if this element is trying to provide the user with another option to find a product category, it might be confusing to understand what is exactly inside, and difficult to spot due to the black color and the lack of depth of the button itself.
Moving from category to category
All products of one category are contained in one page, which means, each time a user clicks on one subcategory from the top row or the bottom menu list icon, they will be quickly “moved” up or down the screen where the product is situated, action that might result annoying to the eyes.
Text buttons & links
Inside the app, there are different text buttons and links that have the same color and similar appearance which might confuse the user.
First, we find the link “Mehr info” (more info) on each product card, which is blue, thin, underlined, and very small.
In the shopping cart screen, we also find a text button “Schlage Produkte vor”(recommend products), with the same blue color, this time bolder and slightly bigger. Clicking this button opens up a pop up which only then explains to the user what its function is — inviting them to suggest products they would like to find in the app. As for the location of this button in the app, I can’t help to ask myself if shouldn’t it be somewhere else, maybe the search screen would result more logical for the users.
Until now, we have seen a link, blue & underlined, and a text button, blue & bolder, but if we continue to the checkout screen, we find ourselves with a “code eingeben”(introduce code) text button, blue, bold and underlined; in the bottom of the screen the terms and conditions links, that are blue, bold and not underlined, and last but not least, we also find a list of delivery specifications inside of a white container at the top of the screen.
Each specification is clickable and works as a checkbox item but is neither blue nor bold, and looks just like plain text. This might result confusing, also because there’s not so much space between each line of text making it look even less clickable and challenging for users with bigger hands & fingers to do so.
The user has to guess and try to click on one to see what happens: a check icon on the right turns blue when a button is selected.
There's no clear difference in appearance between text buttons and links, also, the CTA buttons keep the same classical “info” blue color as all of them, which could affect the hierarchy.
5. Error prevention
Heuristic: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Empty cart
In the shopping cart menu, on the top right part of the screen, the user finds a “leeren” (empty cart) button which prompts a pop-up asking the user to confirm deleting all items from the basket. This button is difficult to see, as it’s unconventionally positioned on the top right corner, right next to the shopping cart header, one the same color, typography, and similar size.
The dialogue in the pop-up is again very small and has very little line space.
6. Recognition rather than recall
Heuristic: Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Deleting & saving products from shopping cart to favorites
When in the shopping cart screen, the user can no longer click on an item to go back to that item's screen. From this point, they can only delete the product completely from the cart or reduce/add more items to it. In the case a user doesn’t want to purchase that item anymore but would like to save it for later, they won’t be able to do it from here.
Since they can’t go to the products screen clicking on it anymore, they would have to delete the product from the cart, go back to the previous screen- to be able to visualize the bottom nav bar, which is not shown on the shopping cart page — to go to the home screen and start the surfing/searching products again or go to the search page and type the name product directly (remember the search feature doesn't offer a recently searched option) and once found, inside of the product’s screen, click on the heart icon on the right upper corner to favorite it.
Name at the door for your present order
This is a very tricky, personal experience I encountered at surfing, observing, and finally using the app for the very first time.
At the beginning of using the app, I chose to log in with Google, had to introduce a name & phone. Adding a last name was optional.
As the next step on the home screen, I had to introduce an address, which I could type or drag (“pin”) directly on a map. When done so, a pop-up with the exact address was shown, followed by a “zusätzliche Info” (extra info) text box, which was only optional to fill.
Some possible extra info inputs are suggested such as “Gebäude”(“building”), “Wohnung”(apartment), “Name an der Tür”(name at the door), but as I said this field was optional.
In my case, living in Germany and on my first time using the app, I put my last name here, as it’s at my building’s door and it’s the only way I normally receive packages.
Time passed. I checked the variety of products they had, added and deleted some others until after a while I finally knew what I was buying and made the order.
By then and from the user menu, under “Bestellungen” I could see the status of my order, starting with the address I had introduced, but my last name was nowhere to be seen.
I started to get anxious since the thought of the poor driver under the rain, not knowing which bell to ring, was killing me. I couldn’t 100% remember if I had introduced it, I supposed I had, I couldn’t believe the app would let me order without a complete address, but after looking everywhere I just couldn’t find it.
So I went into my user menu and was surprised to see the “Einstellungen”(settings) section, which also has a “Einstellungen” (settings) option, so I supposed this meant “private info” in this case, and I wasn’t wrong. I clicked and was directed to the form where I had already introduced my name, phone, and email. My last name was empty.
My anxiety was reaching the roof and I was thinking about asking for help through customer service when suddenly the bell rang and thank god it was the driver! I was relieved but also confused. After checking my products, I went on the app one last time and finally found it: in the user menu, under “Einstellungen” → “Adressen”, I saw I indeed had added that “extra info” — which at least in Berlin, Germany results to be very important.
I just couldn’t believe how long it took me to find it and how silly I was. From there I went back to the home screen and saw I could also see my last name when clicking into the big text bar that shows my last used address. It was the same “Adressen” screen that had taken me so long to find. And it was right there on the home screen. My memory is very bad I thought. Or why not just showing the last name used for the determined order, directly on the order status too?.
7. Flexibility and efficiency of use
Heuristic: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Personalisation, “Häufig bestellt”
After making a purchase, the search feature does show the user a list of products they had previously bought. The app also shows a button “Erneut bestellen”(order again) once an order has been made, so the user can order past complete purchases they have made; this personalization is only visible on the user menu under “Bestellungen”(orders), and not seen in the home or the search screen.
Also, as mentioned before, the “Häufig bestellt”(frequently ordered) section only appears under the search bar after the user has made a purchase, but before that, when new users have only searched for products, they don’t get any guide that could help them to remember products they might have been interested in, what could save time and finally bring them to do faster purchases, the main point of the app. Same as with users who have already made purchases, since they only see products they bought, but not searched.
8. Aesthetic and minimalist design
Heuristic: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Dialogues, titles, and descriptions
Overall the dialogues and texts in the app are very short, direct both in the looks and type of language used. They also go in synchrony with the looks of the app, which is very minimal and has a neutral range of colors.
Although some of the headings might be too small to read, for example, the categories’ title on the home screen and on each product’s card, and some captions such as the info about how the drives get 100% of the selected tip in the checkout screen.
Some other small inconsistencies around dialogues can be found in the “Gutschein” and “Schlage Produkte vor” pop-ups.
9. Help users recognize, diagnose, and recover from errors
Heuristic: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
“Einstellungen” in “Einstellungen”
During my use of the app I couldn’t encounter any error screens but what I could observe from the settings section in the user menu is that there’s (as in the whole app) very little explanatory text that could guide a possible confused user.
As mentioned before, there is a “Einstellungen” (settings) section in the user menu, which also includes a “Einstellungen” option, where the personal info of the user is located and can be edited. This is obviously confusing and might take time for the user to access or edit their personal info if needed.
Following this, there is a “Gespeicherte Kreditkarten” (saved cards) option. The app allows two types of payment methods: PayPal and credit card. When the user is new in the app, has not made any purchase, or has made one but paid with PayPal, the “Gespeicherte Kreditkarten” screen will be empty and show the text “No credit cards. Please add a card to pay”. And that is it. No form or button takes the user to actually do what they are suggested to. It seems that adding a card can be done at the placing of an order, but the user is not told that on this screen, or invited to make a purchase that will eventually lead them to it.
10. Help and documentation
Heuristic: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
FAQ
The app offers a vast list of FAQs found in the user menu, in the “Hilfe & Feedback” section, together with a “Customer Service” option which directly opens a support chat once clicked.
After clicking the FAQ link, the user is redirected to a page that results to be the support portal page of Gorillas. There, under the title “Knowledge base”, they can click on a list of predetermined questions in different languages or type their own. What might create confusion — besides the odd title- is that there are also other buttons such as “Login” or “Sign Up”, among others, what might make the user feel they have landed in the wrong place, lost or not even in the app anymore, as if the information provided there was not meant or written for them, as it is not presented in a user-friendly manner.
Another example of this is how all groups of questions in a determined language are listed one after the other, meaning the user sees the whole list of questions in all languages and has to scroll down to look for theirs, or/until realizing the presence of a subtle search bar, where they can also type what they are looking for.
Although the FAQs list seems very complete, it might take some time for the user to find the actual option in the app, as it is located in the user menu (the last one on the right of the nav). No FAQ link is shown anywhere else, making it not so easy to reach.
Have you noticed any other problem? Let me know in a comment and thanks for getting this far!
