Hotwire Watch

From hackathon to reality

Client: Hotwire       Role: Lead UX & UI

Hackathon background

The hackathon had a 24 hour deadline to come up with a new engagement concept. With the announcement of the Apple Watch I wanted to work on pitching a concept of users being able to book a hotel instantly by them.

The initial concept I decided to sketch and work on quick wireframes that would be based around users either recieving notifcations of great deals when they are outside their area or being able to quickly turn on the app. The main concept I wanted to push was a process that was easier than using the phone. I began workign on wireframes that would include the bare minimum interactions a user would find useful.

Notifcation based interaction Flow if going through app

The design

Since this was a hackathon I decided to stray away from our current dated branding and focused on a minimalistic and elegant design that would be centered around imagery. I would strip out most details except fo the essentials and relied on a short booking path.

Initial design of the booking flow

The next emphasis was then to make sure we planned out all the possible interactions a user could have with the product. I mapped out the screens to understand what users could engage and go to.

Mapping out the flow

Creating a prototype

Due to limitations of time with the hackathon and wanting a interactive prototype to demonstrate the hack I opted to upload each individual screen to Invision and create my prototype. Click here to view the prototype.

Click here to view the prototype

The verdict & pivot

My hackathon project won and was prioritized to be created for the Apple Watch launch.

With the growth team, I sat down with the Lead Engineer and Project manager and we assessed what was doable for a watch project for the launch of the Apple Watch. The major hurdle was time. The launch was around the corner and we had to decide on a few rules of our project:

  • Use existing apis
  • Not interact with booking path
  • Minimal number of screens

After our assesments we decided the best course for the project was a notification based app for recent purchases. With requirements set, I started sketching out the initial flow and screens for the new direction.

Early sketches covering notifcations, proximity notifications, and sign-in process

Designs & Notifications

The design language for the watch app was a combination of the hackathon's simplicity philosphy merged with our brand guideline. With the style in place I did research on the apple watches documentation of how users could enter the app:

  • Glances: A proactive approach, similar functionality to widgets on ios. A user could check up and access our trip information if it was pertinent to the user for the day
  • Short to long look: We would notify users that they had a upcoming reservation. If they kept glancing at the screen long enough, it would transition to the long look screen.
  • Opening the app: Users could just open the watch app and we would transition to their active trips
Ways users could interact with our app

Defining our card types

We had to define all the types of cards our users could interact with on our app. Besides our 3 main products, we had to account for all other cases users could encounter. With these cases we found a good opportunity to work with our copy people in our new updated casual style copy language to engage users. The types of cards we had are

  • Car rental: This card had difficulty as it required to show users a pick-up and drop off time
  • Hotel: The most common scenario, we had to account for a long name of hotels that would fit and it dictated our font size
  • Flight: Similar to car, we had to shorten the locations to airport codes to fit and be visible on the watches screen
  • No active trips
  • User has viewed all active trips
  • Unsigned in user, they must sign in
  • First time user. We had to loose this screen due to time constraints
All types of card states our users could see

Mapping out the experience

We wanted to make sure every scenario was possible for users to engage in our product. I designed a flow chart with several entry points and engagement scenarios with the application. One feature we had to cut to time was having a screen for first time users that would let them engage a demo mode to try out our application. This would be a great way to entice users and show the capabilities of the app.

Flow chart.

The final product

I used after effects to design this video of expected animation of the app

Animation I did of the app

How was the app launch?

Working closely with developers we were able to finish the app and meet Apple's criteria for launch. We saw a huge jump in activity in our site and app due to being part of the launch suites of Apple Watch apps. Analystic determined the amount of press and engagement we recived covered the development of the app and then some!