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="http://ift.tt/2sn3eVl">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Renee Lin </p>
<h4>How do we translate user feedback to our design?</h4>
<p>I love traveling and exploring the world. When it comes to accommodation booking, I normally use Airbnb for local home stays and Booking.com for cheap hostels. If you ask my experience of using their platforms, I would say……</p>
<p><img alt="" src="http://ift.tt/2u4DSZE">Airbnb vs. Booking.com</p>
<p><em>“ Airbnb is like going to an old friend’s house. We chat about our childhood funny stories and exciting things happening in life while having a nice cup of tea.”</em></p>
<p><em>“ Booking.com, on the other hand, is like being invited to a big birthday party. I struggle my way through random strangers while suffering from extremely loud music. ”</em></p>
<h3>The challenge</h3>
<p>As a wanderlust and UX designer, I decided to challenge myself by redefining the user experience of Booking.com.</p>
<h4>My Design Process:</h4>
<ol>
<li>Analyze current information architecture (IA)</li>
<li>Interview 5 users &amp; Card sorting</li>
<li>Redesign user flow and IA</li>
<li>Create responsive wireframes and UI</li>
</ol>
<p><img alt="" src="http://ift.tt/2tv30M1"></p>
<h3>Current Information Architecture</h3>
<p>Information Architecture (IA) is the way of arranging content in your app or website. The reason why your users are confused or overwhelmed (most of the time) is not because of the visual design but the disorganized Information.</p>
<p>To better understand the current IA of Booking.com’s landing page, I mapped out their current content and colour coded the related sections.</p>
<p><img alt="" src="http://ift.tt/2u4DTwG"></p>
<h3><strong>Ready to see what’s going on?</strong></h3>
<p><img alt="" src="http://ift.tt/2tvvPrT"></p>
<h4><strong>Booking.com landing page — Desktop view</strong></h4>
<p><img alt="" src="http://ift.tt/2u4DU3I"><img alt="" src="http://ift.tt/2tvvPYV"></p>
<h4>Booking.com landing page — Mobile view</h4>
<p><img alt="" src="http://ift.tt/2u4poJh"></p>
<p>After organizing the content, I made 15 cards out of the most important sections on the landing page in order to conduct card sorting activities in the user interview.</p>
<p><img alt="" src="http://ift.tt/2tvvR2Z">Cards of current content</p>
<h3>User Interview</h3>
<blockquote><p>“UX without users is not UX.” — <a href="http://ift.tt/2ojKzTj"><strong>Hoa Loranger</strong></a></p></blockquote>
<p>User interviews are exceptionally useful because it helps you to understand what can be improved and also uncover directions that were previously unthought of.</p>
<h4>Interview Objectives</h4>
<ol>
<li>Understand user goals and pain points</li>
<li>Envision redesign visual language</li>
<li>Evaluate current landing page (desktop and mobile)</li>
<li>Revise information architecture</li>
</ol>
<h4>Preliminary Questions</h4>
<p>I have interviewed 5 users and listed the analyzed results as follow.</p>
<p><img alt="" src="http://ift.tt/2tvvRQx"></p>
<h4>Design Inception</h4>
<p>After the preliminary questions, I asked more specific questions to understand the user goals and discover the moods of Booking.com. Then, I further defined the visual language in terms of colour, space, movement and shape in the design inception worksheet.</p>
<ul>
<li>Why do you use <a href="http://booking.com">booking.com</a>?</li>
<li>What mood would facilitate your needs to be fulfilled?</li>
</ul>
<p><img alt="" src="http://ift.tt/2u4D7zC"></p>
<h4>Landing Page Perception</h4>
<p>Then I asked users to browse through Booking.com’s landing page on both desktop and mobile phone while observing their behaviours and asking relevant questions.</p>
<p><img alt="" src="http://ift.tt/2tvqPmM">Current Booking.com Landing page<img alt="" src="http://ift.tt/2u4O4kD"><img alt="" src="http://ift.tt/2tvvTb7"></p>
<h4>Card Sorting</h4>
<p><img alt="" src="http://ift.tt/2u4JTFE"></p>
<p>Card sorting is a method used to help design or evaluate the information architecture of your products. In a card sorting session, participants organize content into categories that make sense to them. Card sorting will help you understand the user expectations, prioritize the content and build the structure of your products.</p>
<h3><strong>How to conduct a card sorting session?</strong></h3>
<h4><strong>Step 1: Make cards</strong></h4>
<ul>
<li>For a new site, list the content topics of types of information that you are likely to have.</li>
<li>For an existing site, list the most important types of content.</li>
</ul>
<h4>Step 2: Ask your users to group the cards</h4>
<ul>
<li>Allow users to add new cards or put some cards aside.</li>
<li>If there are too many groups, ask users to combine some of them.</li>
<li>Ask users to give a name for each category</li>
</ul>
<h4>Step 3: Thank your participants and give them a hug/candy/gift :p</h4>
<h4>Step 4: Analyze your results</h4>
<ul>
<li>Analyze qualitative information based on user comments.</li>
<li>Analyze quantitative information based on: Which cards appeared together most often? How often cards appeared in specific categories?</li>
</ul>
<h3>User Flow</h3>
<p>Given lots of great insights from user interviews, I sat down re-picturing the “Ideal user flow” of booking.com. I divided users into two groups according to different needs.</p>
<ol>
<li>The users who know where to go</li>
<li>The users who don’t know where to go</li>
</ol>
<p><img alt="" src="http://ift.tt/2tvq6SM"></p>
<h3>Revised Information Architecture</h3>
<p><img alt="" src="http://ift.tt/2u4tAZk"></p>
<blockquote><p>Think of landing page as a collection of information pieces that serve user needs. A good Information Architecture (IA) presents and arranges the content in a way that is easy to understand, meets user goals, and can be scaled as the product grows.</p></blockquote>
<h4>So, what did I remove from the current landing page? And why?</h4>
<h4><strong>1. Reviews</strong></h4>
<p><img alt="" src="http://ift.tt/2tverDt"></p>
<p>As I’ve mentioned in the “Ideal user flow”, Reviews are only beneficial to the users when they narrow down the results and compare between few options. I get it that Booking.com has tons of (119,530,267) verified reviews which is a big selling point. But who would click on random reviews on the landing page before even searching?</p>
<h4><strong>2. Call to Action (CTA)</strong></h4>
<p>CTA is very crucial to business and marketing success. As a UX designer, it is not enough (lame) to design the eye-catching CTA and yell at your users everywhere. It is actually like a proposal. You need to hold your users’ hands and give them an irresistible speech at the perfect moment. At the end of the day, all they can say is <em>“Yes, I subscribe.”</em></p>
<p>So I made a few changes to CTA to put them at the right moment:</p>
<ul>
<li>Subscribe to get discount — When searching/booking</li>
<li>Refer a friend to get cash back — After successfully booking</li>
<li>Download the app — When using mobile device</li>
</ul>
<h4><strong>3. Recommended destinations</strong></h4>
<p><img alt="" src="http://ift.tt/2u4DfiA"></p>
<p>Recommendations can be useful to the users who don’t know where to go. The question is, when the users try to explore and click on a recommended destination, do they want to see a list of hotels right away?</p>
<blockquote><p>Why don’t we provide travel guides instead?</p></blockquote>
<p>Booking.com has this amazing Travel guides page where you can find great information of a destination, like “Things to do”, “Best time to visit”, “Average price”, “Weather”, “Transport”, “Food” etc.</p>
<p><img alt="" src="http://ift.tt/2tv9PNA"></p>
<p>I suggest to bring the travel guides up instead of burying it in random hyperlinks. So that when users click on a destination, we provide them useful travel guides first and then lead them to book a hotel. You may argue that it takes two clicks to get to where we want the users to be — the hotel list. However, “Number of clicks” is a plausible metric. In reality, the users don’t mind more clicks as long as each click is joyful and they have continued confidence and pleasure which is called the “<a href="http://ift.tt/1NCTTc9">scent of information.</a>”</p>
<h4>Revised IA</h4>
<p><img alt="" src="http://ift.tt/2tvl4pk"><img alt="" src="http://ift.tt/2u4CaHz"></p>
<h3>Wireframes</h3>
<p>When it comes to responsive design, everyone is talking about <em>“Mobile First.” </em>Yes, I agree that smaller screens can be more challenging to include massive content. However, we should NEVER let the Mobile First mindset become the crime of <em>“Mobile Everything” </em>because our desktop is not a simple giant mobile device. <em>(A great medium post: </em><a href="http://ift.tt/2p3ScxS"><em>Mobile First, Desktop Worst</em></a><em>.)</em></p>
<p>So I designed the desktop view and mobile view side by side considering different behaviours on various devices.</p>
<p><img alt="" src="http://ift.tt/2u4t39T"><img alt="" src="http://ift.tt/2tvpb4B"></p>
<h3>Design Iterations</h3>
<p>Followings are some of my UI design outcomes. I want to thank all my friends who were bothered by me asking their opinions.</p>
<h4>1. Header</h4>
<p><img alt="" src="http://ift.tt/2u4yRQQ"><img alt="" src="http://ift.tt/2tvB62z">Header v1/v2</p>
<h4>2. Card Layout</h4>
<p><img alt="" src="http://ift.tt/2u4C031"></p>
<h4>3. Credibility</h4>
<p><img alt="" src="http://ift.tt/2tvfumV"></p>
<h3>Responsive UI</h3>
<p>Since the redesigned desktop landing page is very simple which can adapt to tablet devices easily, I only made one slight change from desktop to tablet on the card carousel sections. I put chevron buttons on desktop version which allows users to click and view the next card; yet I removed them on the tablet version since the users usually browse the content by swiping.</p>
<blockquote><p>And Ta-da!</p></blockquote>
<p><img alt="" src="http://ift.tt/2u4ytlr">Responsive Landing Page</p>
<h3>Desktop Landing Page</h3>
<p><img alt="" src="http://ift.tt/2u4DU3I"><img alt="" src="http://ift.tt/2tvN2kJ">Desktop Landing Page: Old vs. New</p>
<h3>Mobile Landing Page</h3>
<p><img alt="" src="http://ift.tt/2u4pZdR">Mobile Landing Page: Old vs. New</p>
<p>View InVision Prototype</p>
<ul>
<li><a href="http://ift.tt/2tvfvY1">Desktop</a></li>
<li><a href="http://ift.tt/2u4O8kG">Mobile</a></li>
</ul>
<h3>Reflection</h3>
<blockquote><p>UX Designer is not a user experience generator, but a user feedback translator.</p></blockquote>
<p>UX design is where my passion lies. What I love the most is talking to the users, solving their problems and delivering joy to people’s life. I’m having lots of fun doing case studies in my spare time and I want to thank all my friends and mentors who help me along the way. I will keep up my pace towards being an amazing UX designer.</p>
<p><strong>Thanks for reading! </strong><em>💚 I would love to hear your thoughts and ideas. If you want to chat about UX/UI design, or just want to say hello, connect me via </em><a href="http://ift.tt/2q6HYgq"><em>LinkedIn.</em></a></p>
<h3>Other booking.com case studies</h3>
<ul>
<li><a href="http://ift.tt/2u4QgZC">Mendesain Ulang Web — Booking</a></li>
<li><a href="http://ift.tt/2tvpcFH">How Booking.com UX made me feel.</a></li>
</ul>
<p><img alt="" src="http://ift.tt/2iWF11L"><iframe src="http://ift.tt/2rD48w4" width="800" height="480" frameborder="0"><a href="http://ift.tt/2h0f00F">http://ift.tt/2h0f00F</a></iframe><img src="http://ift.tt/2tvoQPu" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2u4JbZ3">Booking.com — UX Analysis and Responsive Redesign</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Booking.com — UX Analysis and Responsive Redesign

Booking.com — UX Analysis and Responsive Redesign

How do we translate user feedback to our design?

Top Stories