Freelance Project

The Edward Hotel

Overview

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 Site

My Roles

Designer:

  • Without any previous guidelines, I was given full creative freedom to rebrand their beautiful hotel's digital presence.
  • The new website was redesigned from scratch without any requirements of keeping traces of the old site.

Developer:

  • After the consultation, we decided to forsake a CMS and opted to use GatsbyJS for React's features, snappy load times, and versatility.
  • While it is a small site, I built the front-end using system-based components and an advanced SCSS architecture to ensure that it could scale if ever necessary.

Before & After

Initial Thoughts

The 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:

  • The concept of modernizing something seems very intrisical to designers, but the perception of 'modern' can be subjective. It's important to be aware of the target audience, and also the client themselves, whom in this specific scenario are well-versed in interior design and architecture. To understand the client's idea of 'modern' and 'professional', I asked them to show me examples of other hotel websites that they thought fits this description.
  • Because there weren't any branding guidelines to go off of, the visual language of the new site would have to be built entirely from scratch, which comes with both a lot of creative freedom and new challenges, since the new branding would have to properly reflect the hotel's historical, luxurious feel while fulfilling the requirement of being modern.
  • While invisible on the surface, Wix's sitebuilder can be clunky, causing higher than optimal load times, which in turn creates a more dated experience for users, as well as some SEO issues. An upgrade in technology can certainly add to the feeling of 'professional' and 'modern'.
  • Professionalism in visual design is almost always correlated to proper use of basic design theory concepts, something the original website was undoubtedly lacking.

Challenges

  1. Content is of course the most important part of an informational website, and well-written copy is crucial in building trust and communicating with users. The old copy was very unprofessional and the language was inconsistent across the board. To address this, I suggested bringing in a professional content writer to help us revamp all the copy on every page.
  2. The new branding has to look modern in the digital space, while maintaining some sort tie to the hotel's own signature look in person. Fortunately, because the client had so many high quality photos of the hotel, this was much easier to accomplish.
  3. Because the new website is so rich in photography, a traditional static HTML and CSS site would not only be difficult to build efficiently, but performance would be a huge issue. To address this, I opted to use React, specifically GatsbyJS, a static site generator, to take advantage of image processing packages such as Sharp that would help with performance and buildability. Addtiionally, without a backend, security issues are no longer a concern.
  4. The hotel uses an external booking software that syncs calendars across other booking sites such as Expedia. This is ultimately the biggest barrier, as we have no control over the actual booking experience of the user. The best we could do would be sending the user off to the third-party site feeling satisfied and confident enough to successfully book a room.

Objectives

Make the site feel more modern and professional. It sounds simple, but there are many factors and layers to this goal.

  1. First and foremost: improve the usability, information architecture, and navigation of the site. Nothing is more unprofessional than a confusing user experience.
  2. Second, improve the performance and SEO of the site to increase user acquisition. Faster load times, meaningful content, longer retention times, and semantic code all contribute to a better performing site.
  3. Third, make it easier to book a room, which is ultimately the user conversion that the business wants.
  4. Forth, utilize and showcase the hotel's beautiful photos that were already available.
  5. Last but not least, create a new visual language and branding identity.

Identifying Current Problems

  1. The website does not show users anything about the actual hotel before forcing them out to an external website to book a room. Without a premediated goal of booking a room at this specific hotel, users are unlikely to convert.
  2. The poor use of typography heavily contributes to the perception of 'dated' and 'unprofessional'.
  3. The poor use of color makes text unreadible, rendering most of it useless.
  4. There is not enough content for the pages that are currently set up, creating the perception of them being incomplete.
  5. The poor use of photography not only wastes an abundance of valuable assets, but contributes to the website looking unprofessional.

Improving the User Flow

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.

Results

  • The Explore page on the old site was essentially useless, so it was removed completely and replaced with Gallery, a new page displaying all the professional high quality photos of the hotel.
  • The Contact Us page was changed into a component that exists at the bottom of every page to ensure that users are able to quickly send messages to the hotel.
  • While booking a room is the ultimate conversion, to ensure that it would not fall through, users are provided with more information around the rooms before being allowed to book. For users who have premediated goals of booking, the Book Now button remains at the top level navigation, which is fixed on every page.
  • Private Events was condensed into a smaller component sitting on the homepage, as it does not have enough content to warrant its own page.

New Visual Design

Logo

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.

Typography

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.

Color

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.

Form

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.

New Features

Find Room Component

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.

New Rooms Page

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.

New Gallery Page

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.

Home Page Portal

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.

Responsiveness

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.

Conclusion

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.