The lovely folks at The Edward Hotel contacted me through a referral regarding a website redesign of their previous Wix site for a local boutique hotel. The website serves primarily as an informational portal for customers to browse and book a hotel room online.
I took on this project as both the designer and developer. Working closely with the client and an additional Content Writer, I was able to take the site from start to finish and launched within three weeks.
Visit Live SiteThe major problem the client had with the current website was that it did not look modern or professional enough. This would naturally be solved in a redesign, as from a design standpoint, it is the most straight forward problem to solve. However:
Make the site feel more modern and professional. It sounds simple, but there are many factors and layers to this goal.
To order to properly plan out the new site, it was crucial to map out all the information that the site offers its users through a user flow map.
Because the budget did not allow for a new logo design (and I am not a logo designer), I simply revamped it to appear fit the new design style, changing the typeface to Avenir Next Condensed, a more visually appealing and modern apporach. I also changed the decorative line on the left to the new primary gold color, giving it a nice accent. An alternative horizontal logo was made for instances where the responsiveness of the site makes the stacked logo too small to view.
One of the Edward's most notable charactistics is that it combines a historical, classic look with a modernized approach to the hotel experience. To reflect this, I paired Lora with Noto Sans—both Google Fonts, which improves performance thanks to CDN caching. The elegant serifs in Lora that is primarily used for contextual content, such as paragraph texts and titles, showcases the hotel's timeless classical design. For user-interactive content, such as buttons, navigations, forms, and text fields, Noto Sans provides a sleek modern touch, reflecting the hotel's modern approach at how it handles bookings and check-in's.
The new primary brand color is a sharp gold, slightly different from the previous yellow, which reflects the luxuriousness of the hotel when paired on black. This is used sparingly throughout the site, for accents or highlights and CTAs. The secondary colors are all subtle, muted palettes found in the rooms of the actual hotel rooms.
The new redesign uses geometric shapes with sharp edges to create a sleek, modern, yet classic look that reflects the visuals of the hotel. The overlaying shapes and elements not only parallel the craftsmanship of the interior design, but feels modern and professional in the digital space.
One of the most prominent additions to the new website is the ability to find a room from the current webpage. Bookings are 100% handled on an external third-party website, but previously users had to also find rooms on the third-party site as well. This new Find Rooms component allows users to do all the browsing on the hotel website before being sent off.
This is technically possible because the room searching parameters are located in the URL of the third-party site. I was able to utilize AirBnb's calendar picker component to dynamically generate a link with the desired search parameters, ensuring that users stay on the main website for as long as possible. By default, the current dates are automatically populated via MomentJS.
Perhaps the most important part of the new website is the rooms page, which sells the customer on the product—in this case, a hotel room. Prior to the redesign, the only way for the user to see the rooms that the hotel had to offer was through the third-party site. The issues that came with this were that the photos were low quality, not enticing, the amenities were inconsistent and inaccurate, and the information was difficult to control.
I used the hotel's stunning visuals to draw attention to each room through a manual carousel, and added all the information on each room below. This way, we had full control over what the user could see before sending them off to the booking site, which is conveniently available in every room component.
The component itself processes all the images through Sharp via a GraphQL query to fully optimize quality and size. I also took advantage of lazy loading the images to increase the perception of speed. Images only load when they are called through the carousel—that is, unless all the currently fetched images are already loaded.
Because there are so many hotel rooms and each room had at least 4 very high quality images, this component made it possible to showcase them all without sacrificing too much performance.
The rooms are ordered in descending order of what is most enticing visually and what is better for the hotel.
This page did not exist on the old site, but is crucial to the experience of the new redesign, which heavily focuses on visuals to draw in the customer. The client had an abundance of beautiful photos already taken, so I took full advantage of them by showcasing them all in a single location. The hotel itself prides itself in its modern renovations and beautiful interior design, and a gallery to showcase it brought the client a great sense of pride.
Because this page has even more photos than the Rooms page, Sharp was once again necessary to optimize the size and quality of the photos depending on where it was being loaded. I also utilized a lightbox plugin to allow users to browse through the photos in a slideshow style.
The previous homepage was essentially useless to the user—it provided no information, nor did it direct the user to any destination with information. In the redesign, I treated the homepage as a portal to the other main pages of the site, a normal convention for most sites.
Although the top menu is visible at all times, I took advantage of the vibrant imagery to direct users to where they needed to go as an additional form of navigation.
The copy for each block draws the users into wanting to learn more about the hotel, and the personalized call to action entices the users to click on what is already an attractive link.
The old site was unviewable on mobile, which is simply not acceptable in the modern age. While the visuals were not as prominent in the mobile view, the primary actions of booking a room and exploring rooms were still the key features of the mobile site.
The entire nav menu transforms into the mobile menu via pure CSS, without any Javascript or React magic. Using CSS Grid and Flexbox, rearranging the content into a mobile view was seamless and easy.
The client fell in love with the redesign from the very first iteration. The new branding felt clean, sleek, modern, and professional, just as they had envisioned it. The user experience is straight forward and tailored around the user's discovery of all the information that the hotel had to offer.
The Rooms page is the client's favorite part of the site, as it perfectly solved the problem they had with the previous site in that it did not properly showcase what the hotel had to offer.