Riosol Hotel
E-Commerce Website
Type:
Real Client Project // Responsive Web & Mobile Design
Launch:
May 2021
My Role:
Software:
UX/Product Designer
Figma, WIX
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 on WIX.
The Problems
Problem #1:
Customers make reservations through Facebook, email, or phone, which requires more steps, and constant back and forth between the employee and customer. Potential guests to do not have the ability to view images of the room, along with hotel prices, amenities, and additional information, in a centralized way to compare between other hotels.
Problem #2:
The hotel occasionally loses money due to last-minute cancellations because they do not have a virtual payment system to reserve rooms.
Problem #3:
The reservations team relies on an Excel spreadsheet to track reservations and sometimes double books a room because third-party website bookings (Booking.com, TripAdvisor) do not sync with the Excel sheet the reservations team uses.
Problem #4:
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.
Problem #5:
Company does not have a style guide that aligns with the direction they are trying to take their 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, or view hotel amenities, services, and important information to make booking decisions easier.
Employee Goals:
-
Avoid double bookings and easily keep track of upcoming reservations by digitalizing the reservation system.
-
Reduce the back and forth between customers and reservations team.
Business Goals:
-
Stay within budget, while finding a solution that can scale with them.
-
An easy-to-use reservations system that can easily be taught to the team.
-
Review content strategy (images) to ensure the content aligns with the brand.
-
Establish brand guidelines for the company.
Main Challenge:
Finding a low-cost solution that offers a hotel management system integration that offers easy-to-use reservations systems with customer management, marketing, invoice, and online payment options, and site monitoring capabilities to improve the user experience, while also helping reach business goals.
Solution:
Cloud-based web-development service like WIX, Squarespace, Wordpress, or a reservations system like Hotelogix that can be integrated into the website.
WIX ended up being the solution for Riosol Hotels because it offered the features they were looking for in a cloud-based service and is less than $350 annually versus the cost of Hotelogix and other hotel management systems which cost around $2,800 and up per year.
Wireframes
The last page shows the high-fidelity wireframe I created for the website, but my original designs had to be modified to align with the limitations of the cloud-based service I used, which was WIX.
Changes to Original Designs
The last page shows the high-fidelity wireframe I created for the website, but my original designs had to be modified to align with the limitations of the cloud-based service I used, which was WIX.
Change #1: 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.
Change #2: Use WIX Responsive Elements
After designing the website on WIX, I checked to see if it was responsive 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
Change #3: Search Bar & Rooms List Design
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
A total of 5 usability tests for mobile and web were conducted, which resulted in a few insights:
-
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.
-
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
-
How to create a MVP to ship the project on time, along with the limitations of a cloud-based web-development program.
-
The importance of knowing the pixels for 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 960px site and make it responsive.
-
Being adaptable to change. I had to change a few parts of my design when I realized the way that WIX worked wasn't able to suit the design I had created for the website. I had to identify which elements provided by WIX were responsive like boxes, slideshows, and other elements, to make sure the website looked the same on all devices. This also changed the way my design looked. The room filtering app provided by WIX was not as customizable as I would have hoped so that ended up changing compared to my original design.
-
How to manager multiple deliverables and know when to delegate tasks to execute this project on time.
-
Importance of collaborating with your team to deliver a project on time.