![](https://miro.medium.com/v2/resize:fit:700/1*na0Vp3Tb77Hf69FvuUBnxQ.png)
Due to the limited screen space, we usually replace text labels with icons wherever possible. Icons take less space, they don’t have to be translated, and people are familiar with them after all, right?
Well as it turns out, that’s not always true!
The heart icon is a universal symbol that resonates across languages and cultures and time zone for liking and loving. Whereas, the Airbnb app uses the heart symbol for adding a rental space to the wishlist. Last week I was at a coffee shop with few designers and how much ever we tried to avoid design talks for the hour, we somehow landed discussing the heart icon and the varied usage of this icon. But, yes a majority of them argued that heart icon should be used exclusively for liking and loving a product. Now, that was exactly when I was all ears up and got my next experiment!
Introduction about Airbnb
Whether an apartment for a night, a castle for a week, or a villa for a month, Airbnb connects people to unique travel experiences, at any price point, in more than 34,000 cities and 191 countries. And with world-class customer service and a growing community of users, Airbnb is the easiest way for people to monetize their extra space and showcase it to an audience of millions.
Objective of the Usability test
Identify the pain point in adding a rental to the wishlist on the Airbnb app and testing out how a heart with label works opposite to that.
Is there a need for adding to the wish list?
The concept of a wishlist is beneficial for both users and the company. Browsing actions in one session aren’t remembered in the next. This is amplified in multi-device browsing where there is often a disconnect between desktop and mobile sites. A frequent traveler would obviously want to add a rental to his wishlist for later reference. Also, it is a good way for the companies to keep the users close to them.
Just while sending out the prototypes to the users, I was also interested in knowing how many users would be interested in this feature. So here’s what I did –
Along with the task, I also added a question — “Would you love to add rentals to a wishlist while random browsing? Reply to my mail if it’s a yes!” (Okay, okay did it sound more like a proposal? :P) But, I did get a response from 31 out of 39 users, saying yes of course. Well, to be honest, I had not expected the ratio to be so high. But it only made the reason for the experiment stronger.
User research
- User persona
Prior to conducting usability tests, I developed a user persona to better understand the target users of Airbnb’s iPhone app. This process helped me get into the mindset of the users, thinking in terms of their contexts, needs, and goals
So meet Tom!
![](https://miro.medium.com/v2/resize:fit:700/0*LdaSew2GYJYza5UV.jpg)
- Platform used for experiment
I have used the CanvasFlip online tool for creating the prototypes and for UX insights such as session replay (the user videos). conversion funnel and heat maps.
- Number of users in the test
Just like last time (Instagram usability test), I passed on the scanned copy the user persona to all my colleagues and friends, and asked them to list friends and family falling in this persona. I got a list of users in no time. I distributed the list into 2 teams — A & B. I quickly sent team A — “Heart icon for adding to wishlist” and team B — “Heart icon with a label, to add to wishlist”. Each prototype was tested with 20 users.
- Task given to users
“Search for a good rental place in California, The United States for the duration 27th June to 4th July. Add the good ones to your wishlist for later reference.
Hey friends, a quick question — Would you love to add rentals to a wishlist while random browsing? Reply to my mail if it’s a yes!”
Usability testing
All the 40 users took the test and I had all the user videos, heat maps and all other insights in my CanvasFlip account. Before we start with analyzing those results, you would love to have a look at both the prototypes.
The first prototype is the one made with the current design of Airbnb. Try out the app prototype and add your favorite rental to your wish list.
![](https://miro.medium.com/v2/resize:fit:700/1*fJ4DkCCU5hyKo5OEMtePpA.png)
(Open Airbnb prototype version in new tab)
The second prototype, however is the one with design changes. The heart icon has a label along with it. Had it been for the website, a text on hovering was good enough to convey to message to the users but for mobile apps it becomes a bit more challenging. I tried to keep the text in the same pattern as they display the price of the rental. Try out this new design.
![](https://miro.medium.com/v2/resize:fit:700/1*PHrOwh8UJNACwqCZ12ZanQ.png)
(Open Airbnb prototype version in new tab)
- Insights on existing design
This experiment had quite an interesting outcome. You should really watch this session replay of a user trying to add a rental to his wishlist.
The user definitely could figure out by the end that the heart icon stands for adding to wishlist. But throughout he was confused if there was some other icon for adding to wishlist. Also, if you noticed, he completely skipped the icon on the screen where all rentals are listed. He could only conclude that heart symbol stands for “adding to wishlist” when he had no other options in hand.
Similar was the experience of all the other users. Sooner or later they do conclude what the icon stands for, but the concern is the time they spend on this and the number of interactions they make to complete this task.
Not just this, I also analysed the number of drop-offs due to this. And here is the conversion funnel for it –
![](https://miro.medium.com/v2/resize:fit:700/0*U5EOHSnBxt2t8uLW.png)
Here is the heat map of the screen that was supposed to get a good interaction on the heart icon
![](https://miro.medium.com/v2/resize:fit:700/0*Xp-vDhjtBhaJKo_P.png)
Conclusion –The “heart” icon to add to wishlist in Airbnb is un-intuitive to many users. Users cluelessly kept tapping around on the screen before eventually figuring out to tap on the heart.
- Insights on design suggestion
Against the previous prototype results, check out the heat map of the prototype with a label along with the heart icon. Users have clicked right there. It’s intuitive and users did not find any issues with adding a rental to wishlist. And the best part is users did not open the complete description to add it to wishlist.
![](https://miro.medium.com/v2/resize:fit:700/0*BtqPgxmRu-OFlsYf.png)
Conclusion — With a label by the heart icon, there are fewer clicks necessary if the user wants to save a rental to his/her wish list to view later.
- Device used by users
![](https://miro.medium.com/v2/resize:fit:700/0*kOaJfz4OQ20Sn9aV.png)
Highlights from the test
![](https://miro.medium.com/v2/resize:fit:700/0*ajLgwC5UYeZo57A5.png)
Final Words
When we are talking about symbols such as heart or star, the exact meaning is hard to interpret precisely. Even in the context of the app itself, these symbols can be really confusing when the user is expecting one outcome and gets a different one. For desktops label on hovering is a good option but for mobile devices it becomes a bit more difficult.
Do let me know what you feel about such icons. Would love to hear from you.
![](https://miro.medium.com/v2/resize:fit:700/0*Esn3A-UhMJEh6_NU.png)
Originally published at canvasflip.com on June 23, 2016.