avid Hotels

avid Hotels

avid Hotels

IHG
  –  
09
.
10
.
2017
A desktop computer which has the website open to the homepage of avid hotels

problem

IHG had a new ambition laid down by its new CEO: double company growth by the year 2020, referred to company-wide as IHG 2X

solution

In order to truly meet this new ambition, a brand was to be created to fill the gaps left by IHG's current properties. Of this void, avid was born.

A render of the exterior of the avid Oklahoma City property, the first avid hotel. It's very modern, with red accents on the outside and a large red avid logo on the front.
A render of the exterior of the avid Oklahoma City property, the first avid hotel. It's very modern, with red accents on the outside and a large red avid logo on the front.
A render of the exterior of the avid Oklahoma City property, the first avid hotel. It's very modern, with red accents on the outside and a large red avid logo on the front.
A render of the exterior of the avid Oklahoma City property, the first avid hotel. It's very modern, with red accents on the outside and a large red avid logo on the front.

The future of everyday travel

avid hotels was to be the brand of the future. In a world where the very real threat of AirBnB loomed, avid aimed to be everything the hotel industry was not; clean, uncompromising in regards to essentials, and, most importantly, affordable. Branded by british agency forpeople, it became the job of the IHG Digital Studio to build this breath of fresh air quicky, affordably, and in line with all currently existing systems

A person holding a cup of coffee with a red lid. On the cup, in red text it reads "Strong coffee. 2 milks. 1 sugar. Checkmark, Ready for the day."
A person holding a cup of coffee with a red lid. On the cup, in red text it reads "Strong coffee. 2 milks. 1 sugar. Checkmark, Ready for the day."
A person holding a cup of coffee with a red lid. On the cup, in red text it reads "Strong coffee. 2 milks. 1 sugar. Checkmark, Ready for the day."
A person holding a cup of coffee with a red lid. On the cup, in red text it reads "Strong coffee. 2 milks. 1 sugar. Checkmark, Ready for the day."

Simplified site, complex processes

Arguably the most challenging part of any UX project is the handoff from creative to developers. You know how it goes; you pass them a deck with a style guide covered in lines and arrows and padding and pray to god that the front end developers don't fuck up your precious baby, or if they do that there's enough time and/or money to fix it.

With avid, we had neither the luxury of time or abundance money to spare; starting on January 1st 2018, the site needed to be live by May in order for customers to book the first hotel for it's opening in October. That means we had 120 days to design, build, QA, UAT, and launch a fully-fledged website. With a launch date that was fast approaching, I was brought in to co-design the site and build a functional Webflow prototype in order to ensure that the creative process could occur iteratively and without roadblocks. The idea here is simple; by building out the prototype in Webflow, we effectively eliminated any guesswork on the part of our developers partners. All the code was to be there, and any hover state, interaction, or otherwise would be accounted for.

A screenshot of the hotel details page, on which is an image gallery for the hotel and other relevant hotel information. The page features rich red colors as well as a light blue.
A screenshot of the hotel details page, on which is an image gallery for the hotel and other relevant hotel information. The page features rich red colors as well as a light blue.
A screenshot of the hotel details page, on which is an image gallery for the hotel and other relevant hotel information. The page features rich red colors as well as a light blue.
A screenshot of the hotel details page, on which is an image gallery for the hotel and other relevant hotel information. The page features rich red colors as well as a light blue.

Bun in and out of the oven

Day 1, we hit the ground running. Working with our UEA parters, co-designer Sanithna and I tackled the very real challenge of taking an identity that was hot out of the oven and translating it into a site which reflects the values of the brand. Little nuances helped to bring the brand to life; little white rules beneath tabs, buttons changing to a slightly different hue on hover, and not a dash more than necessary of the powerful colors that, when combined, become avid hotels.

Because of our Agile processes, we needed to be designing, styling, and enabling our developers to be working simultaneously. The image you see here is of the prototype I built to meet this challenge. Every piece of it was created with intent, from padding, alignment, line height, color, font size, image, and more. I'd ask that you take a moment to explore this prototype, as alot of time, effort, design, blood, sweat, and tears went into its creation.

An animated image showing how the prototype I made scales up and down in the viewport of the browser
An animated image showing how the prototype I made scales up and down in the viewport of the browser
An animated image showing how the prototype I made scales up and down in the viewport of the browser
An animated image showing how the prototype I made scales up and down in the viewport of the browser

Launch baby, launch!

www.ihg.com/avidhotels launched on May 3rd 2018, and by May 7th 2018 avid signed their 100th hotel. And boy, am I a proud daddy.

A map of the united states, with many red flags pinned onto it indicating where future avid hotels are already being planned
A map of the united states, with many red flags pinned onto it indicating where future avid hotels are already being planned
A map of the united states, with many red flags pinned onto it indicating where future avid hotels are already being planned
A map of the united states, with many red flags pinned onto it indicating where future avid hotels are already being planned