hotel tonight in the age of context
DESCRIPTION
I was asked by Hotel Tonight to reimagine their browsing experience, reduce friction and increase conversions. I started from the assumption that it is possible to capture users preferences and understand their future plans. This way the app could focus on a smaller number of hotels more likely to be chosen by the user. After exploring a revisited version of the hotel list, I moved to an idea that the app could get rid of the list all together and use a cards based interface. For that I explored both a vertical and a horizontal swiping options, settling on the latter and creating a hi-def mockups.TRANSCRIPT
![Page 1: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/1.jpg)
Hotel Tonight in the Age of Context
by Davide Di Cillo
![Page 2: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/2.jpg)
Exercise
Redesign the list view with a revolutionary upgrade while preserving Hotel Tonight’s brand image
![Page 3: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/3.jpg)
Goals
Increase conversions !!!Reduce friction !!!Maintain HT style
![Page 4: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/4.jpg)
Assumptions
Focus on key choice factors !!!Integrate email and calendar !!!Get social and contextual data
+
+
+
![Page 5: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/5.jpg)
List view - Top feature
Pros: ‣ Familiar look and experience ‣ Current animations can be maintained !
Cons: ‣ Doesn’t look very well with too few results ‣ Empty space after last result is awkward !
Possible solutions: ‣ Use the empty space after last result for
other purposes
City Name # night< Cities
![Page 6: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/6.jpg)
Card view - Vertical swipe
Pros: ‣ More real estate ‣ Most of the current animations can be
maintained !
Cons: ‣ Swiping to see next card less intuitive ‣ Swiping down to see full screen pics
won’t work !
Possible solutions: ‣ Instruction “Swipe for more” ‣ Tutorial ‣ Position indicator
City Name # night
BOOK NOW
![Page 7: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/7.jpg)
Card view - Horizontal swipe
Pros: ‣ Very intuitive !Cons: ‣ Horizontal swipe conflict with image swipe ‣ Challenging image transition to full screen !
Possible solutions: ‣ Card could zoom in and the tapped image
would expand
City Name # night
BOOK NOW
![Page 8: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/8.jpg)
Card content
Wish list: ‣ Focus on decision making attributes ‣ Bigger picture !
Question: ‣ What does the user really care about?
(I.e. Is the address/map more important than the geo context of the hotel’s position?)
City Name # night
BOOK NOW
Hotel Name65% ratings from HT
Decision factor 1 Decision factor 2 Decision factor 3 More…
Best price $000 $000
![Page 9: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/9.jpg)
Visuals
![Page 10: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/10.jpg)
Visuals
Super-sized and blurred main image as background for ambiance
Swipe on picture to see more pictures or tap to see full screen
Icon to trigger the classical list view
City name used for changing city
Tap on info area to see more info including address and map
Improved image cut
![Page 11: Hotel Tonight in the Age of Context](https://reader030.vdocuments.site/reader030/viewer/2022020122/54797a5bb4795972098b4813/html5/thumbnails/11.jpg)
Transition
Card swipe: ‣ Blurred background should fade into the blurred background of the next card ‣ Book button’s color should fade into the color for the next card !
Tap on picture: ‣ The card should zoom out to feel the entire screen ‣ Card elements should slide out similarly to the current animation ‣ Close button and page indicator should slide in !Swipe on picture: ‣ Blurred background should fade into the blurred background of the next
picture