Ode to the Rooftop
Ode Hotel, a boutique hotel in Toronto, sought to improve the efficiency and profitability of their rooftop event space. The existing booking process involved manual email exchanges, which were time-consuming and prone to errors. As part of the redesign team, I focused on UI Design and User Research to create a streamlined, user-friendly digital booking platform.
Team:
4 People
My Role:
User Research, Visual Design
Duration:
3 Months
Problem
Key Question
Over 90% of booking requests were rejected due to unclear criteria and lack of automated filters.
Users found the process frustrating, with unclear instructions on how to book the space.
Ode's manual email system made managing inquiries inefficient for their staff.
How might we streamline the rooftop booking process to improve efficiency for Ode staff and create a seamless user experience for potential clients?
User browses Ode website looking to host their event
Clicks on “book the roof”
Roof Page
reading information provided on the website
Redirected to email
No instructions, automatically takes you to another page
Write an email (don’t know how to write the email and what to include)
Start
Decision
Page or Screen
Step or Interaction
End
USER FLOW LEGEND
User sends the email, awaits a respond
end
Initial User Flow for Original Booking Platform
Methods
Key Findings
User Interviews: Conducted interviews with 10 participants to understand pain points in the current booking process.
Heuristic Evaluation: Evaluated the existing system's usability and identified areas for improvement.
Heatmaps: Analyzed user interactions to identify friction points on key pages.
Users assumed bookings were confirmed automatically, leading to confusion.
Navigation and CTA buttons were difficult to locate, causing high drop-off rates.
Information about space restrictions was not clearly communicated, leading to mismatched expectations.
Usability Testing Feedback
Key Changes Based on Testing
Challenges Overcome
Users appreciated the clear navigation and the progress bar.
Confusion around booking confirmations was significantly reduced after changes to the wording.
Balancing the needs of both users and Ode’s business constraints.
Iterating on design solutions based on continuous user feedback.
Increased contrast in calendar UI for better accessibility.
Merged start and end time inputs to streamline the process.
Enhanced visual feedback for users on task progress.
Crafting Iterative Design Solutions for Enhanced User Engagement
By leveraging iterative design methodologies and user-centered principles, I developed a seamless experience that prioritizes functionality and aesthetic coherence. Each stage—Lo-Fi wireframes, usability testing, and Hi-Fi prototypes—contributed to creating a solution that balances user needs with business objectives.
Integrated feedback from usability testing sessions into high-fidelity designs.
Focused on visual hierarchy, contrasting colors for better accessibility, and clear labeling for CTA buttons.
Design Decisions
LoFi Wireframes
Reflection
Higher contrast in colour and sizing on calendar when choosing available dates
Combined start and end times fields for ease of use.
Clearly defined progress bar similar to the room booking page on Ode to guide users through the multi-step process.
“Confirm booking” changed to “Send request” to
set proper expectations.
Start
Decision
Page or Screen
Step or Interaction
End
USER FLOW LEGEND
User browses Ode website looking to host their event
Clicks on “book the roof”
Roof Page
reading information provided on the website
Redirected to booking portal
select dates, #of attendees and time.
select dates to see availability
date unavailable
date available
answers meet event space guidelines
criteria not met
platform highlights which inputs made their request invalid (time duration, attendees etc)
inputs # of attendees,time, nature of event, etc.
clicks check availability
user requests booking after inputting text about their event
select different date
user leaves booking platform
end
user leaves booking platform
end
user adjusts their inputs # of attendees,time, nature of event, etc.
confirmation on screen + in email
prompted to use 3d builder
user plays with 3d builder and visualizes their event
receives email confirmation for booking request, link inside email to 3d builder
user creates their event in builder and answers questions on amenities
price adjusted based on responses
user clicks book and receives confirmation
deposit paid and confirmed reservation
end
Goal: User books the rooftop for an event
Updated User Flow
Key Improvements
Users can check space availability in real-time before entering their details.
Automated filters ensure only eligible bookings are processed.
A 3D planner tool lets users visualize and customize their event layout.
