SPG Hot Escapes

Weekly escapes to global destinations

SPG Hot Escapes hero.
SPG Hot Escapes hero.

Starwood Preferred Guest® came to Achiga looking for a website that would promote a rotating selection of hotels and resorts from all of the Starwood brands with discounted stays. Hotels and resorts from across the globe could opt-in to the campaign on a weekly basis and offer savings to all users if they booked a stay and additional savings to those who were SPG® members. Users would have to act fast to get the deal they wanted and were encouraged to return to the site each week to see what new deals were available.

Role

Designer

Company

Achiga

Industry

Hospitality

Year

2015

Contributions

Website Design

Website Design
Website Design
Website Design

We built a campaign website with consideration to the limited amount of inventory there would be week-to-week. On the landing page, after explaining the campaign, we wanted to give users different ways to search – we offered a text field users could also use to search near their GPS location, surfaced popular deals by region, showcased beautiful photography for the top destinations around the world, and gave users the ability to view all of the deals.

The content on the home page would drive users to the search results page with filtering and sorting options, viewing results in a list by default with a map view also available. With consideration to the limited amount of inventory, after there were no more results matching the user's search criteria, we would list results from the wider geographical area with a clear demarcation. Similarly, on the map view, users could toggle between narrowing the results to their search criteria or all available hotels.

Once users found the deal of their choice, they could read about the hotel on the property details page, and book a stay using a new booking widget that included rates for each day. Since Starwood has just added to their API, this page featured the richest content we had been able to design and build to date.

Home page (desktop).
Home page (desktop).
Home page (desktop).

Home page (desktop).

A compact countdown

The first challenge we faced was communicating the campaign details in a succinct way. After many iterations, we decided to show a short blurb with a link to more details, coupled with a countdown clock indicating how long users had to book a stay. These elements were also made available on subsequent pages in a compact format that could be dismissed. This allowed the campaign to be both digestible at a glance, while also providing more details to users who wanted to learn more, available on each page.

A compact countdown

The first challenge we faced was communicating the campaign details in a succinct way. After many iterations, we decided to show a short blurb with a link to more details, coupled with a countdown clock indicating how long users had to book a stay. These elements were also made available on subsequent pages in a compact format that could be dismissed. This allowed the campaign to be both digestible at a glance, while also providing more details to users who wanted to learn more, available on each page.

A compact countdown

The first challenge we faced was communicating the campaign details in a succinct way. After many iterations, we decided to show a short blurb with a link to more details, coupled with a countdown clock indicating how long users had to book a stay. These elements were also made available on subsequent pages in a compact format that could be dismissed. This allowed the campaign to be both digestible at a glance, while also providing more details to users who wanted to learn more, available on each page.

Offer details modal.
Offer details modal.

Full campaign details modal.

Search results - list view (desktop).
Search results - list view (desktop).

Search results page - list view (desktop).

Search results - map view (desktop).
Search results - map view (desktop).

Search results page - list view (desktop).

Home (tablet).
Home (tablet).

Home page (tablet portrait).

Search results - list view (tablet).
Search results - list view (tablet).

Search results page - list view (tablet portrait).

Designing the new availability widget

The final design for the new booking widget truly came together in the final moments. Once we had a finished design for the booking widget with rates itself, because of its large size, anywhere we placed it didn't seem to be right – it felt abrupt to scroll to (especially since it was paired with a SPG promo), and either placed to high or low on the page. Placing it anywhere on the page also meant the user might scroll past it read about the hotel, and need to scroll back up to book a stay, or have trouble finding it if it were at the bottom. Then, on the evening of the last day of design, the idea struck to have a dedicated side column with a standard booking widget that was fixed, so it would always be visible to the user. When users interacted, with the fields to select their check-in and check-out dates, then the full calendar with rates would appear in a modal.

Designing the new availability widget

The final design for the new booking widget truly came together in the final moments. Once we had a finished design for the booking widget with rates itself, because of its large size, anywhere we placed it didn't seem to be right – it felt abrupt to scroll to (especially since it was paired with a SPG promo), and either placed to high or low on the page. Placing it anywhere on the page also meant the user might scroll past it read about the hotel, and need to scroll back up to book a stay, or have trouble finding it if it were at the bottom. Then, on the evening of the last day of design, the idea struck to have a dedicated side column with a standard booking widget that was fixed, so it would always be visible to the user. When users interacted, with the fields to select their check-in and check-out dates, then the full calendar with rates would appear in a modal.

Designing the new availability widget

The final design for the new booking widget truly came together in the final moments. Once we had a finished design for the booking widget with rates itself, because of its large size, anywhere we placed it didn't seem to be right – it felt abrupt to scroll to (especially since it was paired with a SPG promo), and either placed to high or low on the page. Placing it anywhere on the page also meant the user might scroll past it read about the hotel, and need to scroll back up to book a stay, or have trouble finding it if it were at the bottom. Then, on the evening of the last day of design, the idea struck to have a dedicated side column with a standard booking widget that was fixed, so it would always be visible to the user. When users interacted, with the fields to select their check-in and check-out dates, then the full calendar with rates would appear in a modal.

Designing the new availability widget

The final design for the new booking widget truly came together in the final moments. Once we had a finished design for the booking widget with rates itself, because of its large size, anywhere we placed it didn't seem to be right – it felt abrupt to scroll to (especially since it was paired with a SPG promo), and either placed to high or low on the page. Placing it anywhere on the page also meant the user might scroll past it read about the hotel, and need to scroll back up to book a stay, or have trouble finding it if it were at the bottom. Then, on the evening of the last day of design, the idea struck to have a dedicated side column with a standard booking widget that was fixed, so it would always be visible to the user. When users interacted, with the fields to select their check-in and check-out dates, then the full calendar with rates would appear in a modal.

Propert details (desktop, 1 of 3).
Propert details (desktop, 1 of 3).

Property details page (desktop).

Availability booking widget.
Availability booking widget.

Booking widget with availability and rates.

Various mobile screens.
Various mobile screens.

Various mobile screen designs.

Credits

Ian W - Creative Director


Aaron P - Product Manager


Kelly K - Art Director 
Mae-Lynn S - Designer