Riosol Hotel
E-Commerce Website
Type:
Real Client Project // Responsive Web & Mobile Design
Launch:
May 2021
My Role:
Software:
UX/Product Designer
Figma
Team:
Marketing Associate
Duration:
2 months
In light of the massive economic effects COVID-19 had on the hospitality industry, I decided to help establish a digital presence to drive customers to their website increase sales and revenue. After reviewing the business goals, I designed the company's first-ever responsive desktop and mobile website.
The Problems
Lack of centralized way to make a reservation
Customers either book a room through Facebook, email, WhatsApp, or phone. This process requires constant back and forth between the employee and customer because potential guests do not have access to view images of the rooms, hotel prices, amenities, and services to compare hotel options.
No online payment system
The hotel occasionally loses money due to last-minute cancellations because they do not have an online payment system to reserve rooms. They currently use bank transfers when customers want to make a deposit for a room, or they simply have customers pay upon check-in.
Double bookings from third-party sites
The reservations team relies on an Excel spreadsheet to track reservations and sometimes double books a room because third-party site bookings (Booking.com, TripAdvisor) do not sync.
Low Budget
Given the company was heavily affected by the pandemic, it now counts on a low budget for the website and mobile site, so they are looking for a low-cost option that offers a hotel management system integration.
Inconsistent Branding
Riosol Hotels does not have a style guide that aligns with the direction they are taking the brand.
Project Goals
I scheduled interviews with the reservation's team and stakeholder (CEO) to identify the customer, business, and employee goals. This helped me understand what the most important content to include on the website was, along with the most important features and capabilities this website needed to have to be valuable to all users.
Customer Goals:
-
Easily make room reservations and view hotel amenities, services, and important information to make booking decisions easier.
Employee Goals:
-
Avoid double bookings & easily keep track of upcoming reservations by digitalizing the reservation system.
-
Reduce the back and forth between the customer and the reservations team.
Business Goals:
-
Stay within budget, while finding a solution that can scale with them.
-
An easy-to-use reservations system that can be taught to the reservations team.
-
Establish brand guidelines for the company for consistent branding across all channels.
Main Challenge:
Finding a low-cost solution that offers a hotel management integration.
The company is looking for a reservations system and additional features: customer management, marketing, online payment options, and site monitoring capabilities to improve the user experience, while also helping reach business goals.
Solution:
Cloud-based web-development service, WIX Hotels.
WIX ended up being the best solution for Riosol Hotels because it offers all the features they are looking for in a cloud-based service and is around $350 per year versus the cost of Hotelogix, a hotel management system that costs around $2,800 per year, not including the cost to hire a web developer. WIX also offers 24-hour support and the marketing and customer manager capabilities for the Reservation's team to utilize.
Information Architecture
Reviewed notes from stakeholder and employee interviews to determine the most important content and pages to include in the website, which resulted in the site map below.
Site Map
.png)
Wireframes
Initial Sketches
Changes to Original Designs
My original designs had to be modified to align with the limitations WIX.
Width change from 1440px to 980px
The high-fidelity wireframes I created had a width of 1440 pixels, but the width of a WIX website is fixed at 980 pixels to accommodate the majority of users and ensure compatibility with smart devices, like iPads and tablets. Designing outside of these pixel borders meant vital content for my user's browsing experience could be lost.
The font sizes and layout of the page changed, and I had to work quickly to ensure I met the company's timeline, so I ended up designing the website directly on WIX, rather than creating new wireframes on Figma.
1440px design
Using WIX Responsive Full-Width Elements
After designing the website on WIX, I checked its responsiveness on an iPad Pro, Macbook Pro 13" and 16", and an Intel desktop computer, but I noticed some of the elements were either missing from the site or had shifted, changing the layout and harming the user experience. Users were unable to view important hotel information and had to move the page around to access the outermost right and left parts of the page.
To solve these issues, I used full-width elements on the site and kept text boxes and images within the vertical grid lines to appear correctly on most screen sizes:
-
Strips & Columns
-
Wix apps
Search Bar & Rooms List Design Change
The Search Bar and Rooms List apps provided by WIX Hotels had limited customization capabilities, so the font did not align with the brand guidelines and the design and layout changed entirely. I show the changes below:
Original Search Bar
Revised Search Bar (WIX App)
Original Rooms List
Revised Rooms List (WIX App)
Branding
After creating the low-fidelity wireframes on Figma, I also had to speak to the CEO to understand the direction they were taking the brand to create a style tile for them that includes colors palettes, color combinations, typography, mood board, and photographic library.
Mood Board
Color Palette
Content Strategy
Once the type of images that aligned with the brand redirection was selected, I worked closely with the Marketing Associate to audit the content which included the following:
-
Images of the rooms & common areas, as well as ones that captured the lifestyle of the hotel and the location, Tarapoto.
-
The most updated information about the rooms, hotel services, Terms & Conditions, Cancellation Policy, and COVID-19 Protocol.
What we did to ensure all the content was ready on time:
-
Scheduled 4 photographer information interviews to figure out pricing and photographic style to schedule a photo shoot to capture images that align with the new brand redirection.
-
The Marketing Associate copywrote the information found on the website, and worked closely with the reservations team to ensure all the hotel information was accurate.
Usability Testing
5 usability tests for mobile and web were conducted, which resulted in a few insights:
Issue with reservations confirmation screen
After completing their reservation on the desktop, the reservation confirmation showed further down in the screen, so users were unsure if the reservation was completed. They completed the process twice before checking their email for the confirmation. To solve the confusion, I removed removed the header and moved the WIX reservations app to the top of the screen. This solved the confusion participants originally had.
Difficulty finding the restaurant and bar menu
Users had a hard time finding the restaurant and bar menu on the restaurants page because it was not at the top of the page and did not have the proper headers to clarify each section. Users didn't scroll down to look for the menu, and expected to find it at the top right below the header. To solve this, I added the restaurant menu to the top of the page, and the bar menu remained further down in the page, but I added the Bar right below the title of that section so it was easier to find.
Learnings
Managing multiple deliverables & delegating tasks.
How to manage and organize a projects' various deliverables and collaborate with the team to delegate tasks and deliver this project within the timeline.
Being adaptable.
Understanding that designs might change depending on the limitations of the system you are using, and knowing how to problem solve quickly to avoid getting behind on a project.
Conducting more research.
The importance of knowing the limitations of the cloud-based system you are using. I had originally designed for 1440 px and once it came down to adding this design to WIX, I had to design for a 960 px site and make it responsive.