Hospitality SaaS

I worked for a startup creating a SaaS product for the hospitality industry. The goal of the product was to streamline hotel operations by crafting a single tool that could do the functions usually done by multiple software programs.

Because of an NDA I am only sharing a limited number of screens.

Client
Stealth Startup

Role
UX Designer

Duration
5 months

Tools
Figma

The Brief

When I joined the startup they had just completed user research, and were beginning to design initial wireframes for testing.

My task was to design a check-in/out process for hotel staff.

My Role

  • Develop an end-to-end user flow.

  • Iterate on, and test designs based on user feedback.

Target User

I reviewed the user research to identify the user’s biggest job to be done and pain point.

Front Desk Operations

Running the front desk of a hotel can be total chaos. This solution will have to be easy and fast, so someone juggling lots of responsibilities can pull it off on the fly.

Pain point: hotel software being complicated and inefficient.

Job to be done: optimize for speed.

Initial Wireframes

I decided to start by designing a dashboard. A dashboard could solve for the issues of clunky, complicated software hotel workers often have to use by gathering all the most important information they need to know on one place, and making common tasks like checking-in easily accessible.

Task Flow

Dashboard design

The goal of this dashboard design is to get all the major tasks and information hotel staff need to access onto one page. I included a scrollable summary of hotel stats, so staff could stay up-to-date with a quick glance. The most urgent actions, check-in/out, are formatted in big buttons to catch the eye, and less urgent actions are listed below.

Note: at this point the user flows were designed in mobile and desktop. I’m choosing to show you this iteration in mobile, and the next one in desktop.

Horizontal scroll of the dashboard highlights in action.

Check-in process

Checking guests in and out can require a lot of data entry for hotel staff, so I aimed to make the process easier by breaking it down into digestible steps. This would allow staff to focus on reviewing information one step at a time, and reduce the potential overwhelm and chaos of a full-page form to fill out.

Check-out

The check-out process followed much of the same steps for check-in, with the added step of entering/scanning the room key number for collection.

User Testing & Feedback

Our team performed user testing, and conducted an interview with someone who worked at a hotel on the usability of our initial designs.

Overall, our designs performed realitively well with a couple key takeaways.

Key Takeaways

  • The check-in/out process needs to be accessed via a modal rather than the ecommerce style flow (the modal-pattern is industry standard).

  • Hotels usually collect room keys with just a confirmation of the guest’s name, no scanning required.

  • Going forward, the MVP of the product will be designed only in desktop.

  • Reservations need to include package additions (e.g. breakfasts)

Hi-Fidelity Wireframes

I redesigned the check-in/out flow as a modal (another design team took charge of dashboard design), and designed a more detailed reservation page. Being able to check guests in/out via a modal is easier and quicker for staff, and ultimately solves their issues better than my original design.

Check-in/out modal

I designed the modal to display the most pertinent information a front desk employee would need to see (e.g. number of nights, if the reservation has been paid). I also color-coded the payment section (red for unpaid, blue for paid). These condensed reservation views and color coding would allow staff to quickly scan and gather all the info they needed to continue helping a guest.

Make a Reservation

User testing feedback indicated a need for a more thorough reservation page. Although hotel staff are often juggling chaos, they also need access to a reservation’s full information, and a full form such as this is industry standard.

Guest details being added.

Complete Reservation

This design ultimately allows hotel staff to review the full amount of reservation and guest data. To help make this page more scannable, I suggested adding the reservation history I’ve had experience using Salesforce, and noticed the activity logs were extremely useful to my coworkers in figuring out customer orders.

Completing a reservation in action.

Reflections

This project was in a completely different area of UX than I’d worked in before, and I loved learning more about the UX patterns of SaaS and the hospitality industry. I also gained some valuable experience working in completely remote startup environment, and I think my own time management skills grew greatly because of it.

Next
Next

Jobs for Humanity