Screenshots are meant for reference only and were compiled over time beginning before beta release; they may differ slightly in content and layout from the live site.
General notes
The Sister City web UI is a client-side web application built using the Vue.js framework. It is delivered as a static, pre-rendered HTML/CSS web site that becomes dynamic once the application code is loaded in the user's browser. This allows for the full range of interactive features and UI enhancements that a Single-Page Application can provide, without sacrificing SEO or requiring a lengthy load time before content is displayed.
Discovery
Home page
Video feed
Complete.Pending hardware installation, the home page will contain a live video feed showing conditions at the NYC Hotel location, streamed from a Raspberry Pi in a weather-proof case. We have arranged for set-up with Emily G at Atelier. It should be plug-and-play and the package will include instructions. We’ll display a fallback image on the siteif the video cannot be displayed.
Weather data
Complete. The home page displays real-time weather information from the Dark Sky API in a human-friendly format.
Something else
Info section landing page
Complete. The site includes a static informational“brochure” component in the /info section. This section contains a number of pages rendered from markdown documents to facilitate basic content editing for site administrators. The markdown files in question live in /src/assets/data and are pre-pended with the info- prefix. Pages in this section include:
Complete. Users have the ability to sign up through forms on the home page and contact page. This is powered by Netlify's form back-end.
Booking
Complete. The booking subsystem is the core of the UI. Users move through the booking process starting with the calendar view(/book/dates) and then move on to the room selection view(/book/rooms) and finally to the checkout view(/book/checkout). As users move through the booking flow, they see their receipt update in real time to show date selection, room selection, nightly rates, presence of member discounts or promo codes, and links to proceed to the next screen.
The application hangs on to key data during this process to minimize requests made to the API and provide a faster user experience. In many cases a user’s selection will be preserved unless they take some action to invalidate it; for example, the UI will remember the dates a user has selected even if they navigate out of the booking flow and navigate back in later in the same session.
The application also exposes key information from this process in URL parameters. This allows a user to bookmark a link to the Room Selection or Checkout page and preserve their date selection, room selection, and promotional code. Because room availability could change between a user’s visits, the different views within the booking flow are also prepared to show various messages to the user in case there is some kind of problem: rooms no longer available for the selected dates, invalid URL parameters or promotional codes, etc.
Calendar
Dates view: initial state
Dates view: trip start date selected
Dates view: trip end date selected
The Calendar component takes its cues from a desktop calendar application instead of the cramped widget that is more typical on travel sites. The calendar loads a year's worth of data from the API and displays the lowest rate available for a given day. Dates display as either available or unavailable. Dates can also indicate other statuses like sold out, minimum stay, or promo rate available.
Clicking an available date updates a user’s date selection status. Depending on other factors, this may set a user’s start date, select an end date(if a start date has already been selected), display a message(that a minimum stay is required, for example), or clear the selection. The user’s date selection status is displayed in real time in the receipt component.
Room selection
Rooms view: pre-selection
Rooms view: post-selection
Once a user has selected trip dates(either through using the Calendar component or by providing valid URL parameters), they can access the Rooms view.
General notes
Discovery
Video feed
Weather data
Something else
Newsletter sign-up
Booking
Calendar
Room selection
Checkout