Introducing a curated browsing experience for product categories
Role:
Senior Design Lead
·
Client:
MGM Resorts International
·
Agency:
Superformula
·
Year:
Q3-Q4 2022
I was tasked with rejuvenating MGM's category pages, which were struggling to convey a unified visual experience and failed to display a curated selection of offerings.
CHALLENGE
Challenge: How might we reimagine category pages to help guests effortlessly find what they need?
I was tasked with rejuvenating MGM's category pages, which were struggling to convey a unified visual experience and failed to display a curated selection of offerings. The inconsistency in visual design elements, such as offer cards and filter elements, was leading to a confusing user experience. This made it difficult for customers to navigate and find what they were looking for. My goal was to create a cohesive, intuitive, and engaging design solution that effectively communicated MGM's diverse offerings and provided a seamless customer journey. To achieve this, I needed to take a holistic approach to the redesign process, looking at every aspect of the pages across category types.
SOLUTION
Solution: A curated category browsing experience that serves time availability and personalized recommendations
I approached the challenge with a focus on creating visual consistency and coherence. This involved standardizing the design of the offer cards and ensuring that they looked uniform across all category types. Additionally, I worked on incorporating features that would allow for the display of curated offerings, making it easier for guests to discover relevant and personalized options. This involved creating a new, more dynamic set of complex components (based on our new Vega design system) that could adapt to different types of offers and categories while maintaining a cohesive overall look and feel. The final result was an improved experience allowing guests to quickly find the right offer for their needs.
An image of the MVP design solution that is slated to for release in Q1 2023. The following designs are slated 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.
DESIGN WALKTHROUGH
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 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 closed with Product to collect filter analytics to inform the improved approach.
RESEARCH & SYNTHESIS
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 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.
IDEATION & CONCEPT VETTING
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.
DELIVERY
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 documentation of a complex component.
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.
Team acknowledgement
The success of this project would not have been possible without the contributions and support of my amazing team members.
- Robert McEwen, Product Lead
- John Clark Cochran, Senior Design Lead
- Scot Copeland, Design Director -Discovery
- Camilla Aubrey, Product Designer
- Gwendylyn Saito, Senior PM
- Peter Gorgenyi, Senior Engineering Lead
- Derek Staley, Senior Program Manager