Redesigning Swiss-Belhotel Landing Page — A design case study.
Prologue
Imagine feeling restless with your job, then you decided to take a break and play FIFA or Football Manager. But after a few matches, your mind began to wander, what if you work while on vacation at a beautiful hotel?
With curiosity, You turned to Google and then explored the top hotel brands in Indonesia.
Yeah, there are many of them, and each hotel has a website. You visited each hotel website one by one, but after one too many hotels you browsed, you eventually came across the Swiss-Belhotel website with its unique and distinctive design.
What do you think? Well, this website is very informative and has a lot of call-to-action buttons. But it was too over for me. When the first time I accessed this website It immediately bombarded me with numerous call-to-action buttons, banners, and information scattered throughout the page.
While undoubtedly informative, the volume of options and content makes me feel overwhelmed. I find myself at a crossroads, unsure of where to begin or how to navigate the many of information.
Okay, let’s dive into the analysis
Analysis
- The first time I saw this element, I thought it wasn’t a button but just some information placed below the navigation bar. However, I was completely mistaken, all of those are buttons that would take you to the same page. So if you click each button you’ll end up on the “Why book direct” page. Why do we need to put multiple buttons in one section if those buttons only take us to the same page? 🤔
- The placement of booking forms that nearly cover a quarter of the hero image and cannot be minimized was annoying. 🙄
- Having too many call-to-action buttons in the above-the-fold section can be overwhelming and confusing for users. 😟
- This element also confused me. At first, I thought it was only a badge or social proof but actually, that’s a clickable picture that takes us to the “Health and Safety Procedures” Page. 🤨
- Initially, this section was quite challenging for me to figure out. However, after clicking on each card or image, I came to understand that this section categorizes every hotel based on different travel reasons. For example, if I click on the “meetings” card, it directs me to a page that displays hotels offering event-organizing services. 🫠
- I noticed that this section categorizes hotels by destination, and it piqued my curiosity. However, I little bit wonder why it separates destinations like Bali, Jakarta, and Indonesia when they all belong to the same country. I mean Bali and Jakarta are Indonesia’s cities, right? 🙁
- Qatar is in the Middle East region. 😳
⚠️ Based on the points of analysis above, the main issue appears to be the organization, placement, and labeling of content elements which can lead to user confusion, frustration, and a less-than-optimal user experience.
All right let’s solve this problem.
Design Exploration
If we explore some of the hotel websites, most of them use a minimalist web style. Minimalism in design means keeping things simple and clean, focusing on what’s important, and using a limited range of colors.
So, I considered a minimalist web style to solve the problems and re-arranged the information structure to make the landing page simpler for users, show them the crucial information, and prompt them to take actions like booking a room.
In this process, I aimed to maintain the original brand identity, keeping the same logo and color.
Yes! Fresh, simple but familiar ⛲️
Presenting - Swiss-Bell Hotel landing page new looks 💥
Newly redesigned Swiss-Bell Hotel landing page, Find the beautiful hotel making your way to memorable stays. Discover your destination easily, explore attractions, and find points of interest.
✅ Above the Fold Section
Above the fold content is the part of a web page shown before scrolling. The ‘fold’ is where the browser window ends, but the content continues underneath.
As the initial point of contact for users, I focused on optimizing this section to be straightforward, engaging, and easy to understand for users. The primary goal is to trigger users’ interest and make them want to know more which would increase the convention rate of the landing page.
- The title explains the value that Swiss-Belhotel can provide to users
- The subtitle explains how Swiss-Belhotel delivers that value
- Call to Action provides ease for users to take the next steps.
- Social proof in the form of guest testimonials, such as “Rated 5 Stars by 95% of Our Guests,” can instill confidence in users to utilize Swiss-Belhotel services.
- Hero image provides a visual representation of the products or services users can obtain from Swiss-Belhotel
- A user-friendly booking form with a simplified structure and easy to navigate.
✅ Service Section
Remember the section that categorizes every hotel based on travel reasons or destination which’s hard for me to figure out the first time? here’s the new look!
✅ Special Offers Section
I’ve made slight changes to this section to make it look simpler and added information about the availability time of the special offer.
By making this section simpler and telling users when the offer starts and ends, it’s easy for them to know when they can use the promotion. This way, users can make the most of the offer during the specified time, making their experience more convenient and valuable.
✅ Benefit Section
To avoid any ambiguity, I’ve transformed the “Why direct book” button, which was previously located in the “above the fold” section into a dedicated section. In this section, you’ll find various benefits clearly labeled with icons and explanations.
This section is placed below the Service and Special Offers to ensure that after users have explored the available services and special deals, they can easily discover the advantages of booking directly through the website.
✅ News Section
Same with the offers section, in this section there haven’t been many changes, except for making it simpler and adding information about the publication date of the news.
In the initial version of the "News & Events" section, there was no clear indication of the publication dates for news articles, making it challenging for users to identify the most recent articles. By including publication dates, users can easily differentiate between older and more recent news, enhancing their browsing experience.
And yeah! That’s Swiss-belhotel landing page new look🎉
I also created a high-fidelity prototype of this landing page to provide a visual representation of how the redesigned landing page will function. This prototype allows us to see the practical aspects of the redesign in action, making it easier to visualize the user experience and interactions.
Here they are!
Epilogue
Yes, that’s how it goes — The journey through the Swiss-Belhotel landing page took us on an unexpected adventure. The curiosity to enjoy working while vacationing in a beautiful hotel ended with doing some design exploration of the Swiss-Belhotel landing page.
I understand that this exploration might not cover every little detail that users need, but as long as the main experience is helpful to users, we can handle any unusual situations with care and attention.
This Redesign was totally challenging for me as I tried to re-arrange some of the content and layout while giving it a new look to avoid confusion by users.
The more I try to simplify the menu, layout, and options to make the website look cleaner and easier to navigate, the more complex the information architecture gets.
In the end, it’s not just about creating a visually appealing website but also ensuring a user-friendly and enjoyable navigation experience for all users.
📝 Lesson Learnt
The implementation of the right information architecture is crucial in website applications to ensure easy navigation, well-organized content, time-saving for users, and support for expansion without disrupting the user experience.
And if I find enough time, I plan to redesign the entire website and conduct user research to gather insights about user experiences, their thoughts on the current website, and potential improvements.
This will allow me to validate any existing issues and address them effectively.
