Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
uxdesign.cc – User Experience Design — Medium | Renee Lin
How do we translate user feedback to our design?
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……
Airbnb vs. Booking.com
“ 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.”
“ 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. ”
The challenge
As a wanderlust and UX designer, I decided to challenge myself by redefining the user experience of Booking.com.
My Design Process:
- Analyze current information architecture (IA)
- Interview 5 users & Card sorting
- Redesign user flow and IA
- Create responsive wireframes and UI
Current Information Architecture
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.
To better understand the current IA of Booking.com’s landing page, I mapped out their current content and colour coded the related sections.
Ready to see what’s going on?
Booking.com landing page — Desktop view
Booking.com landing page — Mobile view
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.
Cards of current content
User Interview
“UX without users is not UX.” — Hoa Loranger
User interviews are exceptionally useful because it helps you to understand what can be improved and also uncover directions that were previously unthought of.
Interview Objectives
- Understand user goals and pain points
- Envision redesign visual language
- Evaluate current landing page (desktop and mobile)
- Revise information architecture
Preliminary Questions
I have interviewed 5 users and listed the analyzed results as follow.
Design Inception
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.
- Why do you use booking.com?
- What mood would facilitate your needs to be fulfilled?
Landing Page Perception
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.
Current Booking.com Landing page
Card Sorting
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.
How to conduct a card sorting session?
Step 1: Make cards
- For a new site, list the content topics of types of information that you are likely to have.
- For an existing site, list the most important types of content.
Step 2: Ask your users to group the cards
- Allow users to add new cards or put some cards aside.
- If there are too many groups, ask users to combine some of them.
- Ask users to give a name for each category
Step 3: Thank your participants and give them a hug/candy/gift :p
Step 4: Analyze your results
- Analyze qualitative information based on user comments.
- Analyze quantitative information based on: Which cards appeared together most often? How often cards appeared in specific categories?
User Flow
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.
- The users who know where to go
- The users who don’t know where to go
Revised Information Architecture
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.
So, what did I remove from the current landing page? And why?
1. Reviews
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?
2. Call to Action (CTA)
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 “Yes, I subscribe.”
So I made a few changes to CTA to put them at the right moment:
- Subscribe to get discount — When searching/booking
- Refer a friend to get cash back — After successfully booking
- Download the app — When using mobile device
3. Recommended destinations
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?
Why don’t we provide travel guides instead?
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.
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 “scent of information.”
Revised IA
Wireframes
When it comes to responsive design, everyone is talking about “Mobile First.” 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 “Mobile Everything” because our desktop is not a simple giant mobile device. (A great medium post: Mobile First, Desktop Worst.)
So I designed the desktop view and mobile view side by side considering different behaviours on various devices.
Design Iterations
Followings are some of my UI design outcomes. I want to thank all my friends who were bothered by me asking their opinions.
1. Header
Header v1/v2
2. Card Layout
3. Credibility
Responsive UI
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.
And Ta-da!
Responsive Landing Page
Desktop Landing Page
Desktop Landing Page: Old vs. New
Mobile Landing Page
Mobile Landing Page: Old vs. New
View InVision Prototype
Reflection
UX Designer is not a user experience generator, but a user feedback translator.
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.
Thanks for reading! 💚 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 LinkedIn.
Other booking.com case studies
Booking.com — UX Analysis and Responsive Redesign was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.
