top of page

The20 Mentee Portal

Client:

The20, a Wonsulting Company

My Role:

Software:

Product Designer & Researcher

Figma, WIX

Type:

Real Client Project // Responsive Website Design

Team:

Launch:

UX/Product Designer

May 2021

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.

smartmockups_knclfusl.jpg

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

Customer Goals: 

  • Easily make room reservations, or view hotel amenity, services, and important information to make booking decision 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 content aligns with the brand.

  • Establish brand guidelines for the company.

  • Easily record customer emails for marketing services.

  • Communicate Covid-19 regulations, the terms & conditions, and the cancellation policy to customers to avoid miscommunication.

Digitalize the booking process

Main Challenge:

Finding a low-cost solution that offers a hotel management system integration that is simple and easy to use. Affordability was the biggest option because I also needed to consider that they do not have a developer to fix issues with the website, so having a platform that offered this service was important.

Solution:

Cloud-based web-development service that also provides an easy-to-use reservations systems with customer management, marketing, invoice and online payment options, and site monitoring capabilities to improve their reservations teams' experience.

Wireframes

Initial Sketches

I designed 2-3 low-fidelity wireframes and explained to the stakeholder the best solution for the website.

My original designs had to be changed due to the limitations of the WIX website. The following changes were made to the original design: 

  • Book now bar 

  • Rooms layout

  • 1440 px  to a 990px website design

Branding

Color Palette Portfolio.png
Style Guide Portfolio.png

Usability Testing

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.

bottom of page