Mobile Redesign Iberostar.com

My Role & Responsibilities

As Product Designer, I was responsible for defining the mobile design foundations and ensuring alignment with the brand’s visual identity and CMS structure.

My main responsibilities included:

• - Leading the audit and redesign of mobile components to ensure visual and behavioral consistency.
• - Defining design tokens (spacing, color, typography, and breakpoints) for scalable implementation across devices.
• - Creating modular layouts for core components such as Fastbooking, hotel cards, modals, and footers.
• - Collaborating with Developers, and Content Managers to validate interactions and ensure technical feasibility.
• - Documenting all design decisions and specifications in Dev Mode for seamless handoff and future scalability.

Problem

The previous mobile experience showed inconsistencies in both visuals and behavior between modules, lacked scalable components, and resulted in a fragmented user experience across pages (home, landings, hotel details, and booking funnel).

These issues negatively impacted clarity, load time, and task efficiency—particularly for users attempting to book directly from mobile devices.

Approach

As Product Designer, I led a full review of mobile components and interaction patterns, establishing a unified foundation for the new design system.

• 1. Design Tokens Definition
• Defined consistent rules for margins, gutters, and columns by device (Android, iPhone, tablet) and standardized spacing values using the 8-point grid system.


• 2. Typography & Color Standardization
• - Implemented a typographic hierarchy based on Open Sans and Noe Display for titles, descriptions, and CTAs.
• - The new color palette improved contrast, accessibility (AA compliant), and harmony across backgrounds, text, and borders.


• 3. Modular Redesign
• More than 25 modules were redesigned, including:
• - Fastbooking modal: simplified step-by-step flow and lateral transitions for location, dates, and occupancy.
• - Hotel & room cards: responsive layouts with improved hierarchy and optimized CTA placement.
• - Header & footer: streamlined navigation, reduced redundancy, and increased visibility for login and app.
• - Masonry Gallery & Modals: full redesign with enhanced behaviors for closing, sharing, and scrolling.


• 4. Interaction Pattern Unification
• Defined global rules for modals, submenus, banners, and sliders, ensuring a coherent interaction model aligned with Material Design guidelines.


• 5. Validation & Handoff
• Each module was documented in Dev Mode with visible tokens, aspect ratios, spacing rules, and CMS parameters to ensure smooth development and scalability.

Outcome

The new mobile design improved usability, visual coherence, and development efficiency—reducing the time required to create new modules and enhancing overall user satisfaction.

Key Learnings

This project reinforced my belief that UX design is not just about interfaces — it’s about systems and emotions.

Key takeaways:

• - Visual standardization accelerates scalability and long-term maintainability.
• - A mobile-first design ensures consistency and accessibility across the entire digital ecosystem.
• - Proper documentation of tokens and design rules strengthens collaboration between design, content, and development teams.