My Role
UI/UX Design
Duration
15 Months
Devices
Web / Mobile
Hotel Booking Platform Design
Hotel Booking Platform Design
B2B Collaborative New Product Development Project
B2B Collaborative New Product Development Project
My Role
UI/UX Design
Duration
15 Months
Devices
Web / mobile
About
About
Hotel Booking Platform Collaboration for Brand App
Hotel Booking Platform Collaboration for Brand App
This is a project in collaboration with a brand partner and a travel agency, creating an RWD hotel booking platform for C-end users within the brand's app, with booking information provided by the travel agency.
This is a project in collaboration with a brand partner and a travel agency, creating an RWD hotel booking platform for C-end users within the brand's app, with booking information provided by the travel agency.
Challenge
From Camping Platform to Hotel Booking Platform: Rapid Adaptation
Initially, the collaboration with the brand was aimed at designing a camping platform, as there were very few existing camping platforms in Taiwan, and those that existed had limited functionality and poor user experience. This led us to develop a more comprehensive solution. However, after the development framework was largely completed, the brand could not reach an agreement with the camping operators on the terms of cooperation, and business competition clauses became a barrier. As a result, the project shifted direction to developing a booking website and sought collaboration with a third-party travel agency.
In this three-party collaboration, we had to constantly coordinate the opinions of all parties and transform the existing camping platform into a booking platform. This process was challenging and involved many adjustments to workflows. Ultimately, we had to make feasibility adjustments based on maximizing the benefit. Due to tight deadlines, both design and development schedules were under great pressure. We needed to balance the demands of all parties, technical feasibility, user needs, and business objectives while reaching consensus. Ensuring alignment of information among all parties and achieving agreement was a significant challenge.
How did we do it?
Tackling Challenges with Strategic Adaptation and Phased Execution
Challenges
The project timeline was tight, requiring development and launch from scratch.
The brand underwent multiple layers of approval, with frequent changes in decision-making and significant revisions.
The partnered travel agency provided incomplete data, and some essential API functionalities could not be integrated.
Strategy
Conducted a review of the process pages, reusing existing components and workflows to expedite development.
Prepared solutions in advance, tested and confirmed the direction, and balanced the needs and constraints of all parties.
Adopted a phased communication approach, showcasing essential features first and using visual or workflow design to downplay missing data.
Our goal
Develop an Innovative Hotel Booking Platform
Develop an innovative booking platform from scratch, enhance user experience, meet the brand requirements of the client, and successfully implement the platform.
Why did we do this?
Leveraging Partnerships to Boost Brand and Business Potential
Brand-side Requirements
The brand aims to enhance its app by adding a travel booking platform, enriching its features and increasing consumer engagement.
Company-side Business Considerations
The company hopes to leverage this project to expand brand awareness, increase membership, and create more opportunities for future business partnerships.
Product Development
Background
Background
Co-developing a Post-Pandemic Booking Platform with a Brand Client
Co-developing a Post-Pandemic Booking Platform with a Brand Client
In the context of post-pandemic travel recovery, our company collaborated with a well-known brand to develop a brand-new booking platform. The platform's booking data was sourced through an API provided by a third-party travel agency, making it a three-party collaboration. Unfortunately, despite the website being in the final testing phase before launch, the brand's internal business decision led to an unexpected halt, and the product was not launched as scheduled.
In the context of post-pandemic travel recovery, our company collaborated with a well-known brand to develop a brand-new booking platform. The platform's booking data was sourced through an API provided by a third-party travel agency, making it a three-party collaboration. Unfortunately, despite the website being in the final testing phase before launch, the brand's internal business decision led to an unexpected halt, and the product was not launched as scheduled.
Team
PM
Designer
Front-end RD
Back-end RD
Luke
Shani
Jim/ Karol/ Tina
Rona/ Anthony
My Role
My Role
Full-Process Design / Design System Development
Full-Process Design / Design System Development
In this project, as the sole designer, I was responsible for exploring the requirements in the early stages with the cross-functional team and collaborating with the PM to discuss and define user flows. I took full responsibility for the design layout of all screens and the creation of prototypes, established the design guidelines, and aligned with engineers. Additionally, I participated in product testing and acceptance, balancing the needs of all parties and client expectations.
In this project, as the sole designer, I was responsible for exploring the requirements in the early stages with the cross-functional team and collaborating with the PM to discuss and define user flows. I took full responsibility for the design layout of all screens and the creation of prototypes, established the design guidelines, and aligned with engineers. Additionally, I participated in product testing and acceptance, balancing the needs of all parties and client expectations.
Challenge
From Camping Platform to Hotel Booking Platform: Rapid Adaptation
Initially, the collaboration with the brand was aimed at designing a camping platform, as there were very few existing camping platforms in Taiwan, and those that existed had limited functionality and poor user experience. This led us to develop a more comprehensive solution. However, after the development framework was largely completed, the brand could not reach an agreement with the camping operators on the terms of cooperation, and business competition clauses became a barrier. As a result, the project shifted direction to developing a booking website and sought collaboration with a third-party travel agency.
In this three-party collaboration, we had to constantly coordinate the opinions of all parties and transform the existing camping platform into a booking platform. This process was challenging and involved many adjustments to workflows. Ultimately, we had to make feasibility adjustments based on maximizing the benefit. Due to tight deadlines, both design and development schedules were under great pressure. We needed to balance the demands of all parties, technical feasibility, user needs, and business objectives while reaching consensus. Ensuring alignment of information among all parties and achieving agreement was a significant challenge.
Why did we do this?
Leveraging Partnerships to Boost Brand and Business Potential
Brand-side Requirements
The brand aims to enhance its app by adding a travel booking platform, enriching its features and increasing consumer engagement.
Company-side Business Considerations
The company hopes to leverage this project to expand brand awareness, increase membership, and create more opportunities for future business partnerships.
How did we do it?
Tackling Challenges with Strategic Adaptation and Phased Execution
Challenges
Strategy
The project timeline was tight, requiring development and launch from scratch.
Conducted a review of the process pages, reusing existing components and workflows to expedite development.
The brand underwent multiple layers of approval, with frequent changes in decision-making and significant revisions.
Prepared solutions in advance, tested and confirmed the direction, and balanced the needs and constraints of all parties.
The partnered travel agency provided incomplete data, and some essential API functionalities could not be integrated.
Adopted a phased communication approach, showcasing essential features first and using visual or workflow design to downplay missing data.
Our goal
Develop an Innovative Hotel Booking Platform
Develop an innovative booking platform from scratch, enhance user experience,
meet the brand requirements of the client, and successfully implement the platform.
Product Development
Wireframe
Prototype and Functional Highlights
Homepage
Homepage
Highlights activity banners, core search functionality, and personalized recommendations for an intuitive and versatile booking experience.
Highlights activity banners, core search functionality, and personalized recommendations for an intuitive and versatile booking experience.
The primary area of the Main page is devoted to activity display, reinforcing promotional efforts and drawing in reservations with support for synchronization on the client’s platforms. Following that is the fundamental search module of the reservation system, encompassing important choices such as holiday spot, schedule, and guest count, permitting users to rapidly locate their needs.
Subsequently, there's the lodging suggestions, offering further stay choices influenced by the user’s previous reservation patterns or current promotions, expanding the range of inspiration and selection.
The primary area of the Main page is devoted to activity display, reinforcing promotional efforts and drawing in reservations with support for synchronization on the client’s platforms. Following that is the fundamental search module of the reservation system, encompassing important choices such as holiday spot, schedule, and guest count, permitting users to rapidly locate their needs.
Subsequently, there's the lodging suggestions, offering further stay choices influenced by the user’s previous reservation patterns or current promotions, expanding the range of inspiration and selection.
The footer not only displays the basic information of the booking platform but also features a fun and warm design style, which is highly favored by customers, symbolizing the joyful experience of traveling and exploring accommodations.
The footer not only displays the basic information of the booking platform but also features a fun and warm design style, which is highly favored by customers, symbolizing the joyful experience of traveling and exploring accommodations.
Hotel Search Page
Hotel Search Page
Features a card-based design to present key information, with bookmarking and sharing functions enhancing search efficiency and user experience.
Features a card-based design to present key information, with bookmarking and sharing functions enhancing search efficiency and user experience.
The design of the Hotel search page allows users to focus on key information for each hotel, using a card-based layout to avoid information overload and enabling users to quickly find their ideal property. Information such as the hotel's price, location, category tags, free cancellation policy, and whether breakfast is included is clearly displayed, meeting users' filtering needs.
Additionally, the platform offers bookmarking and sharing features, along with a personalized collection page, allowing users to easily organize their favorite properties, compare them, or save them for future travel plans, enhancing search and decision-making efficiency.
The design of the Hotel search page allows users to focus on key information for each hotel, using a card-based layout to avoid information overload and enabling users to quickly find their ideal property. Information such as the hotel's price, location, category tags, free cancellation policy, and whether breakfast is included is clearly displayed, meeting users' filtering needs.
Additionally, the platform offers bookmarking and sharing features, along with a personalized collection page, allowing users to easily organize their favorite properties, compare them, or save them for future travel plans, enhancing search and decision-making efficiency.
Hotel Information Page
Hotel Information Page
Card-style layout showcases facilities, room types, and nearby attractions, helping users browse effortlessly and book their ideal room easily.
Card-style layout showcases facilities, room types, and nearby attractions, helping users browse effortlessly and book their ideal room easily.
The hotel information page adopts a clean, block-style layout, presenting facilities, photos, and the address in a clear and concise manner for easy browsing. A navigation overview allows users to seamlessly switch between sections such as facilities, nearby attractions, room types, hotel overview, and check-in information.
Room type details, being the core content, are positioned at the top of the page for quick selection. Other information is displayed as simple previews, with a "View More" option to expand details, enhancing the overall user experience.
The hotel information page adopts a clean, block-style layout, presenting facilities, photos, and the address in a clear and concise manner for easy browsing. A navigation overview allows users to seamlessly switch between sections such as facilities, nearby attractions, room types, hotel overview, and check-in information.
Room type details, being the core content, are positioned at the top of the page for quick selection. Other information is displayed as simple previews, with a "View More" option to expand details, enhancing the overall user experience.
Room Information Page
Room Information Page
Highlights room photos, details, and real-time availability, enabling easy booking and enhancing the user experience.
Highlights room photos, details, and real-time availability, enabling easy booking and enhancing the user experience.
The room information page highlights room photos as the primary visual focus, allowing users to clearly view photo details. As the key factor in attracting bookings, rooms that meet user needs are prominently featured.
Room details are displayed on the right, with facilities information available through a scrollable section. The page emphasizes the booking button, accompanied by the number of remaining rooms, enabling users to easily access necessary information and make reservations effortlessly.
The room information page highlights room photos as the primary visual focus, allowing users to clearly view photo details. As the key factor in attracting bookings, rooms that meet user needs are prominently featured.
Room details are displayed on the right, with facilities information available through a scrollable section. The page emphasizes the booking button, accompanied by the number of remaining rooms, enabling users to easily access necessary information and make reservations effortlessly.
Payment Page
Payment Page
Step-by-step guidance with auto-collapse for easy order completion.
Step-by-step guidance with auto-collapse for easy order completion.
The Payment page is divided into three steps: 1. Confirm Information, 2. Select Payment, and 3. Complete Order. Each step is guided automatically, with a card-based design clearly displaying order details. Users can easily fill in the information and confidently complete their order.
Step 1. Confirm Information
Step 2. Select Payment
After filling in contact information, the section automatically collapses when selecting payment, simplifying the view to focus on payment options while allowing users to review their entered details at any time.
Step 3. Complete Order
Upon completing the first two steps, Step 3 clearly shows the order and payment details. Users can click "View Full Order" for additional information or easily cancel the order.
The Payment page is divided into three steps: 1. Confirm Information, 2. Select Payment, and 3. Complete Order. Each step is guided automatically, with a card-based design clearly displaying order details. Users can easily fill in the information and confidently complete their order.
Step 1. Confirm Information
Step 2. Select Payment
After filling in contact information, the section automatically collapses when selecting payment, simplifying the view to focus on payment options while allowing users to review their entered details at any time.
Step 3. Complete Order
Upon completing the first two steps, Step 3 clearly shows the order and payment details. Users can click "View Full Order" for additional information or easily cancel the order.
Order Lists
Order Lists
Consistent Block Design for Easy Order Tracking and Management
Consistent Block Design for Easy Order Tracking and Management
Order Lists follow the card-based design, clearly displaying the status of each order: "Completed," "Unpaid," and "Transaction Expired." Each order card shows basic details, and users can click to view and edit the information, making it easy to track and manage orders.
Order Lists follow the card-based design, clearly displaying the status of each order: "Completed," "Unpaid," and "Transaction Expired." Each order card shows basic details, and users can click to view and edit the information, making it easy to track and manage orders.
Design Guideline
In this project, I established a comprehensive design specification that includes detailed definitions and guidelines, ensuring consistency across all components.
H1,Regular 48
H2,Regular, 32
H3, Medium 24
H4, Medium 20
H5, Bold 18
H5, Regular 18
H6, Medium 16
H6.Medium 14
Body1, Regular 16
Body2, Regular 14
Body3, Regular 12
＃369ECE
＃50A156
＃5EB1D8
＃8AC08E
＃5AC8FA
#56C18A
＃FD9955
＃EEF6EE
＃EBF5FA
＃F8F8F8
Project Progress
Development Phase: Transition from Camping to Booking Platform
In this project collaborating with the brand side, the initial goal was to create a camping platform. However, due to commercial partnerships and contractual limitations, the brand side requested a change in direction, transforming it into a booking platform and collaborating with a travel agency. Faced with the challenge of effectively converting the existing web framework while considering development costs, multiple discussions led to the decision to utilize existing resources with minimal adjustments. In the design phase, in-depth communication with the brand side helped reach a consensus and accelerate development.
Testing and Optimization - Data Integration Improvement
During the web development process, we found that the travel agency platform provided incomplete data, and its technical integration differed from expectations, impacting the user experience. Through testing and interviews, we identified the need for interface and workflow adjustments. Modifications were made to ensure a seamless booking experience for users.
Brand-Side Business Decision - Suspension of Launch
As the website entered its final testing phase, the brand unexpectedly decided to suspend the launch. Although this meant our efforts did not come to fruition as planned, the team showcased outstanding collaboration, leveraging effective communication and adaptability to overcome technical and operational challenges. A shared vision and strong mutual understanding made this collaboration a truly memorable experience.
Insights and Takeaways
The Value of Adaptability and Collaboration
Throughout this project, we navigated multiple changes in requirements, transitioning from a camping platform to a booking platform, which required adjustments within the existing framework. We faced challenges with incomplete data and API integration, highlighting the importance of flexibility in design and development, as well as collaboration. Changes in business partnerships required us to quickly find a balance to minimize development costs while maintaining a good user experience.
This experience taught me how to maintain sustainable design in a rapidly changing environment and enhance user experience through testing and optimization. The team's flexibility and proactive approach helped us overcome many difficulties. Although the project did not launch as planned, I learned the importance of being adaptable as a designer, maintaining an open mindset, and ensuring stable team collaboration to achieve shared goals.
Interested in connecting ?
Let’s talk projects, collaborations,
or anything design !
Design Guideline
In this project, I established a comprehensive design specification that includes detailed definitions and guidelines, ensuring consistency across all components.
H1,Regular 48
H2,Regular, 32
H3, Medium 24
H4, Medium 20
H5, Bold 18
H5, Regular 18
H6, Medium 16
H6.Medium 14
Body1, Regular 16
Body2, Regular 14
Body3, Regular 12
＃369ECE
＃50A156
＃5EB1D8
＃8AC08E
＃5AC8FA
#56C18A
＃FD9955
＃EEF6EE
＃EBF5FA
＃F8F8F8
Project Progress
Development Phase: Transition from Camping to Booking Platform
In this project collaborating with the brand side, the initial goal was to create a camping platform. However, due to commercial partnerships and contractual limitations, the brand side requested a change in direction, transforming it into a booking platform and collaborating with a travel agency. Faced with the challenge of effectively converting the existing web framework while considering development costs, multiple discussions led to the decision to utilize existing resources with minimal adjustments. In the design phase, in-depth communication with the brand side helped reach a consensus and accelerate development.
Testing and Optimization - Data Integration Improvement
During the web development process, we found that the travel agency platform provided incomplete data, and its technical integration differed from expectations, impacting the user experience. Through testing and interviews, we identified the need for interface and workflow adjustments. Modifications were made to ensure a seamless booking experience for users.
Brand-Side Business Decision - Suspension of Launch
As the website entered its final testing phase, the brand unexpectedly decided to suspend the launch. Although this meant our efforts did not come to fruition as planned, the team showcased outstanding collaboration, leveraging effective communication and adaptability to overcome technical and operational challenges. A shared vision and strong mutual understanding made this collaboration a truly memorable experience.
Insights and Takeaways
The Value of Adaptability and Collaboration
Throughout this project, we navigated multiple changes in requirements, transitioning from a camping platform to a booking platform, which required adjustments within the existing framework. We faced challenges with incomplete data and API integration, highlighting the importance of flexibility in design and development, as well as collaboration. Changes in business partnerships required us to quickly find a balance to minimize development costs while maintaining a good user experience.
This experience taught me how to maintain sustainable design in a rapidly changing environment and enhance user experience through testing and optimization. The team's flexibility and proactive approach helped us overcome many difficulties. Although the project did not launch as planned, I learned the importance of being adaptable as a designer, maintaining an open mindset, and ensuring stable team collaboration to achieve shared goals.
Interested in connecting ?
Let’s talk projects, collaborations, or anything design !