Interactive Room Experience for a Boutique Hotel
A semester capstone project for ODE Hotel, designed in a small team at George Brown College. We built two surfaces: a 360-degree interactive room that turns the hotel's themed suites into something you can explore from your phone, and an e-commerce store where you can buy the artwork, amenities, and furniture you noticed inside.
ODE is a small boutique hotel with five themed rooms, each one full of original artwork and curated objects. The owners wanted a way for guests to engage with the space beyond a stay. A way for someone considering a booking to feel the room before they pick it, and a way for someone leaving the hotel to take a piece of it home. The brief was to design something that did both without feeling like a sales funnel.
Two surfaces sharing one catalogue. The first surface is a 360-degree interactive room. Guests drag the screen, look around, and tap the small pin on anything they want to learn about. A side panel slides in with the story behind the object, plus a Buy Now button if it is something they can take home. The second surface is Ode Objects, the e-commerce site, which is where that purchase actually completes. QR codes printed in the physical hotel point back at the same catalogue.
A clickable prototype of the full experience. Five rooms, each with its own theme. A working catalogue of artwork, amenities, and furniture. An e-commerce site for Ode Objects with shop, collections, room tour, and partnership pages. Two scenarios tested with real ODE guests before the final presentation, with the navigation patterns iterated based on what they actually struggled with.
The 360 view is the heart of the project. Guests land in the UNBOUNDED room (the jungle-themed suite), see a small welcome modal that explains the two kinds of pin (room views and objects), and then take over. Drag the screen to look around. The pins float over real items in the room, the bed, the closet, the bath products, the artwork on the wall. Tap any pin and the screen takes you closer.
The obvious version of this product is a 360 viewer that links out to a separate shop when you tap something. I argued for the opposite. When a guest taps the bath products on the shelf, a panel slides in over the room with the story, the photograph, and the Buy Now button. The room stays behind it. They never leave the space they came to explore.
The argument is that the value of spatial discovery is context. The bath products are interesting because they are in ODE's bathroom, not because they are nine dollars on a shop page. Pulling the guest out of the room to complete a purchase undermines the reason they tapped in the first place. So the panel sits in front of the room and the room is always one tap of the back arrow away.
The legend on the welcome modal is small but it matters. White pins are room views, the little features of the suite that are part of the experience of staying, like the closet, the seating nook, or the view out the window. Yellow pins are objects, the things you can actually take home. We coded them differently because guests in early prototypes assumed every pin was something for sale, which made the white pins feel like dead ends. Splitting them out turned the room into something you can explore for its own sake, with the shop layered on top.
Ode Objects is the other surface. It is a full online store for the artwork, amenities, and furniture you saw inside the room. The homepage opens with a Discover Our New Collection hero, three category cards (Our Objects, Our Rooms, Our Collabs), a product grid, and a feature panel for the artwork that lives in each room. The aesthetic is intentionally cheerful and warm, a bright lemon yellow with charcoal type, because the ODE brand identity is built around colour-saturated, sun-lit rooms and the storefront had to match that mood rather than the muted hotel-website default.
Shop, Rooms, and Collabs are three different paths into the same catalogue. Shop is the conventional product grid for someone who knows what they want. Rooms is the discovery path, where each themed suite (Global, Modernist, Unbounded, Rooted, Blues) is a doorway into the objects it contains. Collabs is the editorial path for the partnerships, like local artisans, custom furniture studios, and the restaurants ODE pairs with. Same catalogue, three reasons to visit.
Every product page has a quiet text link under the photo that says "View item in Ode's Room." That link is the bridge between the two surfaces. From a flat product page, the guest can teleport back into the 360 room and see the object in context. It is the same loop the QR code in the physical hotel runs in reverse, just with the digital door swapped for the printed one.
The page itself is the standard e-commerce layout. Photo, name, price, description, add to cart. The only twist is the link back into the room, which makes Ode Objects feel like part of the experience instead of a checkout queue glued onto the side of it.
The hotel's walls are full of original paintings by AI, a local artist whose work is part of ODE's identity. We designed the artwork pages to feel different from the everyday product pages without breaking the catalogue. The same template, but the metadata changes. Editions, Materials, Size. The description is a real read, not a marketing blurb. And the price is the kind of price you put a single piece of original art behind.
The point is that putting an $1,100 painting and a $19.99 amenity in the same catalogue does not cheapen the painting if the page knows the difference. It just means a guest who fell for the painting in the room has a place to land.
The semester started with ten ideas. A digital scrapbook, a virtual events platform, a personalized guest journey, a digital concierge chatbot. ODE narrowed to three for us to take further. We picked the Interactive Room Story Platform because the other two leaned on conversational interfaces, which is the easy answer right now, and the room platform was the only one that turned ODE's actual differentiator (the artwork, the curation, the themed suites) into the surface itself. The other ideas would have worked at any hotel. This one only works at ODE.
Each one had a more obvious alternative we walked away from.
The conventional pattern is to take the user to a product detail page. We kept the purchase in context because the value of the spatial experience is the context. Pulling the guest out of the room to buy a thing they noticed in the room undoes the reason they tapped in the first place. The trade-off is that the product detail page exists, but it is a secondary surface, used by people coming in from the shop or from a QR code, not by people in the middle of exploring a suite.
Early users assumed every pin was something to buy. The white pins (room views like the closet, the seating nook, the kitchenette) felt like dead ends, because tapping one and learning about the closet design felt like a bait and switch. Splitting the legend into white pins for room views and yellow pins for objects to buy let the closet be the closet without breaking the e-commerce path. It also let the room hold its own as an experience, not as a glorified product gallery.
Once we had Ode Objects working, we put QR codes in the physical hotel so a guest who fell for a painting in person could scan and land on the same product page a virtual guest would. One catalogue, two entry points. It also meant a guest who left the hotel could come back to Ode Objects weeks later and the painting would still be there.
We used these as the two scenarios in our final user testing, because they cover the two ends of the funnel and they pull the design in slightly different directions.
John is a frequent business traveller. He has not booked yet. He lands on ODE's website, scrolls to the room browser, opens UNBOUNDED in the 360 viewer, and explores. The thing the product has to do for John is let him feel the room enough to feel comfortable booking it without ever having seen it in person. The objects he taps along the way are secondary. The fact that he can buy a painting is a bonus, not the reason he is here.
Emily is in the hotel. She noticed the paintings on the wall and asked the front desk if they were for sale. The receptionist hands her a QR code printed on a card. She scans it and lands on Ode Objects, where she can browse the artwork and add a piece to her cart. The thing the product has to do for Emily is bridge a physical moment of attention into a digital store, fast, without making her create an account or sign up for a marketing list to see the price.
The semester ended with the prototype clickable and presented. The honest list of what I would change with another month is short and useful.
Right now the Buy Now button inside the 360 room hands off to the product page, where the actual add-to-cart action lives. The handoff is fine for a prototype but it should be one tap from inside the room. A floating cart count in the 360 corner would close the loop.
The pins are subtle on purpose, but in testing some guests missed them entirely until they were prompted. A gentle pulse or a count of discoverable items in the room's top bar would give the same affordance without making the room feel like a Where's Waldo puzzle.
The pre-booking John and the in-hotel Emily use the same surface but in different ways. The product would benefit from acknowledging that earlier, maybe with a small entry context (Are you exploring before your stay, or are you here in the hotel right now?) instead of treating both flows as one.
The semester ended on a clickable prototype and a presentation. The pattern stayed with me though. Most boutique hospitality websites lead with a stock photo of a building exterior and an "About Us" paragraph. The thing the guest actually wants to know is what the room is like inside, who picked the art, and whether they can take any of it home.