large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxdesign.cc/booking-com-a-ux-case-study-3ccfbfa82eec?source=rss----138adf9c44c---4">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Moe Abdella </p>
<h4>Ever thought of coming up with a design concept for Booking.com?</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dXLgWzZsbs_eWbAqtncB8w.jpeg"></p>
<p>This idea might have crossed the minds of every UI designer, but still booking is keeping its well-known design. Why? Simply because as we think of re-skinning Booking.com, we are only considering the artistic feel and look of this web portal, without considering the underlying process that is aiming at increasing customer satisfaction and loyalty in the first place. The best design &#8211; if there is ever something as such- might not be the most suitable for the user or the business.</p>
<h4>But How Come?</h4>
<p>Forget about the UI Design and everything related to the digital world.</p>
<p>Just imagine you are working as a stocker at Walmart and your job is to sort the products from the backroom and take them to the sales floor. Your supervisor asked you to relocate the French bread stand from the bread aisle to the alcoholic beverage aisle, just next to red wine. You started wondering to yourself “Why am I moving French bread from the <strong>bread</strong> aisle to the <strong>Alcoholic beverages</strong> aisle? That makes no sense”. So you you decided to go ahead and ask your supervisor, who responded: “We are doing this because we want to <strong>speed up</strong> the process.”</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/400/1*kDcUEE9mwxOYlCnwF1rRvw.gif">Whaaaaaaaaat!!</p>
<p>How come! French bread simply belongs to the bread aisle. This is where shoppers expect to find it! But your supervisor continued explaining that they could <strong>observe</strong> that the majority of people would buy French bread with the red wine, meaning those items are complementary goods and must be placed in close proximity, a concept known as a <strong>Cross-selling</strong>.</p>
<p>So putting French bread in the Alcoholic beverage aisle, although it sounds a bit illogical but it will speed up the process and consequently increase the customer satisfaction.</p>
<p>I guess now you get it.</p>
<h4>Now Let’s Talk About Booking</h4>
<p>Booking.com was founded in 1997. In 2002, Expedia was not tempted enough to purchase it -for their bad luck-. Yet in 2005, the company was acquired by The Priceline Group for USD 133 million. Booking has then become one of largest e-commerce platforms in the world with a market cap of over USD 64 billion, covering over 1 million hotels worldwide.</p>
<h4>So, Why It Keeps the Poor Design?</h4>
<p>Because Booking.com believes that “Customers Drive the Product”. So their portal looks that way because customers have told them this the product they want.</p>
<h4>mmm.. And How About Airbnb?</h4>
<p><strong>Why does it have a better design and look? Are their customers from Mars?<br /></strong>Well, this might be because of the different <strong>business model</strong> of Airbnb.</p>
<h4><strong>Still Not Convinced?</strong></h4>
<p>How about redesigning the homepage of Booking.com as a proof of concept while also considering the user experience?</p>
<h4>The Mission</h4>
<p>Our mission is to redesign the homepage while following the UX design process.</p>
<h4>Design Process:</h4>
<ol>
<li>Analyze the current IA and gather data.</li>
<li>Back up our hypothesis with data.</li>
<li>Perform usability testing by interviewing 5 users and card sorting.</li>
<li>Redesign homepage based on the new AI.</li>
<li>Do solution evaluation and validation.</li>
</ol>
<h4><strong>Design Process Road Map</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*wYFmKTHRrnglBdT-6r1GFw.png"></p>
<h4>Analysis</h4>
<p>We will start with analyzing the current IA.<br /><strong>Operation Code Name</strong>: Slice and Dice.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*VavG01sOCzX3P6h_g-55qQ.png">Current AI OF Booking.com</p>
<p>Now we have 15 cards/blocks and now we are ready for the interviews and card sorting.</p>
<p><strong>Wait a second! Isn’t card sorting the designer’s job?</strong><em> <br /></em>Yes, but we agreed that “Customers should drive the product”.</p>
<p>I want to engage the users in that phase so I sliced the home page into 15 images.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BxQPLTd7Q0UHVrD1UZzoXg.png">Slice and Dice</p>
<h4>The Interviews</h4>
<p>Before starting the interviews, I took my chance to re-sort the cards in order to check my hypothesis later on with the interview results.</p>
<p>I didn’t have access to a usability testing lab, so I just picked 5 of my friends with different backgrounds and mentalities, yet they have one thing in common: they travel a lot.</p>
<ol>
<li>Michael : Egyptian software engineer (28 years old)</li>
<li>Monica : Italian teacher (40 years old)</li>
<li>Ali : Egyptian real estate agent (29 years old)</li>
<li>Michela : Italian student (25 years old)</li>
<li>Georgie : American marketer (33 years old)</li>
</ol>
<blockquote><p>I did most of the interviews online and they were so helpful. So thank you guys!</p></blockquote>
<ol>
<li><strong>How do you find accommodation while traveling?<br /></strong>Booking, Airbnb or Trivago.</li>
<li><strong>Which is your favorite? And why?<br /></strong><em>Skip logic: If the answer was booking, continue with question no. 3 and if it was anything else continue with question no. 4.</em></li>
<li><strong>What do you love most about Booking.com?</strong></li>
<li><strong>What do you hate most about Booking.com?</strong></li>
<li><strong>What are your suggestions for improving the user experience?</strong></li>
<li><strong>Do you have anything to add?</strong></li>
<li><strong>Could you please re-sort those cards starting with the most important card for you?</strong></li>
</ol>
<h4>Interviews conclusion</h4>
<p>The following points are based on the current UI of Booking.com</p>
<ol>
<li><strong>3 of them hated the current UI.</strong><br /><em>They like the UI of Airbnb better. But only the UI.</em></li>
<li><strong>They think there’s too much scroll.</strong></li>
<li><strong>They think there’s too much text.</strong></li>
<li><strong>They think most of the images are the same.</strong></li>
</ol>
<p>One of them mentioned a new feature he would love to have in the reviews section which is ‘<strong>Auto Translate</strong>’.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/560/1*je1ldVTfJi-JkSMbl_zdbw.gif">Auto Translate</p>
<h4>Card Sorting Conclusion</h4>
<p>Interviewees were asked to assign weightage for each card.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*DLIkBZ97aClGB5RxDnCWuw.png"></p>
<p>And here is the result:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*HIwP5320Qs8Mx5Yt-3553Q.png">Card Sorting Result</p>
<h4>Now We are Ready to Build a Low Fidelity Prototype</h4>
<p>Remember you can always test your hypothesis at any phase. So we will test it using the low fidelity prototype.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*1aXM-B_GJCanj1Sc_kLOdg.jpeg">Booking.com wireframe using MockFlow.com.</p>
<p>Stop Wondering and Start Testing.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*DAf-sFvChkqywjljN4RHrg.gif">They will love it… They won’t.</p>
<p>Actually, they love it. Yet, they think it would be simpler and more intuitive if data was better categorized with less repetition. And now we are ready for the next step.</p>
<h4>Let’s Design the High Fidelity Prototype</h4>
<p>While designing the high fidelity prototype, I decided to divide the “More Destinations” section into 2 distinctive sections:</p>
<ol>
<li>Travel Guide.</li>
<li>Popular Destinations.</li>
</ol>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*vU3E-kPlDCZzIbknIxOhQA.png">First High Fidelity Prototype.<img alt="" src="https://cdn-images-1.medium.com/max/545/1*fkNZkLV3kP0dceSVxz1BJA.gif">Simple cards animation (Show less .. Love more).</p>
<p>Now let’s test the prototype!</p>
<blockquote><p><em>“Testing leads to failure, and failure leads to understanding.” — Burt Rutan.</em></p></blockquote>
<p>The feedback was quite encouraging. They loved the cards and the simplicity, but they didn’t fall in love with the search section because it was not so clear and they needed it to stand out more. So, I went for a tiny modification.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*rrkkEQDpf0-swQ0eqRkmzg.png">Second High Fidelity Prototype.</p>
<p>Now it is a bit clearer and finally they loved it!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/480/1*hLzZKJ2U937TOVC9iHVlDQ.gif">Oooh They love it!</p>
<h4>They Love it .. But!</h4>
<p>Remember, I did the whole study based on my friends’ experiences. So if you think this is a great UX, I’m sorry to tell you that we aren’t yet sure about that.</p>
<p>Yes It might be a great UX but, <strong>did I A/B test It? </strong><br />The Answer is NO. So our next step should be the A/B test because Booking.com has data-driven culture.</p>
<p>So all I have to do now is to run the A/B testing and it will probably fail.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*ReIvBtgtcy0knbLp9PHA_A.gif">After the A/B Testing.</p>
<h4>Why do I Think it Will Fail?</h4>
<p>Well, Booking.com has a creative team of around 150 designers. Chances are, they have all tried to modernize the current UI but the A/B testing matrix simply told them: NO.</p>
<blockquote><p><em>“Booking.com doesn’t look that way that it does because I decided it should look that way” <br />Stuart Frisby &#8211; Director of Design at Booking.com</em></p></blockquote>
<p>So it’s all about A/B testing now I will not gonna do it because it requires a lot of data and high traffic on the webpage. And this is just a UX Case Study.</p>
<h4><strong>The Conclusion</strong></h4>
<p>The whole idea here is not about creating the best artistic UI for Booking.com. It is more about practicing the UX processes and documenting the effect of UX on the interface and users’ preferences on deciding how the front-end would be constructed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/450/1*HQ-JusJB5ef-au13Sv1jnQ.gif"><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F50d69a%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F50d69a%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F50d69a%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href">https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3ccfbfa82eec" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxdesign.cc/booking-com-a-ux-case-study-3ccfbfa82eec">Booking.com: A UX Case Study</a> was originally published in <a href="https://uxdesign.cc">UX Design Collective</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Booking.com: A UX Case Study

Booking.com: A UX Case Study

Ever thought of coming up with a design concept for Booking.com?

Top Stories