Driving Engagement & Revenue: Smarter Carousels For Targeted Content Discovery

🔹 Situation:OMEN Hub lacked cohesive promotional surfaces; discoverability and engagement were low.

🔹 Task: Create a native, non-disruptive ad system that supports editorial content and promotions across the desktop app.

🔹 Action:

  • Designed a Hero Carousel and card-based promotions tied to 3rd-party deals (e.g., Xbox Game Pass, Google Play Games, Gforce Now).

  • Developed chip-based filters for personalized discovery.

  • Collaborated with PMs, content, and marketing teams to balance UX trust with CTR and monetization.

🔹Result:

  • 🚀 2×Increased CTR and time on page.
  • 🎯 Created a scalable editorial ad framework used across multiple product updates.
  • 📈 Supported revenue growth through non-intrusive monetization.

My Role

As the lead product designer for this project, my responsibilities encompassed conducting user research, creating wireframes and prototypes, defining the visual design direction, and collaborating with the development team to ensure successful implementation.

Overview

As the UX designer for OMEN Gaming Hub (OGH), I spearheaded a redesign project focused on the Hero Carousel to enhance user experience and engagement on the OGH home page. The Hero Carousel is pivotal in showcasing game deals, bundles, giveaways, services, and partnerships.

Project Summary

The Hero Carousel redesign includes various banner types, offering a mix of ads, products, and services. Its flexible container enables a dynamic layout with text blocks, CTA buttons, legal text, brand logos, and third-party logos, aiming to maximize engagement and revenue generation.

Problem Statement

The existing design faced challenges in attracting attention, maximizing engagement, and optimizing revenue due to size limitations and content visibility—the redesign aimed to prioritize and showcase content effectively, addressing missed user interactions and conversion opportunities.

Features of the Hero Carousel

  • Sale tags, logo spots, and CTA buttons
  • Copy, gradient overlays, and image or video backgrounds
  • Animation, blur effects, and swipe-able functionality for desktop users

Design Goals

  1. Create a carousel hero banner for OGH
  2. Increase user engagement with the carousel for desktop users
  3. Increase product visibility and design consistency
  4. Implement new banner flow and interactive functionalities

UX Design Thinking:

Step 1 – Empathize:

  • Problem Definition: Challenges in attracting user attention and optimizing revenue.
  • Human Context Exploration: Users focus on My Games, emphasizing the need to balance visibility and customization.

Step 2 – Define:

  • Importance of the Challenge: Enhancing the Hero Carousel is crucial for improving the user experience and optimizing revenue.
  • Point of View Creation: Users desire a seamless Hero Carousel with customization options and relevant content.

Step 3 – Ideate:

  • Brainstorming Ideas: Explore various banner types, interactive functionalities, and customization options.

Step 4 – Prototype:

  • Design Scenarios with Large Thumbnails: Experiment with layouts, visual elements, and interactive features to provide a personalized and visually appealing experience.

Step 5 – User Testing:

  • Implementation & Refinement: Demonstrate the redesigned Hero Carousel with large thumbnails, gather user feedback, and refine the design based on insights obtained during testing.

Design Process:

Brainstorming

The hero banner design brainstorming involved a collaborative and creative process where the team explored a range of innovative ideas. The dynamic exchange of ideas with the team aimed to identify compelling, user-centric design elements that enhance engagement, capture attention, and align with the overall goals of the Gaming Hub.

Wireframes

Wireframes play a pivotal role in facilitating an iterative design process. Rather than amalgamating the product’s functionality, layout, and creative branding aspects simultaneously, wireframes enable a step-by-step approach, ensuring focused attention on each element systematically and iteratively.

Design Patterns

Design patterns for the carousel component involve creating consistent and user-friendly visual and interactive elements to enhance the overall user experience.

Design Anatomy

The design anatomy for the carousel component focuses on the structural and visual elements, including layout, typography, imagery, and interactive features, to ensure a cohesive and aesthetically pleasing user interface.

Text Block

The design anatomy for the carousel component focuses on the structural and visual elements, including layout, typography, imagery, and interactive features, to ensure a cohesive and aesthetically pleasing user interface.

Component Blind Spots

Ensuring optimal user experience in banner design involves avoiding overlap with essential visual elements such as character faces or products. This can be achieved through strategic vertical alignment and incorporating margin/padding into the component, utilizing the built-in utilities.

Carousel Thumbnail (Tiles)

The carousel thumbnail component is designed for maximum visual impact, featuring a dynamic layout that showcases game deals, bundles, giveaways, and partnerships within the OMEN Gaming Hub, ensuring a compelling and engaging user experience.

Carousel design Spec

High Fidelity Design

In the high-fidelity design stage, the Hero Banner container exhibits flexibility, extending to grids or the full width of viewports. Within this adaptable container, various elements such as text blocks, CTA button blocks, legal text, brand logos, and third-party or sub-logos can be seamlessly incorporated. The design options within the container encompass features like alignment, spacing, text blocks, button blocks, and logo arrangements, allowing for precise customization and layout adjustments.

User Testing Plan 1

Project Background:

The redesign focuses on improving the Hero Carousel’s user experience, increasing engagement, and enhancing revenue generation within the OGH desktop app.

Research Questions:

  1. Which design attracts user attention and is user-friendly?
  2. Which homepage design and banner design engage users the most?
  3. Would you be able to do tasks with the new banner designs?
  4. Why are users attracted to one design over the other?

Participants:

30 OMEN users, US-based, aged 18-65.

Methodology:

Unmoderated remote AB survey on UserTesting.com with preferences/feedback on Design A, B, and C. Insights gathered on user engagement, content visibility, and preferences.

User Testing Results:

  • Design B is preferred for the homepage and banner.
  • Banner size has little effect on viewing overall homepage content.

Recommendation:

You can proceed with Design B and conduct usability testing for specific content elements.

User Testing Plan 2

Problem Statement:

Visibility issues above the fold line and limited space on the homepage led to the Hero Carousel redesign. User feedback suggested customization, relevant content, and improved banner interaction.

Goals:

  1. Understand user expectations on the OGH homepage.
  2. Assess user preferences for Hero Carousel content.
  3. Evaluate the effectiveness of customization options.
  4. Determine if users find customization of banner size helpful.

Methodology:

Moderated study on UserTesting.com with 10 participants. Prototypes of A (large thumbnails, collapse/expand), B (smaller thumbnails, collapse), and C (thumbnails above banner). Evaluation of user engagement, visibility, ease of use, visual appeal, preferences, and task completion.

User Feedback:

  • Focus on variable differences in designs A and B.
  • Emphasize user preferences and usability.
  • Assess the context of carousel usage on the homepage.

Conclusion

The Hero Carousel redesign addresses user needs, improves visibility, and enhances engagement through iterative user testing. Suggestions include customization, synchronization, and personalized content. Design with larger thumbnails and expanded banners is recommended based on user preferences.

Next Steps

Implemented the suggested design changes for the banner and thumbnails. I revisited user suggestions during the redesign, focusing on collapse/expand features, the Edit icon, and potential improvements. The OGH Hero Carousel redesign aimed to provide desktop users with a more personalized and practical experience by applying a comprehensive UX process, incorporating design thinking principles, and following a user journey framework.