Redesigning a dynamic website for Pod Hotels in NYC to increase online booking conversions
Role:
UX/UI Designer
Tools:
-
Figma
-
Google Analytics
Deliverables:
-
User Research
-
Low-Fidelity Prototypes
-
High-Fidelity Prototypes
The Problem
The Pod Hotels are a multi-property independent budget hotel chain in New York City. They have 4 different locations, each with their own amenities and policies, among other things, and thus, their own respective sub-sites. I worked on this project while I worked at Skipper Hospitality. They came to us to redesign their entire website to increase direct bookings and improve the sites accessibility and navigation. They asked that we maintain the brand identity. I was on the team for the entire project including research and prototyping but led in the creation of the design system and quality assurance testing.
Understanding Project Goals
As previously stated the main goals of this project were to increase direct bookings as well as improve site accessibility and navigation of the site. These goals were defined across several conversations with the client.
Understanding Current Users
We were given access to the hotels Google Analytics dashboard and utilized a significant amount of that data to help inform our design decisions. The time of this project was during the height of the pandemic so data was skewed so we mainly relied on data from the previous 2 years. With this data along with stakeholder conversations, we determined that their ideal user are creative millennials booking weekend getaways.
Competitive Analysis
We conducted a competitive analysis on about 10 hospitality websites that have a similar target user. We pulled components we liked from each website that we believed could improve the experience on the Pod site. These three in particular did a good job of use color in a way that doesn't feel overpowering or hard on the eyes. They also use a lot of different sized and oriented cards in a way that feels very clean.
Site Audit
Most of the issues that we noticed during this audit were with the design, responsiveness, and spacing of card components. At this time we also took inventory of all the components that are currently on the site and made note of which ones we could keep and which ones were unnecessary.
Site Map
We built out the site map for the original site and realized that there is a lot of room for simplification, so we streamlined the sitemap to improve user retention. For example, each site had a gallery page but there was also a gallery on the main site that had a preview of the gallery for each property. This page had significantly lower page views and significantly higher bounce rate so we took it out completely.
Wireframeing and Iterations
Before diving into the design system, the project began with the creation of detailed wireframes. I meticulously crafted multiple iterations for each screen, with a primary focus on refining information architecture and layout. Collaborating closely with both my team and the client, we carefully considered feedback to determine the iteration that made the most sense for each page.
The wireframing process covered crucial sections such as the homepage, rooms, about, offers, and gallery pages for every location. To ensure a cohesive user experience, each location adopted the same layout structure, maintaining consistency while allowing for content variations across the different sections of the site. This iterative approach laid a solid foundation for the subsequent stages of the design process.
Most parts of the brand identity remained the same including the logo and typography. We did, however, update the color palette to increase the color contrast and reduce the brightness for accessiblity; we also assigned unique colors to each property to help identify which property a user is interacting with. We also included aspect ratios for each picture we planned to use as requested by the development team.
The main work was around redesigning card components on an 8-point grid for both mobile and desktop screens. All of these components were built with auto-layout and most had multiple state designs. We made sure to follow naming conventions that made sense to both the design and engineering team.
I implemented an atomic design system with "atoms," "molecules," and "organisms," anticipating that this would help cut down design and development time. These components served as the building blocks for our plug-and-play design approach, allowing seamless integration and modification of specific elements without necessitating a complete overhaul of the entire design.
Implementing this system resulted in a streamlined and scalable design system that increased design efficiency by 30%.
Below are our "molecules" and "organisms":
Solutions
After a few iterations, testing and approval from our clients, we landed on one prototype. Because we had sub-sites for 4 different properties, we relied heavily on our component variations to make the prototype build seamless.
Booking Widget
In tackling the challenge of boosting direct bookings for our hotel website redesign, we introduced a sleek booking widget prominently placed on the homepage. Our intention with simplifying the booking process and putting all the essential information front and center was to enhance user experience and nudge visitors towards making direct reservations.
Navigation Organization
To combat the confusion users faced navigated the different property sites (which resulted in high bounce rates), we revamped the navigation system with an organizational system. We gave each property its unique color code on the navigation bar. This intuitive color coordination, coupled with a clear exit icon, ensures users can easily identify and navigate back to both the property's and main homepages. Pressing the logo brings them to the property's main page, while hitting the 'x' gets them back to the main homepage.
Quality Assurance Testing
When our project made it to development in Webflow, inevitably there were some bugs. There were already some delays in the design process and we wanted to get this project through development as quickly as possible, so I led quality assurance efforts as I was extremely familiar with the design system. I flagged any bugs I noticed in the staging site and made any necessary updates to the design system at the development teams' request to make their jobs easier.
Reflection
1. Getting Insights from Data
Using Google Analytics was a game-changer, even with the challenges of pandemic data. It helped us understand that our target audience—creative millennials looking for weekend getaways—was key. This guided our design choices to really match what users wanted.
2. Perfecting with Iteration
We didn't get it right the first time. We crafted multiple versions of our wireframes, tweaking layouts and info until they felt just right. Feedback from stakeholders and users really shaped our final design, making it more user-friendly and effective.
3. Design System for Consistency
Our atomic design system was like building blocks for our website. It kept everything consistent and made updates a breeze. Breaking things down into atoms, molecules, and organisms helped us scale without losing sight of the big picture.
4. Making Navigation Easy
Navigating the site shouldn't be a puzzle. We simplified it with color-coded sections for each property, so users could find what they needed fast. Clear exit buttons and logical flows made sure they didn't get lost, boosting how long they stayed on the site.
5. Teamwork and Polishing
Working closely with developers was crucial. We caught bugs early and fixed them in Webflow, keeping everything on track. It was all about making sure our design looked and worked as planned.
6. Keeping It Pod Hotels
Staying true to Pod Hotels' vibe while giving the site a fresh look was a challenge we loved. Balancing their brand with new ideas made the project richer, and the final design resonated with both Pod Hotels and their guests.
View My Other Case Studies
