Lyric Travel Booking Website
Disclaimer: This project is still developing. View soft launch here: www.lyric.com. Meanwhile, I’m happy to chat through any questions.
Overview
Lyric designs and manages premium short-term rentals, that combine the spaciousness of an apartment, the amenities of a 4-star hotel, the productivity of your favorite work space, and the creative inspiration of an artistic studio.
In Feb 2019, Lyric launched a new website. It was a huge moment for the company to own an end-to-end booking experience, introduce the new brand, and lay the foundation for the future.
I was part of the team responsible for designing the site. This included the VP of Product, a Senior Product Manager, a Brand Designer, and 4 Engineers. My responsibilities included competitive research, brand strategy, wireframing, UX & UI design, prototyping, and user testing. Throughout the process, I collaborated closely with cross-functional teams to ensure we would fulfill brand standards and design feasible technical solutions.
Challenge
At the start of 2018, our guests could only discover and book our properties through 3rd-party channels such as Airbnb, Booking.com, Expedia, HomeAway, and TripAdvisor.
Moving forward, our team needed a solution that would enable potential guests to discover Lyric properties, book directly, be informed of pertinent room information, and manage their reservations — all online. This would help us achieve operational scale, eliminate 3rd party channel fees, and deliver ownable, delightful guest experiences.
Design Process
Early product definition, user research, and wireframing work had begun before I joined the company. However, this work had been shelved for several months. Once onboarded, I dusted off this work and owned the project with a new Senior Product Manager.
One of my first steps was conducting evaluative research on travel accommodations, hotels, flights, and ecommerce sites. This allowed me to understand the full customer journey. I then identified user stories for different phases: pre-booking, booking, pre-trip, trip, and post-trip. I worked with my PM to prioritize features.
Next, I began sketching and digitizing wireframes.
Next, I began sketching and digitizing wireframes.
Search
I researched search patterns across short-term rental, hotel, and travel sites. I looked for experiences that afforded guests usability, confidence, and speed.
One example is date selection. We saw several sites with check-in and check-out dates separated into two dropdowns. This interaction required guests to click on each dropdown, slowing down the search experience. There were some sites that didn’t require an extra click to select check-out, but due to the separate field, a new calendar widget would open. This was visually disorienting.
Ex: Expedia & InterContinental Hotels date selector interaction.
Our solution was designed with intuitive dropdown fields and smooth interactions. Once a guest selects a check-in date, the calendar remains open so that selecting the subsequent check-out date is seamless. Many users have particularly appreciated the ease of use.
Lyric date selector interaction.
Search Results
One big challenge was how to show and group inventory in search results. This was tricky because Lyric offers short-term rental accommodations analogous to Airbnb, but with suite types (1, 2, 3 bedrooms) and building amenities (gym, pool, business centers) analogous to hotels.
We explored several search results options:
A. Show individual units like a traditional short-term rental website (ex. Airbnb).
B. Show unit types like a traditional hotel website.
C. Show buildings on search results and unit types at checkout.
A. Show individual units like a traditional short-term rental website (ex. Airbnb).
B. Show unit types like a traditional hotel website.
C. Show buildings on search results and unit types at checkout.
We conducted phone interviews, tested prototypes, and met with stakeholders to discover our solution. We learned:
1. Guests want minimal decision fatigue.
2. Guests care primarily about location, price, and number of beds.
3. Crucially for Lyric, grouping inventory into suite types best aligned with our new type of standardized, premium accommodations.
These findings led us to choose Option B and refine our card layouts by emphasizing pertinent information.
1. Guests want minimal decision fatigue.
2. Guests care primarily about location, price, and number of beds.
3. Crucially for Lyric, grouping inventory into suite types best aligned with our new type of standardized, premium accommodations.
These findings led us to choose Option B and refine our card layouts by emphasizing pertinent information.
Live search results page (above). In a future version, we'd like to separate the action of scanning prices and selecting to book. The price will likely be moved out of the CTA.
Suite Details
Our goal for the suite details page was to provide guests the confidence of knowing all about each suite option—from in-room photography and detailed amenities to refund policies and user reviews (coming soon).
Here we explored two different booking approaches. Researching across short-term rental sites, we found the majority of pages have sticky right-aligned “book now” widgets. Interestingly, we saw Airbnb have two different treatments. Regular Airbnb has the traditional booking widget while Airbnb Plus has a sticky footer with a “book now” button followed by a cart modal. Does this possibly reduced cognitive load while still enabling a smooth booking experience? We wanted to test this for ourselves.
Here we explored two different booking approaches. Researching across short-term rental sites, we found the majority of pages have sticky right-aligned “book now” widgets. Interestingly, we saw Airbnb have two different treatments. Regular Airbnb has the traditional booking widget while Airbnb Plus has a sticky footer with a “book now” button followed by a cart modal. Does this possibly reduced cognitive load while still enabling a smooth booking experience? We wanted to test this for ourselves.
(Right) A traditional booking widget. (Left) A sticky footer with a "book now" CTA that opens a trip details modal.
Collaborating with my PM, we asked several questions about the sticky footer treatment:
1. Discoverability: Do users find the “book now” button at the bottom corner?
2. Value of procedural disclosure: How do guests feel about clicking "book now" without the cart details displayed? Would they prefer the sticky widget?Â
2. Value of procedural disclosure: How do guests feel about clicking "book now" without the cart details displayed? Would they prefer the sticky widget?Â
I built our clickable prototypes, wrote our user testing script, and ran them on usertesting.com. Our results showed users successfully discovered the “book now” button. Users felt they had enough information to click "book now" and continue through checkout. Given this, we've implemented the sticky footer approach. As we scale marketing efforts, we'll continue observing behavior to ensure guests have a smooth booking experience.
Checkout
I designed our checkout experience with an emphasis on usability, confidence, and security.
I divided the flow into distinct steps to ensure pages were manageable. Additionally, a business requirement asked us to capture basic info early so we could retarget abandoned shoppers (step 1 below). To give users a sense of confidence and completion, I added breadcrumbs. I also reduced visual noise by recognizing that during checkout, we want users to stay on task and feel supported if any questions arise. As a result, the checkout header and footer were simplified to only show relevant support content.
In the coming weeks, our team will add a checkout cart widget throughout the flow to ensure further confidence. We're also testing required user accounts.
Live checkout flow. We're currently exploring adding a checkout cart widget and requiring user accounts. We believe this will help us learn as much as we can about our guests.
Outcome
During our stealth launch, we’ve had guests organically visit and successfully book through our site. Guests have responded very positively to the new booking experience and brand.
This is a huge win for Lyric because we finally have an end-to-end booking site. Freed from reliance on 3rd party channels, our doors are now open to owning the full customer journey and therefore understanding our guests holistically.
In the coming weeks, I’ll share quantitative and qualitative data as we spearhead marketing initiatives, discover new learnings, and incorporate user feedback.
Meanwhile, thank you for reading!