Introduction
In 2024, Expedia underwent a major rebrand with a new editorial style. As part of the Media Solutions team—focused on helping travel partners promote their destinations, products, and experiences—I contributed to the rebuild of our design system.

The goal:
1.To align with the new brand direction
2. Creating reusable components and templates that could scale across campaigns and platforms
3. Ensuring consistency and flexibility for various partner needs.
My role
There are 3 brands under Expedia Group, Expedia, hotel.com and Vrbo.

I took part in designing atomic, molecules, organism and page template and accessibility test for brand Expedia. 


I also enhanced the design system by resolving issues to meed specific business need after it was launched.

Below are some parts that i took part in







Some modules I designed to meet in business need
Desktop and mobile



New problem - Evolvement
Expedia’s sponsored partners purchase ad placements within our content, and one of their core requirements is visual equity:

each card must be exactly the same size with no visual hierarchy.

To meet this need, I had to design a grid-based card layout with three cards per row, maintaining uniformity in size and structure across all placements, within the current design system.

Challenges
1. Uneven Card Count
When the number of cards isn’t divisible by three, the final row can end up with only one or two cards—creating unbalanced whitespace and compromising the polished, premium look expected by our partners.


Unbalanced card shown below:



2. Tight Deadline
The turnaround time for this project was just 3 working days, making it critical to quickly test, validate, and finalize a scalable solution.

Solution
To resolve the issue of uneven final rows while maintaining the grid structure and partner expectations.

1. I conducted quick design tests to evaluate which approach looked the most balanced across breakpoints and partner use cases.

2. Then proposed a clean and scalable solution:

  • When the last row has fewer than 3 cards, the clickable sponsor card is centred.

  • I added two dimmed placeholder tiles on either side to maintain layout integrity.

  • These placeholders are non-interactive and visually de-emphasised with a black overlay at 20% opacity (HEX #000000, 20%).

  • The visibility of these placeholders is CMS-controlled, giving the content team flexibility without needing design input for every update.

After conducting quick design tests and stakeholder reviews, this solution was implemented successfully and preserved both the aesthetic and business goals.


Creative solution
Premium Editorial Tile concept for upsell

To offer more flexibility and editorial value, I also proposed a premium panoramic tile format:

  • A single panoramic photo spans the width of all 3 grid columns.

  • Each tile section within the panoramic image can be made individually clickable, linking out to different subpages or external destinations.

  • This layout can serve both as an editorial storytelling element and a sponsorship upsell opportunity, elevating partner content within the layout.

Full solution
Mobile solution
Carousel and stacked
Result
The solution was well received, launched on time with the partner, and praised for both meeting the deadline and maintaining high quality.
Page template