Careem banned me from the app. So, I analysed their food flow to join their product team 💚
Humans love stories so I’m going to present this flow analysis in the form of a story!
Note — I made the analysis of the food feature based on my limited understanding. I’m sure the Careem team has made decisions based on factors that I’m not even aware of.
What to expect from this article? 🤔
This is going to be one hell of an article in terms of quantity. I’m not sure about in terms of quality. Maybe you can decide that if you do manage to reach the end of the article and oh, feel free to give some feedback!
I’ve broken down this article into multiple sections and highlighted the key terms so that you can have a better reading experience.
Think of me as an ambitious guy who’s just analysing this feature to improve his skills. With that being said, Let’s start this ride 😎
Introduction — What is Careem?
Careem is a Dubai-based super app where you can book a ride, order food, shop, make payments,become a captain (cab driver).
Onboarding Screen
- After tapping on the app, I’m on this screen. I don’t quite understand what the app is about by looking at the screen. ( I’m not sure what I’m supposed to interpret from a person holding a pot)
- In Careems case, they have a lot of features so designing an onboarding screen (or screens) can be tricky!
- I got a bit confused on what to do next so I decided to go for a walk & that’s when I found my inspiration 😍
- By looking at the above image, I can easily understand that Careem is about cars, food, shops & pay. If Careem had an onboarding screen similar to the above image, then users can have a better understanding of what the app is about.
- Let’s see how other apps have designed their onboarding screens.
- By looking at these onboarding screens, the users can easily understand what the app is about or what to expect from the app.
Should the user sign up first or later?
- In the first image, I like the fact that there are 3 options to login that is via mobile number or facebook or apple. This is the similar model which I observed in other e-commerce apps. Although I’m not sure why there’s no option to login via email.
- Even after trying to login with apple, I’m still supposed to my verify my mobile number. This just adds an extra step to the flow. Based on this, What is the need for “Continue with Apple”?
- What if the user does not use facebook? What if the user does not want to login via apple? What if the user is on airplane mode but has wifi? Why should there be an option to login via email or google?
- If the user has an issue with their sim card or maybe if it’s taking time for the user to get the verification code (due to some bugs or network issues) then why not provide an option to login via email?
- From the business perspective, It makes sense for careem to put continue with mobile numbers as the first option because it makes it easy for careem to register the users data and careem captains can use this data (mobile number) to call the user to pickup from the required location
Sign up Experience
- In the first image, I can see the UAE flag in the text field. When I tap on the text field, It takes me to a new screen (second image) and now I’m confused because now I can see the indian flag.
- Why am I seeing the Indian flag and not the UAE flag (especially when I saw the UAE flag in the previous screen?)
- I tapped on the indian flag to correct the error and that’s when I got even more confused when the screen said my current location is in India (third screen) when I’m actually in UAE.
- To find out if this was a bug or not, I told my friends about it and one of them suggested maybe it’s because my app store location was set to India.
- I decided to check my app store settings and it turns out..
- My friend was right. My location was set to India. Once I changed it back to UAE, it solved the problem.
- My question is why should the user think about the app store location?
- Currently, Careem suggests the users location based on the app store location.
- What if Careem could suggest the users location based on the users sim or the users location?
Continuation of the Signup Experience
- In the first image, even though the country code +971 is mentioned, why does the suggestion say I’ve to type +971 again? I’m not used to seeing this in other apps.
- I wanted to see what would happen if I type my mobile number without adding the country code again and wanted to see what would happen if I do try to do it using careems suggested way.
- I tried out both the ways and both of them work (second & third image). In my opinion, it would better to stick to the standard mode (+971 050 123 8633) instead of ( +971 9710501238633) in order to avoid confusion and the fact that users are familiar with the pattern used in other apps.
- Also in the suggested number, Careem could try spacing out the suggested number as users usually remember number by pattern. ( Eg — +971501234567 is harder to comprehend than +971 50 123 4567)
- In the fourth image, I just wanted to see what would happen if I intentionally typed the wrong number. the result was the CTA got disabled due to which I couldn’t tap on continue.
- What if the user typed a wrong number by accident? Maybe careem could have told the user what went wrong. (Eg — “This is an incorrect number”) Now the user knows that something went wrong. In the current screen, the user has no clue what went wrong. (It’s always better to provide clarity to the user)
- Let’s see how other apps have designed their mobile verification screens!
- Before I continue with the signup experience, I was curious to see what would happen if the user tried to use the app in the offline mode
Bonus section — Offline mode
- As a designer I know that the CTA doesn’t work because I’m not connected to wifi or mobile data. But how would the user know?
- From the users perspective, what does unknown mean?
- What if the user unintentionally tried to login to careem without wifi or mobile data? How would the user feel when the user sees unkown?
- It would be much better if Careem could explain what’s the issue instead of unknown.
- Eg — “ No internet connection” sounds better than “Unknown”. At least here the user knows what the problem is.
Continuation of the signup experience
- I tried to login and it says I’m blocked. What do you mean my account is blocked for signup?
- The last time I used the app, I was in school. Now I’m an engineering graduate who is broke and jobless 😢
- Initially this felt a bit demotivating as I was looking forward to reviewing the food flow of the app and now my account seems to be blocked 🥲
- I decide to send a mail to the customer support team and reached out to careems twitter account as Careem UAE is very active on twitter.
- I was really happy with the way how the careems twitter admin messaged me. They were super kind and friendly.
- I felt the same way when careems customer support called me. They were supportive and told me not to worry.
- Now you might be wondering why my account was blocked for signup. I’ll tell you why.
- Back in school, My friends & I found a loophole in the careem app which allowed me to get unlimited cab rides for free. Yes, you heard that right.
- At that time, I truly felt like a king. Now I don’t feel very good. I won’t be telling you the loophole and it does not work anymore.
- When they told me my account was permanently blocked, It reminded me of the famous quote — “Karma is a bitch.”
- In my case, Karma is a goddamn blocked account.
- Being a rebel myself, This got me even more excited, hyped & motivated to review careems food flow.
- So now, I decided to ask my younger brother for his phone so I could review the food flow. He has an android phone. (I was using an Iphone earlier).
Using Careem in an Android device
- My first thought was Why is the android version in dark mode while the IOS version in light mode?
- I decided to ignore this and move ahead as I felt my main focus was just to review the food flow.
- Logging via Whatsapp is new. I’m not used to this. What I’m used to seeing is logging in via facebook, email, mobile number, etc as that’s the normal pattern in other apps.
- Why is the login flow different for IOS & Android? Isn’t it supposed to be the same?
- Anyhoo, I finally logged on the app.
UX Analysis of the food flow
- I can see that careem has a lot of features. I’m just going to talk about the food flow.
Banners Section Part 1
- The first 3 banners are similar. They’re just offers in the order of 60% to 40% to 20%. On top of this there’s an offers icon below the banners section and another offers icon in the bottom nav which makes “offers” seem redundant.
- One observation I had was When I clicked the first banner (upto 60% off), I could see restaurants with 10%, 20%, 30%, 40%, 50% & 60% off but I could not see those restaurants which were mentioned in the second banner (40% off) in the first card
- Lets’s talk about the donation banner (check the image below)
- “AED 5 donated with every order.” This is a good approach to entice users to buy food from these restaurants because they’ll get to buy food and give donations (Win-win situation).
- When you help others, you feel good.
- One small tiny observation I have is there’s no full stop after the word difference.
- I wanted to see how the user would feel when the user clicks on the AED 5 banner.
- So I decided to click on the AED 5 banner with the intention to eat food & to donate money.
- After clicking on the AED 5 banner, I can see restaurants with the expected time, ratings, price range & type of food. However I don’t see anything regarding the donation. This seems a bit fishy. I decided to give the benefit of the doubt thinking that I would see some info regarding the donation later in the flow.
- NOTE — I won’t be talking about menu, ratings, price range info, basket, checkout, UI, etc here as I’m only focused on the donation part here. I will be covering those later in this article. (I want to take it section by section)
- I decided to click on Bak Bak Chicken as I find the name hilarious (second image).
- Even after clicking the restaurant, I still can’t see anything regarding the donation. Maybe I’ll see this after adding an item?
- I decided to add a chicken sandwich to my basket to check if there’s any info regarding my donation.
- In the checkout screen (second & third image), I can see the discount, delivery fee, service fee & the money I saved but I don’t see anything regarding the donation in the final checkout flow.
- As a user, how do I know that there’s actually going to be any donation? Is Careem just doing this to increase it’s revenue?
- It would have been much better if the checkout screen showed the donation of AED 5 in the payment summary as it would remind the user of his/her good deed.
- I’m curious to see what the confirmation screen after ordering my meal would look like. Right now I don’t have money, so I’m not going to order.
- Ideally the success screen after ordering from the donation banner should be different from the success screen after ordering normally because here the user donated 5 dirhams. At least, the copywriting should be different.
Now, Let’s talk about the remaining banners.
- In the first image, “Win AED 500 this halloween”. This seems exciting & enticing to the user but this banner does not mention exactly how to participate.
- It says “ Use code HALLOWEEN to enter the draw” What does this exactly mean? How would a new user understand this?
- I think the copywriting could be improved.
- Eg — “ Buy a meal using the code HALLOWEEN to enter the draw” or “Buy a meal using the code HALLOWEEN to win AED 500”
- In the second image, Why is the restaurant Shake Shack mentioned in the banner section? Did they pay Careem to represent their restaurant so they get more visibility and discoverability compared to other restaurants?
- Let’s move onto other sections in the app!
Search Feature
- When I typed the letter “k” in the search bar, I was expecting restaurants or meals starting with “K” but nothing came.
- When I searched “kf”, still nothing came. However when I searched for “Kf”, I got a search list of a few restaurants.
- I noticed something. In order to get any result, there has to be a minimum of 3 letters (hypothesis). I tried to experiment around this statement.
- In the third image, why is project pie pizza shown first and La paz second? What is the ordering of the restaurants based on? It’s clearly not in the alphabetical order. Why is La Paz Batchoy restaurant mentioned? (”Piz” is not involved)
- Why is Careem plus mentioned in the search feature? What value does the careem plus bring to the user when the user is searching for a restaurant?
- I understand from the business perspective that Careem wants to get more users to subscribe to Careem-Plus but what value does it bring to the user at this point of time when the user is searching?
- Maybe it would better to show users the benefits of careem-plus to the users (Maybe when it comes to the checkout screen) rather than just showing careem-plus in the search feature.
- In the search results, Almost every restaurant has careem-plus which makes it seem redundant and even lose it’s value. Pizza Hut captures my attention because it’s the only restaurant without the careem-plus icon.
- What about cases where the user only remembers the first letter of the restaurant? How can we improve the search experience for these cases?
- I decided to search for something random in order to see the error state.
Let’s compare the search experience & the search error state to that of Talabat!
Before we move onto the remaining features within the food flow, I would like to share some search feature inspiration from other apps!
Filter & Sort feature
- The legibility of the text especially in the filter options could be improved as it’s not clearly visible.
- In the first image below the search feature, Why is specific importance given to 30% off? Wouldn’t it better if it was just offers or limited-time offers? On what basis is the vegan option given first, keto second & Top rated third?
- In the second image, I can select the option 30% off, I can unselect either by selecting the tick box again or clear all.
- I like how when I tap on the box, the CTA gets activated.
- When I tap on clear all, it takes me back to the food screen.
- Based on the above point — What if I just want to clear my filter options so that I can use the filter options without going to the food screen?
- Talabat solves this problem. (Check out the below images)
Bonus section — I woke up at 4am by accident
- I woke up at 4 am by accident. My first thought was to hit the gym. But then I realised it was my rest day. I have this weird condition where once I wake up, it’s really hard for me to go back to sleep.
- So I decided to continue to do my review exercise as I was a bit obsessed.
- That’s when I found out about this closed restaurant feature.
- I can actually go through the restaurant menu even though the restaurant menu is closed. This allows me to check out the items and maybe even add it to my cart or basket.
- Talking about cart, where is the cart?? (I’ll talk more on this later in the article)
- I feel the UI could be improved but more on that later in this article.
Let’s take a break 😌
- Before we proceed ahead with the analysis, Let’s take a small break from the app & look at the reviews on play store & app store.
- I mainly decided to check the play store & app store reviews to check any pain points related to the food flow in Careem.
- Based on the reviews, The pain points are due to issues in UX mainly when it comes to order cancellation, Not informing users about changes in fee structure.
- Some of the pain points are due to internal factors such as communication issues between the restaurant & the captains, human errors (Confusion when it comes to delivery location)
- I was going through the play store reviews and I found someone interesting.
- Also while I was going through the reviews, I found another user named Cenk who faced the same issue as me. Glad I’m not the only one 😛
One more observation I had was when I spoke to the customer support team, they were super friendly and they acknowledged my concerns. Now compare that wonderful experience to the replies given by Careems team on play store. It’s just not as good as the real experience.
- Why should the user fill the form? Why should the user fill the form especially when the user has had a bad experience with careem?
- At this point, the user has no motivation to fill the form? How can we increase the motivation of the user to fill the form?
- Also the link isn’t even clickable. The user has to currently copy it & then paste it in the browser due to which the user has to do more work ( Remember the user already had a bad experience)
- How can we make the link more discoverable? (make it clickable)
- How can we make it easier for the user to fill the form?
- What would motivate the user to fill the form?
- Careem says “We truly apologise for the inconvenience.” But that does not mean anything.
- Imagine a situation where your friend keeps on making the same mistake and keeps on apologising for the same mistake. The sorry has no value. In my opinion, this is how the user felt in the above review.
- Anyhoo, as I noticed a few bugs when I was using the app. So I decided to go to the play store and check if I had to update the app.
- That’s when I saw…
- I saw that the UI of the app was in light mode while mine was in dark mode.
- I decided to go to my settings and that’s when I realized my brother prefers to use his phone in Dark mode.
- That’s when I had the thought — Shouldn’t Careem optimize for dark mode as well?
- I’ll be reviewing the rest of the flow in the default mode (light mode)
- The look & feel of the app is much better now 😍
- Contrast of the icons & texts is much better now compared to the dark mode.
Listing section
- Why is the offers section shown first & best selling second?
- Why is offers there on the bottom nav if it’s already there on the screen?
- From the business point of view, it makes sense to show offers as users want to make the most of their buck.
- Assumption — The reason why Careem’s design team put offers on the bottom nav bar is because in case the user missed out on the offers icon while scrolling, they call always select the offers in the bottom nav as it’s static.
- Currently I can see offers in the card section, the section below the card section & the bottom nav. (Doesn’t this make it redundant? )
- I will be talking more about “offers” later in this article.
- In this section why is the new addition on the bottom right?
- When I read from left to right, I can see burgers, lebanese, pizza, asian healthy and my brain automatically categorises them as types of food.
- However I’m a bit confused as I suddenly see new additions as it’s not a type of food. This breaks the flow. (Users read from left to right).
- Wouldn’t it be better if “new additions” was the third option & then you can show the remaining items as it is. In this case we will intentionally break the flow.
- Eg — The user would see offers, best selling, new additions and then types of food.
Section below listing section
- My initial thoughts are these are restaurants which are available in the app.
- I liked the fact that restaurants were showing in the decreasing order based on popularity.
- Why is there no heading for this section? It would be easier for users if there was a heading to gain clarity (more context). Eg- A section header — “Order from these popular restaurants”
- How would the user know that these restaurants are swipeable? How would users know that these restaurants can be tapped? (Initially I felt this was similar to the testimonial section in websites)
- When I look closely, I can see that all these restaurants logo are kept inside a white box with a certain amount of padding.
- Why is the Mcdonald’s not have the same design requirements like the other restaurants? Even Paul which has a black logo is put inside the white box?
- Shouldn’t the designs be consistent?
Spooky Treats 🎃
- I like how they introduced a spooky treats section as it’s time for Halloween 👻🎃
Picks for you section
- On what basis is Careem showing me Picks for you section?
- How does Careem know what I want?
- I’m using the app for the first time so I never ordered anything.
- Maybe it would be a good idea to show this section once the user has completed a few orders. Then it would make sense as the picks for you section will be based on previous orders. (I’ve observed this feature in zomato back in my college days)
- In Zomato, There used to be a section called Based on your previous orders, I just used to order the same thing always as I’m a mundane person & can stick to eating the same food for a very long time)
- Wish I had screenshots of that. Well this is a good reminder to take more screenshots when using certain apps.
The Pop-up
- As I was on the app for a long time. There was a pop-up which said “Load new content”
- Unforunately, I couldn’t take the screenshot for this screen 😥
- Before I tapped on the pop-up, I was a bit curious.
- What do you mean by content here? These are just restaurants.
- Why is Careem saying load new content on the food page? It would make more sense if this pop-up was shown on a social media app like Instagram, Facebook, Tiktok, etc
- I feel it would make more sense & the user would gain more clairity if the copywriting could be improved.
- Load new restaurants ✅
- Load new content ❌
- I don’t think there’s an actual need for this pop-up as our user is on this section to order food as easy & quick as possble.
- After tapping on the pop-up, the screen just refreshed & was showing the same restaurants as earlier.
Top 10 restaurants section
- In this screen, I initially thought the top 10 restaurants was based on the ratings but this assumption was proven wrong when I saw the second restaurant had a better rating score than the first restaurant.
- This section causes confusion to the user as there’s no context on what basis is the top 10 restaurants based on.
- Users read from left to right & top to bottom.
- Imagine the user is on this section. As the user sees the top 3 restaurants, the user has no look up & tap on show all which breaks the natural pattern (left to right & top to bottom) & causes a slight friction to the user.
- The section header changed from Top 10 restaurants to Popular which can cause confusion to the user.
- When I tap on show all, It takes me to a new page. Why can’t it just expand it on the same page like the previous section (listing section) (check the images below)
Sponsored section
- What does Sponsored exactly mean?
- How would the user know what sponsored means? Sponsored by whom? (There should be more context)
Fastest Delivery Section
- In this section, I feel the copywriting could be improved.
- It says “Fastest delivery”. Fastest indicates only one restaurant which is the fastest.
- In this section, How can Mcdonald’s & Hardees be the fastest?
- There should be only one like there’s only one GOAT (greatest of all time) when it comes to football — Lionel Messi
- Suggestion to improve the copywriting to something along the lines of “ Restaurants with quick deliveries” “Restaurants with fast captains”, etc
Bonus — Breakfast
- When I woke up at 8, My hand instantly went to the careem app and I clicked on the food flow where I saw something really pleasing 😍
- Careem changes its UI based on the time & they showed be breakfast options as it was time for me to have breakfast 😋
Analysing the restaurant banner
- I decide to click on breakfast option and wanted to analyse the restaurant banner.
- The first thing that captures my attention is the heart icon. I click on the heart Icon and the outline of the heart shape becomes green (Tim Hortons card).
- This is slightly confusing as the only difference between activated heart icon & the unactivated is the green outline.
- Wouldn’t it be better if instead of just the green outline, the entire shapes becomes green?
- This concept (heart icon becoming the whole color) is common in other apps like Spotify where when the user likes a song, the entire heart icon turns into green.
- Even in Instagram when the user likes a photo, the entire shape turns into the red color.
- Regarding the heart icon, I’m assuming that once I tap on it, It’ll be added to my favourites list.
- Now, How do I look for my favourites list?
- I spend some time looking for it and finally found it in the..
- I found it in the profile section.
- How would the user know about the fact that the favourites are in the profile section?
- How can we make it easier for users to discover the favourites feature?
- For starters, we can at least put the heart icon next to favourites so users can easily recognize it easily.
Regarding Careem-Plus in the restaurant banner
- Let’s talk about Careem-Plus . When I go through the screen, I can see that almost every restaurant has Careem-Plus which makes it redundant.
- From the business perspective, I understand that It’s important to get as many users as possible to subscribe to the subscription model but is this right moment to show about Careem-plus?
- What value does Careem-Plus bring to the user at this point of time?
- Is this the right place & time to show careem-plus to our users?
- How will the user know what Careem-plus is when the user sees it on the restaurant menu?
- How can we think of introducing Careem-Plus in a situation where the user can easily recognize the benefits of Careem-Plus (Eg — Maybe at the checkout section?)
- Doubt — Is there a different UI for users with Careem-plus ( Eg — I’ve observed users with spotify premium has a slightly different UI compared to the free version of the app)
- We don’t want keep showing Careem-plus to the users as they might get annoyed. Think of the annoying salesmen who approach you when you walk in shopping malls.
- Fun fact — I worked as a salesman 3 years back. Let’s hope I wasn’t annoying. I’ll talk about salesman experience some other day,, maybe I’ll write a new article 😛
- Just like how there’s an icon for the ratings (star), What if there was a “clock icon” to represent the time?
- User can understand information easier if there’s a visual icon attached to it rather than just the text.
Regarding Price range in the restaurant banner
- Now let’s talk about the price range.
- How does $$$ vs $$$ make sense? Price is a relative factor.
- AED 100 might seem cheap to person X while the same AED 100 might seem expensive to person Y.
- Should Careem even shoe the $$$ price range? What need does it exactly solve?
- Would it make sense to show the restaurant would cost AED 25 for one person? Would this be a better decision factor for the user?
- In my opinion, showing an approximate value of the price per person would be better than showing the vague price range because the former gives more clarity while the latter is ambiguous.
- Regarding the price range, I feel the contrast could be improved as it’s not exactly easy to find the color difference in the price ranges.
- I was curious to see why the dollar symbol is given here.
- Back in my college days when I used to order 2 dominoes cheese burst pizza using zomato to combat my last minute exam stress, I remember seeing the rupee symbol.
- The rupee symbol makes sense as it’s the currency symbol.
- So why do we have the dollar symbol in UAE?
- The rebel in me wanted to break the status quo and put the dirham symbol.
- That’s when it hit me, What this the dirham symbol look like?
- 16 years in UAE and I felt like I was seeing the symbol for the first time.
- That’s when I realised if Careem decided to show the dirham symbol instead of dollars, it would cause more confusion to the users as most of them may no be familiar with the symbol.
- US dollars has stayed past the course of time and almost everyone can recognize the US dollar symbol.
- I had to be objective here and come to the conclusion that it’s better to show US dollar symbol than the dirham symbol. At the end of the day, we are slaves to our users. (This is a good thing!)
- As I’m typing this, I can see the dollar symbol on my laptop keyboard. (Yes I need to clean my laptop 😳)
Restaurant observations
- For the Zaroob restaurant, I can see that there’s a “ 20% off first order” but this is easily recognizable as it matches with the background. (Reminds me of a chameleon)
- In the image above, I was a bit confused. Why is Zaroob mention in english & arabic while the other restaurants are mentioned only in english?
- Shouldn’t they have the same uniform language?
- My understanding — It made sense to me when I saw that Zaroob is a lebanese restaurant. It would be easier for an arab (who’s more comfortable reading arabic) to find out this restaurant as it’s in arabic. It would easily capture their attention as it’s in arabic.
- Those users who do not know how to read arabic can read the english version & hence this is why it’s written in both arabic & english.
- In the “All things Acai” card, I can see the 10% off but there are so many things capturing my attention that I don’t know where to look.
- If everything captures your attention, then nothing will capture your attention.
- How can we be more essential?
- How can we show only certain information that can have the biggest impact to our users?
Inspiration from other apps
Regarding the offers section
- Why are there 2 offers? What is the difference between the 2 offers? Is it the same? Is it different? How is it different?
- The only difference is when the user taps on the offers icon in the food screen, there’s an option to filter & sort whereas when the user taps on the offers section in the bottom navbar, there’s no filter & sort feature.
- Both these pages show the same restaurants.
When user taps on a restaurant
- Now we’ll be analysing what happens when the user clicks on a restaurant. In this case, I’m going to tap on Papa Murphy’s Pizza (first banner)
- The contrast of the icons on the top can be improved in comparison with background.
- Why is “Start a group order” the first thing the user sees after the name & type of the restaurant?
- Why is “Start a group order” shown first ahead of 50% off?
- Maybe the team designed this because most users who come onto the app chooses the “Start a group order”?
- I’m going to tap on start a group order.
- I like how the app tells me how the group order is live based on the visual indicator.
- Unfortunately I can’t use this as I don’t have any friends 🥺
Continuation of the analysis
- Why isn’t the 4.2 star in green color?
- In the previous screen, it was in green.
- It would be easier for the user to recognise if the rating star in the restaurant screen was in green color as it was of the same color in the previous screen.
- But this might cause an in issue in terms of UI with the other elements as all the elements are consistent currently.
- Let’s dive a bit deeper into ratings.
- Are these ratings clickable? Should it be clickable? What are the pros & cons if they are clickable?
- Users make decisions based on what the majority thinks (Social Proofing). At the end of the day, Humans are social creatures
- Instead of just showing the ratings which is just a number, why not show reviews by other users? This will help the users when it comes to making decisions on what food item to order or which restaurant to order from.
- The downside is if a certain restaurant has bad reviews, then it’s going to affect the restaurant as users are likely to order from a restaurant with high ratings than a restaurant with poor ratings.
- I found an app (Grubhub) which shows the reviews by users
Continuation of the analysis
- This is a good time to show Careem-Plus as the user can see the benefits (no delivery fee) & the user also might order food from this restaurant.
- Suggestion — Instead of just the Tick icon, what if there were different icons for each of the three points ( no delivery, 10% credit, Quick support) so that the users can understand those points easily (Users can understand easily when there’s a visual indicator shown along with the text)
- Going back to the page, I feel the copywriting could be tweaked or improved.
- Current — No delivery with Careem-Plus (1)
- Suggestion — Save AED 6.5 with Careem — Plus (2)
- Out of the above 2 sentences, which looks more enticing to the user?
- (1) makes the user understand that there’s no delivery fee (shows the benefits) while (2) shows the user what the user would save if the user had Careem-Plus. ( The user can see above that there’s a AED 6.5 delivery fee)
- One possible issue with the above suggestion (2) is that Careem will have to change the copywriting for each restaurant based on it’s delivery fee which might be a bit challenging considering the tech aspect of things.
Regarding the price
- I like how Careem has added a search feature within the restaurant menu which makes it easier for the user to search a specific item in the selected restaurant.
- Why is there a 50% off mentioned in each item? Why is there a 50% shown in the bottom nav? There’s a 50% off shown in the top (below the restaurant’s name)?
- Isn’t showing just the discounted price (before & after) enough? Is it really a need for showing the 50% off on each item?
- What is the use of showing the 50% off in the bottom nav? How is that going to help the user in making decisions especially when each item has the 50% offer shown.
- Let’s talk about the pricing of the individual item. I noticed something was off.
- Why is the after price shown first & the before price second? Why is the AFTER price shown ahead of the BEFORE price?
- Let’s compare this to real world where the before price is shown first & then the after price.
- Users read from left to right. It makes a big difference when it comes to making decisions when the user sees a before price first vs an after price first.
- My mom called me to go for shopping. I absolutely hate going out for shopping but this time I was curious to check out shops to see how they display their offers. Here are a few real world examples
Bonus section
- Why is “16” in green? Unavailable indicates something that is off or sort of like an error state.
- If there is an issue, the information is usually represented in red.
- I understand that green is Careems brand color but in this the green colour (16) indicates something positive while unavailable gives a negative vibe which can cause confusion to the user.
Adding an item to the basket
- So I clicked on the Chicken Tikka M-dias & got to a new screen.
- This was pattern was new to me because in apps like zomato & swiggy, I could easily add items in my cart in the same screen without going to a new screen.
- In apps like Zomato & Swiggy, the user can easily add items in the same screen & can see the price as well whereas in Careem, the user has to go to a new screen if the user has to add an item.
- Our goal as a designer should be limit the number of decisions the user has to take and allow the user to reach from point A (look for food) to point B (checkout) in the easiest & fastest way possible.
- So I decided to add 2 sandwiches ( forgot to take ss) and was about to click on the CTA when I noticed (Based on the first image above) :
- Why is Add to basket given more emphasis over the price? Should the price be given more emphasis over add to basket? If so why?
- In the second image, Why does the size of the button reduce? Why isn’t it covering the entire bottom nav like before? (In other apps, The CTA covers the bottom nav)
- It would be better if the the CTA could cover the bottom nav because this is what users are familiar with based on their experience with other apps.
- Let’s take a look how other apps have designed their add to cart or add to basket buttons.
When user taps on add to basket
- In the second image, I like how the before price is shown first and then the after price. I was talking about this concept earlier in this article.
- In the second image, there could be icons on big headings like basket, promocode, reward your captain so user can understand easier.
- In the second image, the contrast for the — icon could be improved as it looks like it’s disabled.
- In the promocode section, I like how I can just tap on Halloween buttom instead of typing it out which would take more time & effort for the user.
- In the reward your captain section, what would about a use case where the user would want to give more than AED 10?
- I’ll talk about the long text in the CTA later in this section.
- In the payment summary section, I like how the user can see Careem-Plus. This is a good time to introduce Careem-Plus as it shows the benefits to the user (save money by not paying delivery fee).
- I feel the copywriting could be improved.
- Current — “Stop paying for delivery, Get Careem Plus”.
- Suggestion — Never pay for delivery by getting Careem Plus.
- What happens when the user clicks on Careem-Plus?
- I like how the information is laid out with illustrations in these screens as the user can easily absorb & understand the benefits of Careem-Plus 😍
- I like how they mentioned “Most members save AED 100+ every month. Indicating how much others will save is an important factor when it comes to making decisions. (Social influence is real)
- There should be more emphasis given on AED 19/month because price is an important factor for users.
- After clicking on subscribe ( Above image), I can see the price per month clearly compared to previous screen.
- The screen should highlight or increase the font weight of the text “ Your subscription will be automatically renewed in one month.” because price is an important factor for users and as designers, we should value our users time, effort & their money.
- The user can easily just easily click on confirm payment as the user may not read everything.
- I was about to click on the terms & conditions apply to just to check it out. Normally when I click on terms and conditions, It’s a long paragraph like the below image
- I really like the terms & conditions screen because it’s very easy to consume & understand. They could make this even better by highlighting the key terms & maybe adding visuals for each point.
- In the add a card section, “small amount that will be refunded”. There should be more clarity given to the user.
- What do you mean by small amount. Small amount is relative. Person X might find AED 100 a small amount while the Person Y might find AED 100 a large amount.
- How much amount will get charged? When will the amount get refunded.
Payment summary section
- In this screen, I like how I can see more info on delivery fee & service fee so the user can understand why the user is being charged for those fees respectively.
- I also like how the user can easily read more about fees without going to a new screen.
- While it’s good that Careem is informing the user why they are paying service fees, it disrupts the payment summary.
- Is there a way to reduce the info so users can absorb the information in the payment section in an easier way?
- How can we remove the noise and get to the signal?
- In the second image, the copywriting could be improved.
- Why is the order saved in pink?
- In my opinion, it’s capturing too much of my attention.
- While I understand that it’s good to show users how much money they’ve saved, Should that be given the highest emphasis? (especially over order total)
- Current text — “AED 31 saved on this order.”
- Suggestion — “Yaay, You saved AED 31 on this order”
- The latter suggestion seems more user centric than the former.
- But I also have to account for the brand guidelines when making this decision.
- In other apps, the payment summary is more organized (I shall share inspiration for these later in this article.)
- Regarding the CTA, I’ve never seen a CTA of so many characters. I’m used to seeing CTAs with texts like “Place order or checkout”.
- Wouldn’t it be better to go with a simple CTA because that’s how other apps do it which is what users are familiar with. (Unless we have a good reason to intentionally break the familiar pattern)
Regarding the Address
- Initially I like how the CTA was in a disabled state since I hadn’t typed my address yet.
- However I was confused when The CTA was still in the disabled state even after typing my address.
- Then I looked closely to see that I had to type my nickname. I assumed it was optional as I’m not comfortable sharing my nicknames with strangers.
- Instead of nickname, wouldn’t it better if the user could give her/his actual name?
- What does nickname really mean in this context?
- Why is Careem asking the users nickname in the Address section?
- Did Careem confuse Nickname with the name of the address?
- Does nickname have do anything with a person at all?
- The user may not have the patience to find out why the CTA did not get activated.
- Wouldn’t it be better if we could highlight what went wrong to the users instead of just showing the disabled state?
- What is the need of *required when it’s not clearly visible.
- Maybe the “required could be in red after the user has tried to tap on the CTA. In this way the user can know what went wrong and then correct it.
- At least now the user knows what went wrong and why. In the earlier case, the user had no idea what went wrong.
- I decided to order and then cancel the order to see what would happen.
- The actual reason why I cancel the order is because I can’t afford it. I’m broke 💔
- In the second image, I’m confused regarding the information in the payment summary.
- The math doesn’t make sense (reminds me of my school days 🤡)
- I can see AED 62 on top while it’s AED 39 on bottom. Where is the grand total?
Cancelled summary inspiration
Payment summary inspiration
Where is the cart?
- I decided to add a cookie in my cart and go back to the home screen. (where all features are available)
- One thing that I found surprising as a user is that I did not see the cart icon so I could easily access my cart.
- I came back to the food screen and saw this.
- This is the only way the user can access the cart.
- This is disappointing as almost every food app has a cart so that the users can customize or see what’s in their cart.
Profile section
- In the profile section, I like how the information is laid out based on personal & general.
- It could be improved if there would be visual icons added to each of these headings. (Especially the favourites section since users may have liked a few restaurants earlier and it becomes easier for them to recognize it by the heart icon)
Buy & Send section
- Why is this mentioned in the food flow?
- The user is just here to order food.
- I’m not sure why there’s a buy & send feature in the food flow as nothing about food is mention in both these sections. There’s already a delivery section for this in the home screen.
- Maybe Careem wants to push this feature out since users are not using the delivery feature but I don’t think it’s right to show this in the food section as the user is just there to order food 😋
It’s almost over
This was one of the longest assignments that I’ve personally done. I told you that I’m broke earlier. But I was curious to see to what would happen when the user orders an item from Careem.
So I decided to beg my mom to give me money so I could finish this amazing assignment and also the fact that I love chocolate cookies 💕
That being said, Let’s move to our final section.
Finale 💥
- I decided to order 2 chocolate cookies. But Didn’t you say you’re going for the cheapest meal possible? Why not order 1 and not just 2?
- There’s this old quote that I keep close to my heart 💕
- “Buying a single chocolate cookie is haram, Always buy 2 cookies”.
- I like how careem is updating me what’s happening regarding my order. They’re showing me what’s happening behind the scenes 🤩
- Initially, I was told that a captain would pickup my order soon.
- Then I got to know the name of the captain and I also like the feature where I as a user can call or text him on whatsapp just in case of any unplanned events.
- Suggestion — Maybe the photo of the captain could be provided on the screen for the users because
- The user feels a better sense of connection when the user sees a photo of the captain rather than just the name. ( You have more fun when it comes to seeing a friend in person than through just texting.. unless it’s someone you hate 😛)
- The user can even verify through the peephole whether the captain has rang the bell or if it’s someone else.
- I’m happy that I got my order but why am I seeing the reorder CTA & rate CTA?
- I just got my food. Why would I reorder it immediately?
- How would I rate the food or the delivery when I just got my food?
- Why is the reorder button bigger than the rate button?
- Is there an actual need for both these buttons?
- Would it be better if we could provide an exit point to our users? So they can explore other features in the app or just leave the app.
- I decided to click on rate to see the screens.
- In the second image, it would have felt better to rate if I could see the captains photo (human connection)
- In the second image, it shows Rate the food at the top while it shows rate the captain’s delivery in the center. This can cause confusion to the user.
- After rating the image, I’m once again showed the payment screen where I can click on reorder.
- It would be better if we could provide an exit point so the user can explore other features.
I wanted to see how talabat did it. Once again I had to beg one last time & ordered a chocolate lava cake 😝
- Talabat has done a better job when it comes to the feedback experience.
Learning & takeaways 🧠
- This was my first try at analysing an app (in depth) let alone a feature. Initially I thought it would take only a few hours as I’m only analysing a feature & not an app. I couldn’t have been more wrong 🤡
- Analysing the feature took me 7 days ( 5–6 hrs per day) and then compiling it in one article took another 7 -10 days. I prefer writing on paper first and then typing it on my laptop due to which compiling took a lot of time 😐
- I had a lot of fun doing the analysis and my passion grew deeper for UX ❤️
- Doing the analysis made me more resilient & patient 🧘♂️
- The first setback I faced was when I got banned from the app which meant I couldn’t use my own device. I could have analysed a different app but I wanted to stick to Careem to test my resilience.
- Since I couldn’t use my own device, I had to ask my little brother (he’s taller & bigger than me 😭) for his phone which meant I couldn’t analyse the app whenever I pleased. I had to ask his permission if I could use his device.
- There was this one time where I was using his device to analyse the app and he suddenly said : “Bro I’m going to take bath, I need the phone.”
- I replied : “Why do you need your phone when you’re going to take bath?”
- He said “I want to listen to music.”
- I gave him his phone and stayed patient 🧘
- I could have reacted and said “ you stupid cunt, give me your phone. I’m doing something that is more important than listening to music.” (My brother was kind enough to give me his phone so I’m grateful 😁)
- That’s when I remembered this beautiful quote by Viktor E Frankl.
- I love reading articles & books. Even though I’ve learned a lot from reading, The reading experience cannot be compared to the hands on learning experience.
- Doing is always better than reading. Don’t confuse motion with taking action.
- With that being said, we’ve reached the end of this ride. I hope you enjoyed your ride or the reading experience 😜
- Thank you so much for taking the time to read this. It means a lot to me 🥺🙏