Introducing a curated browsing experience for product categories

The impact

I owned the redesign of MGM’s category pages end-to-end as Senior Product Designer, the first production implementation of MGM’s new design system, Vega. It replaced an inconsistent, hard-to-navigate experience with one unified, curated browsing experience across every category type, from dining to entertainment.

Reimagined category pages around curated discovery, not just listings

How might we reimagine category pages to help guests effortlessly find what they need? Inconsistent visual design elements, like offer cards and filter elements, were leading to a confusing experience that made it difficult for guests to navigate and find what they were looking for. My goal was a cohesive, intuitive, engaging design that communicated MGM’s diverse offerings through one seamless customer journey, which meant taking a holistic look at every aspect of the page across every category type.

Bet on shared Vega components, not one-off category pages

Rather than solve each category type’s inconsistencies one at a time, I bet on building a new, more dynamic set of complex components on top of MGM’s Vega design system, ones that could adapt across every category type while staying visually cohesive. The curated offerings, the dynamic filters, the editorial collections, all of it was built on top of that shared foundation.

The MVP shipped Q1 2023; everything below was scoped for future releases.

Universal booking module

The Universal Booking Module expands upon the idea of the “Room Booking Module” found on the homepage. This module retains important trip information entered on the homepage or any other category page, and automatically displays the most relevant results to guests on page load, without guests having to re-enter information multiple times.

Curated offerings, reservation availability and recommendations

I designed several modules to simplify the booking process, including a curated offerings section, a real-time reservation availability module, and personalized recommendations. The curated offerings section showcases popular events and experiences, while the reservation availability module displays up-to-date information. Personalized recommendations are tailored to guests’ interests and past bookings, creating a more personalized experience. These modules work together to help guests quickly find and book relevant events and experiences.

I designed several modules to simplify the booking process, including a curated offerings section, a real-time reservation availability module, and personalized recommendations.

Editorial collections for seasonal promotions

I created a new editorial collection module for MGM’s marketing team, making it easier for them to promote seasonal events and sub-categories like Women Owned or Sustainable restaurants. This module opens into an editorial page with offer results pre-filtered below.

Enhanced dynamic filters

I designed the category page filter experience to be scalable and user-friendly. After researching different approaches, I used the best UI/UX practices from the Baymard Research Institute. I chose a dynamic filter paradigm as the best solution. This approach displays the number of dropdown selections in the chip title, such as “Destination (3),” making it easy for guests to edit selections.

I designed the category page filter experience to be scalable and user-friendly. After researching different approaches, I used the best UI/UX practices from Baymard Research Institute. I chose a dynamic filter paradigm as the best solution.

Example of an early audit of the number of filter options across all category page types to help make a decision on the most appropriate filter design approach. I worked closely with Product to collect filter analytics to inform the improved approach.

Secondary research and synthesis

For this project, I combined primary and secondary research methods. I analyzed other food-related category pages and created page wireframe archetypes to explore display options for curated information. To understand guest pain points on the category pages, I worked with our research team to launch a short study and also used relevant information from the Baymard Research Institute.

I analyzed other food-related category pages across a variety of brands for inspiration.

I created page wireframe archetypes to explore display options for curated information.

Synthesized user study insights and research findings from Baymard Institute.

Implementing a new design system

This was the first project to use the new Vega Design system on the web product. I created a set of complex components for the Discovery team using atomic components from the atomic component library team. These complex components were compiled in a Discovery-specific component library that was shared among other Discovery design team members for related projects.

This was the first project to use the new Vega Design system on the web product. I created a set of complex components for the Discovery team using atomic components from the atomic component library team.

Design and accessibility documentation

For this project, I created comprehensive documentation for the complex components. My goal was to assist Discovery Engineers in using the new atomic Vega components so that reusable, domain-specific complex components could be built for future Discovery team projects. I also collaborated with an accessibility consultant hired by MGM to ensure the new category experience met WCAG AA standards. This involved creating extensive documentation for accessibility keyboard and screen-reader support.

For this project, I created comprehensive documentation for the complex components. My goal was to assist Discovery Engineers in using the new atomic Vega components so that reusable, domain-specific complex components could be built for future Discovery team projects.

Zoomed in: exactly how one complex component was meant to be assembled from Vega’s atomic pieces.

Zoomed out accessibility documentation I created in collaboration with an accessibility consultant hired by MGM.

Zoomed in view of accessibility documentation I created that includes accessibility keyboard and screen reader information.

Would separate “build the system” from “ship the page” next time

Being the first production implementation of Vega meant building shared, reusable components while also trying to ship a specific redesign, two timelines pulling against each other. I’d want a more deliberate split next time: a dedicated component-foundation phase before committing to a page-level ship date, rather than building the system and the page at once.