A complete revamp of the “Hotels” landing page

Project

Hotels Landing Page
Client: Lastminute.com
Dec 2023

Role

Product Designer
UX/UI Designer

Team

Solo project

Deliveries

UX Research
Wireframes
High-fidelity mockups
Prototypes
Design system
Components library

LastMinute.com stands as one of the leading booking and reservation platforms worldwide. Operating in 17 languages across 40 countries, they employ over 1,000 dedicated professionals.

My role

I applied for the product designer role at LastMinute.com, and my test task involved redesigning the entire "Hotels" product page. After successfully completing the task, I received a job offer, which was an exciting opportunity. However, I chose to accept another position that better aligned with my current goals. My experience with LastMinute.com was truly rewarding, and under different circumstances, I would have enthusiastically accepted their offer.

Challenges

The challenge involved enhancing existing components and designing new ones, including:
- A revamped hero banner with an improved search box.
- Redesigned offer listings and dynamic carousels.
- A carousel dedicated to flash sales listings.
- A countdown banner for last-minute offers.
- Fresh, visually engaging category icons.

Workflow

Wireframes

During the UX discovery phase, I successfully gathered vital insights regarding client goals, user needs, and competitive trends. With this valuable information, I crafted wireframes that effectively translated these insights into a clear and functional structure. These wireframes acted as a strategic blueprint, ensuring the design not only met user expectations but also supported crucial business objectives.

Once the wireframes were finalized, I created clickable prototypes to simulate user interactions and evaluate the flow of the design. I confidently presented these prototypes to stakeholders, guiding them through the proposed solution and actively soliciting their feedback. This collaborative, iterative process allowed me to fine-tune the design, ensuring it exceeded stakeholder expectations and fulfilled key objectives before advancing to the more detailed design phases.

High-fidelity design

Once the wireframes received approval, I eagerly transitioned into crafting high-fidelity designs that not only brought the structure to life but also showcased polished visuals, effective branding elements, and intricate interactions. By ensuring these designs aligned seamlessly with the client’s brand identity, I was able to create a user-friendly interface that stands out.

After finalizing the desktop designs, I quickly adapted them for mobile, ensuring a flawless experience across all devices. Utilizing these high-fidelity designs, I built interactive prototypes for both desktop and mobile platforms that highlighted the design’s functionality and responsiveness. These prototypes played a crucial role in validating the final experience and served as a vital reference for the development phase, ensuring a successful launch.

User interviews

The most exciting part of this project was the opportunity to test our hypotheses through live user interviews. FLIR provided access to five major customers, allowing us to gather valuable feedback. Each user performed three specific tasks, sharing their screens so the UX researcher could observe their actions in real-time. Users actively commented on their thoughts and interactions, offering critical insights.

I documented all feedback on a FigJam board, overlaying sticky notes on the tested screens. Each sticky note color corresponds to a different user, making it easy to track perspectives. After each interview, I updated the designs and prototypes to address user feedback. We conducted three rounds of interviews, refining the product iteratively, and ultimately presented our findings to stakeholders to ensure alignment and transparency.

Design system and component library

As a Product Designer, I recognize the importance of design systems in creating consistent, efficient, and scalable products. To ensure uniformity and flexibility, I utilized Figma variables for all foundational elements, including colors, text styles, screen sizes, and border radii. This approach streamlined updates and maintained consistency across the entire design.

I leveraged auto-layout in Figma to ensure that all components were scalable in both directions, making the designs adaptable to different content and layouts. I used Figma variants for components with states, such as form inputs and buttons or variations between desktop, tablet, and mobile screens. Thanks to this approach, I maintained a structured and efficient system, reducing design redundancy and ensuring a seamless handoff to developers. I optimized collaboration, minimized errors, and ensured a cohesive user experience across all platforms by establishing a robust design system.

Design system and components

The final step was creating a comprehensive design system and components library in Figma. I utilized auto-layout to develop flexible, reusable components that adapt to various content types and screen sizes, ensuring scalability and consistency. By leveraging variants, I organized components with multiple states, such as buttons with hover, active, and disabled states, streamlining the design process.

This design system included typography, color palettes, icons, and UI components, all documented for easy reference. By establishing a centralized library, we achieved design consistency and enhanced collaboration, making handoffs to developers efficient and reducing the time needed for future updates.

Previous project

Next project