PHO Hotel (NYC) - Capstone Project

Pho, a boutique hotel in New York City, the hotel has been running for 7 years, beyond the room and typical amenities, the hotel offers guests a collection of additional services.

Goal : To design a solution that will allow guests to book these services from their rooms. The solution should also help the staff at the hotel organize and deliver these services..

Overview

Jennie is the owner and manager of Pho, a boutique hotel in New York City. She has been running the hotel for seven years, and works hard to strike the right balance between giving her guests privacy, and making sure that they have all amenities at their fingertips.

Beyond the room and typical amenities, her hotel offers guests a collection of additional services:
1. The Spa, 2. The Kitchen, 3. The Schuttle, 4. The Concierge.

Currently, everything is booked over the phone through the receptionist. The receptionist has to coordinate with the spa, kitchen, and shuttle bus manually. This has caused problems. For example, the masseuse might forget to log a walk-in guest, leading the receptionist to book a time slot that is no longer available.

Jennie would like you to design a solution that will allow guests to book these services from their rooms. The solution should also help the staff at the hotel organize and deliver these services.


My Contributions

I designed full high res UI design for website, layout, branding, including site maps, user flows and InVision walkthrugh under the guidance of my mentor Anna Mendoza.

Quick Facts

My Role:
UI/UX Designer
I was the sole UI designer for this project worked closely with my mentor.

Team:

Anna Mendoza | Mentor, UX Director

Time:
Dec. 2017 - Present

Tools:
Sketch, Pencil paper

Pho Hotel Brainstorming / Understanding the problem and context
In order to under the context better, I created some rough sketchs and asked more questions and formed relationships between different entities of the hotes: the kitchen, reception, the spa etc.

Brainstorming diagram
Once I had the rough sketch drawn I converted them into diagrams which helped me consolidate and clarify the goals.
Userflows (Book a hotel)
After successfully creating the diagrams I had a good idea to star mapping out the user flows, I created two userflows:
Userflows (Reserve transportation)
Pho website Sitemap
In order to tie the entire website together I went and created the site map of the entire website, which includes different flows and screens ex: book a room, login, dinning, blog etc. This is a great overview of the PHO website.
Pho website Layouts
I designed different Lo-Fi wireframes layouts for the website and here are my variations.

Rough Layout sketch

Lo-Fi Wireframe


Pho website Branding, Color Palette, UI States
In order to create a high end sophisticated but minimal brand I choose the following color with help from Anna. Also fleshed out the different States of ui components and their behavior on hover was experimented.

Color Palette

UI Button States

Menu - Card Hover treatment

Amenities - Card Hover treatment

Menu 1

Menu 2

Menu 3

Datepicker 1

Datepicker 2


Main Page Hi Res Layout - Variations

Layout 1

Layout 2

Layout 3

My Sketch View - Book a room

My Sketch View - Book a spa

My Sketch View - Order Food


InVision Walkthrus (Click on the purple box to continue the flow)

1. Reserve A Room
2. Order Food
3. Book a SPA