Hopper Hotels
B2B Desktop Web Dashoard & Portal | ShippedUX, UI, service and content design for B2B web-based dashboard DESIGNING THE WIREFRAMES FOR A B2B SAAS WEB APP
Hopper, a leading travel platform, needed to develop a B2B web app for hotel partners to list and maintain their properties more effectively. The project sought to create a user-friendly portal enabling hotel partners to scale their B2B hotel business in 2024, enhancing the functionality and profitability of Hopper’s hotel booking vertical.
They had a very clunky MVP in existence that was designed by engineers. The existing MVP and processes for hotel partners was cumbersome and inefficient, leading to frustrations and a barrier to scale effectively. The challenge was to streamline these processes to make them more intuitive and efficient for both Hopper administrators and hotel partner administrators. Additionally, there was a need to integrate a consistent design that could accommodate various backend complexities.
SOLUTION & IMPLEMENTATION
As the lead UX/UI designer, I spearheaded the transformation of Hopper's B2B portal, upgrading from its initial MVP form to a polished, user-centric interface that aligns with the modern expectations of digital platforms. This comprehensive redesign focused on creating an inviting and aesthetically pleasing user interface that was both intuitive and aligned with current design trends. Key elements of the redesign included:
Web App Redesign: The interfaces were streamlined to enhance visual aesthetics and improve user navigation. The new design adopted a minimalist approach while incorporating elements that resonated with Hopper’s brand identity, making the portal functional and engaging for hotel partners.
Content Strategy: All UX copy across the platform was rewritten to ensure consistency and coherence. The overhaul eliminated previous technicality-heavy language, replacing it with engaging, natural copy that better resonated with users and facilitated clearer communication.
Wireframe Design: Meticulously crafted wireframes laid the foundation for a clear, intuitive, and consistent user experience across mobile and web platforms. This was particularly crucial for accommodating the functionalities needed by both Hopper administrators and hotel partner administrators.
User Flows: Comprehensive user flows were designed to streamline complex processes, guiding users through various tasks such as listing properties, updating availability, setting pricing, and managing reservations. These flows were tailored to enhance efficiency and ease of use, ensuring that Hopper and hotel partner administrators could manage their duties without complications.
This holistic approach not only addressed the immediate need to make the portal more user-friendly but also aligned with the long-term goals of enhancing partner satisfaction and operational efficiency.
Implementing the portal required meticulous coordination with front-end and back-end engineers to ensure the user flows and design aligned with Hopper’s database and information structure. Regular testing phases and feedback loops with actual users were integral to refining the functionalities and interface.
RESULTS & LESSONS LEARNED
Post-launch, the new portal significantly improved operational efficiency and user satisfaction. Hotel partners reported easier listing and management processes, which led to an increased rate of property updates and management interactions. The streamlined processes and enhanced user interface facilitated a smoother operation and contributed significantly to improving the margins and profitability of Hopper’s hotel booking vertical.
This project underscored the importance of understanding the specific operational needs of business users and the effectiveness of a component-based design system in creating a cohesive user experience. Lessons learned include the critical nature of iterative testing and the value of direct user feedback in designing B2B applications.