🚀 Project Overview
As a Senior Product Designer at HP OMEN Gaming Hub, I led the design of Oasis Live, a social streaming platform that enables gamers to connect through video, audio, and chat—the project aimed to bridge the gap between PC and mobile gaming communities, fostering real-time social interactions.
My contributions included:
✅ Creating a scalable design system to ensure UI/UX consistency across mobile, web, and PC.
✅ Redesigning page layouts and product displays to improve content hierarchy and engagement.
✅ Building a digital asset library and Figma component system to streamline future development.
✅ Developing UI solutions for key features like party management, screen sharing, and chat.
✅ Collaborating cross-functionally with engineering, product management, and content research to ensure seamless execution.
By translating business requirements, analytics data, and user research into actionable design solutions, I helped shape an intuitive, engaging, and high-performing social streaming experience.
🔥 Challenges & Key Problems
Key Design Challenges
- Multi-Platform Consistency: Designing for Android, iOS, Web, and PC, ensuring seamless device transitions.
- Scalability: Developing a modular design system to accommodate future feature expansions.
- Party Management Complexity: Creating an intuitive system for host invites, waiting rooms, and media controls.
- User Engagement: Ensuring the platform encouraged users to return, interact, and participate actively.
- Media & Chat Integration: Balancing screen sharing, video-chat, and text chat without overwhelming users.
- Optimizing UI for Small Screens: Adapting gestures, touch interactions, and interface layouts for mobile constraints.
Problem Statement:
How might we create a frictionless and engaging social streaming experience that seamlessly connects gamers and non-gamers across different platforms?
🚫 Tablet Interface Was Not Optimized – The tablet UI was initially a scaled-up mobile version, leading to poor touch interactions and wasted screen space.
💬 “On my tablet, everything looks stretched. It doesn’t feel like it was designed for it.” – Beta Tester, 29
🚫 Theater Mode Confusion – Users didn’t recognize the theater mode icon placement, resulting in low feature adoption.
💬 “I didn’t even notice there was a theater mode button at first.” – Beta Tester, 25
🚫 Chat Readability Issues – The lack of color differentiation in chat made it hard to follow conversations, especially when usernames were similar.
💬 “Why does the chat all look the same color? It’s hard to tell who’s talking.” – Beta Tester, 31
🚫 Webcam & Layout Issues – Webcams were small and unresponsive on large screens, and their placement confused users in Theater Mode.
💬 “The webcams are tiny. If I go full-screen, I should be able to resize them.” – Beta Tester, 28
🚫 Lack of Customization – Users wanted theme customization and adjustable backgrounds for personalization.
💬 “I’d love to change the theme colors. It feels too plain.” – Beta Tester, 23
🔍 User Research & Competitive Insights
🎯 Target Audience
- Primary Users: Gamers who want to stream and share gameplay with friends.
- Secondary Users: Non-gamers who seek social interactions and private video parties via Oasis Live.
📌 Key Research Findings
✅ Users prioritize ease of access: Gamers want to start parties and invite friends quickly.
✅ Waiting room friction: Users prefer clearer entry notifications and participant status.
✅ Multi-screen behavior: Desktop users rely more on text chat, while mobile users prefer voice/video.
✅ Simplified media controls: Users value quick access to mute, camera, and screen share settings.
✅ Avatar customization boosts engagement: Personalized avatars enhance social interactions and platform identity.
Competitive Benchmarking
- Discord & Twitch: Strong community & live streaming, but lack private party hosting.
- Steam Friends & Xbox Live: Good gaming connectivity, but limited multi-device experiences.
- Zoom & Google Meet: Excellent video chat, but not optimized for gaming.
💡 Opportunity Identified: A hybrid solution combining gaming, streaming, and social interactions in an intuitive, low-friction UX.
Competitive Benchmarking
- Discord & Twitch: Strength in community building and live streaming, but lack integrated private party hosting.
- Steam Friends & Xbox Live: Strong gaming connectivity, but limited multi-device party experiences.
- Zoom & Google Meet: Powerful video chat, but not gaming-friendly.
💡 Opportunity Identified: A hybrid solution combining gaming, streaming, and social interactions in an intuitive, low-friction UX.
📊 Key Findings:
✔ Mobile users preferred quick interactions and one-handed navigation.
✔ Tablet users wanted a layout closer to the desktop, efficiently utilizing the extra screen space.
✔ Web users requested responsive webcams and flexible chat positioning.
✔ Engagement with Theater Mode was low due to its unclear icon and placement.
✔ Users on mobile/tablet wanted an easier way to differentiate speakers in voice chat.
💬 “I use my phone one-handed, so I need everything reachable without stretching my thumb.” – Beta Tester, 26
🛠️ UX Design Process & Iterations
Process & Methodology
- User Research: Interviews, surveys, and competitive analysis to define pain points.
- Wireframing & Prototyping: Created low-fidelity and high-fidelity mockups in Figma.
- Usability Testing: Conducted A/B tests and live user sessions to refine features.
- Visual Design & Branding: Developed high-quality UI components aligned with HP OMEN’s identity.
- Design System Creation: Established a scalable Figma component library for efficiency.
- Cross-Team Collaboration: Worked closely with engineers and PMs for seamless handoff.
- Iterative Refinement: Incorporated feedback from stakeholders and users to optimize UX flows.
Key Design Improvements:
✔ Optimized Tablet Layout – Introduced a split-screen UI, allowing video and chat to function independently.
💬 “The split-screen on my tablet is a game-changer. I can watch and chat without feeling cramped.” – Beta Tester, 30
✔ Theater Mode Enhancements – Moved the button closer to media controls and added a tooltip for better visibility.
💬 “Now I actually use Theater Mode! It makes sense where it is now.” – Beta Tester, 27
✔ Chat Color Differentiation – Implemented a Twitch-like color scheme, making usernames visually distinct.
💬 “The color-coded chat helps me follow conversations way better now.” – Beta Tester, 33
✔ Webcam Responsiveness – Webcams now resize dynamically based on screen size, improving visibility on larger displays.
💬 “Finally, I can see my friends without squinting!” – Beta Tester, 24
✔ Customizable UI Themes – Added background themes and adjustable color schemes for personalization.
💬 “I love having a dark theme option—it makes the whole experience feel premium.” – Beta Tester, 22
🔍Usability Testing & Findings
To ensure an optimal user experience, we conducted multiple rounds of usability testing throughout the product development lifecycle. The objective was to identify usability challenges, explore opportunities for enhancement, and refine the interface based on real user feedback.
User Testing Approach
We adopted a user-centric methodology that involved direct user interviews, live observation sessions, and structured testing procedures. Collaborating with product researchers, product managers, and engineers, we synthesized findings to make iterative design improvements.
📊 Post-launch testing with 30 users revealed:
📊 Theater Mode usage increased by 47% after repositioning.
📊 Chat engagement improved by 60%, with users finding color-coded messages easier to follow.
📊 Tablet usability rated 8.7/10, with users appreciating the split-screen layout.
📊 Webcam feature adoption increased by 30%, thanks to resizable, properly positioned video feeds.
💬 “This version of Oasis Live actually feels made for me, not just thrown together.” – Beta Tester, 32
Testing Methods
- A/B Testing: We tested variations of UI components and interactions to determine the most intuitive and user-friendly solutions.
- Task-Based Testing: Users were given specific tasks to complete while we monitored ease of use, navigation patterns, and points of friction.
- Feedback Surveys & Heatmaps: We analyzed user preferences and behaviors through feedback forms and interaction heatmaps.
Tap Gesture Behavior – A/B Testing
One of our key usability tests focused on user interaction with the video-sharing interface, specifically the UI control for cameras. The goal was to assess whether users preferred a single tap gesture to hide/show all controls or a separate UI element for camera visibility control.
🅰 Option A: One-tap gesture hides/reveals all controls & cameras at once.
- A single tap on the video-sharing area hid all UI controls and cameras simultaneously.
- The chat section remained visible, ensuring uninterrupted messaging.
- Pros: Quick and seamless interaction, reducing cognitive load.
- Cons: Lack of a dedicated UI element for camera visibility adjustments, which some users found limiting.
🅱 Option B: Separate camera toggle with an arrow icon for better control.
- A single tap hid UI controls, while an arrow icon allowed users to show/hide cameras independently.
- The chat section remained visible for continuity.
- Pros: More precise control over camera visibility, improving flexibility.
- Cons: An additional tap is required to manage visibility, increasing interaction steps.
💡 Result: Option B won due to greater flexibility in media management.
Based on user testing data, Scenario B emerged as the preferred option. Users valued the ability to manage camera visibility independently, even at the cost of an extra tap. This insight informed our final UI decision, ensuring a more user-friendly and adaptable experience.
By continuously refining our product through usability testing, we ensured that our design decisions aligned with user needs, improving engagement and satisfaction.
Other Key Testing Insights
✅ Reducing invitation steps improved party join rates by 24%.
✅ Redesigned chat UI led to a 38% increase in message engagement.
✅ Avatar selection saw a 56% higher adoption rate with an improved browsing experience.
📐 Final UI Solution
Created a new design system for consistency.
UI Solutions
✅ Seamless responsiveness across all devices (mobile, tablet, web).
✅ Theater Mode is now more intuitive with better button placement & tooltips.
✅ Chat UI refined with distinct colors, whisper features, and custom emojis.
✅ Users can now hide/show chat, adjust layout preferences, and customize themes.
💬 “Oasis Live finally feels like it was made for all my devices. Whether I’m on my phone, iPad, or laptop, it just works.”– Beta Tester, 27
Key Features & Functionality
🎉 Onboarding: Streamlined flow for creating a gamer handle, avatar selection, and quick sign-in.
Onboarding
Enhanced the onboarding process with a modal that includes options for signing in, creating a gamer handle, selecting an avatar, and entering the date of birth.
📺 Party Hosting & Invites: One-click party creation with custom invite links & waiting rooms.
In Oasis Live, the host can initiate a group meeting directly from the application’s interface. A unique URL is generated upon starting a party, which can be shared independently with friends. Additionally, users can invite their OMEN friends to join an ongoing party through the Oasis interface. The party becomes active once the first friend joins, triggering the opening of media channels. Presently, Oasis parties have a maximum capacity of 16 participants, with each participant occupying one media channel. These media channels encompass video and audio streams, with one channel assigned to game sharing and another to webcam/microphone sharing. Invited users enter a waiting room until the host accepts their participation, though they can also choose to deny entry. If the party reaches its maximum limit of 16 participants, additional users can join if someone leaves the party.
Join a Party
A user can receive an Oasis invitation via an OMEN Friends notification or a URL received on non-OMEN platforms (such as phone chat, Discord, Facebook, email, etc.). Users will be in a waiting room until the Host accepts or denies them. If the party is full, they will not be able to join and will need to try again later (or we may build in a long-term waiting room/queue). Currently, users cannot request to join an active party or jump into a party uninvited. We plan to open these options in the future.
Party Session Started
Oasis Live brings the excitement of private streaming parties, where users can invite multiple friends to join in the fun. Once inside the party, users can easily identify who’s present and eager to join, while the host has full control over managing the participants. When logged into Oasis Live, users have the option to activate their camera and microphone, allowing them to engage in lively video chats by sharing their camera feed. And the best part? They won’t be alone! Multiple webcams can be displayed simultaneously, enabling everyone to see and interact with each other in the same chat. But wait, there’s more! Users can also join the conversation by activating their microphones and taking part in engaging audio discussions. So get ready to chat it up and connect with your friends through the power of video and audio!
🖥️ Screen Sharing: Users can broadcast gameplay with real-time audio/video chat.
In Oasis Live, logged-in users have the option to share their game screen, allowing others to see what they’re playing. Currently, only one user can share their screen at a time in the initial version. However, we are actively working on enhancing the experience by enabling multiple screen shares to be streamed simultaneously within the same party UI. This means that soon, everyone in the party will be able to showcase their gameplay, creating a more dynamic and engaging streaming environment.
Participants Viewing The Screen Sharing from Others
In Oasis Live, participants have the opportunity to view the screen sharing of other users in the party. When someone shares their game screen, all participants can see what they are playing in real-time. This feature enhances the interactive and immersive nature of the streaming experience, allowing users to connect with each other and enjoy the gameplay together. Whether it’s cheering for a friend’s achievements or learning new strategies, participants can engage with the shared content and have a shared viewing experience. It’s a fantastic way to foster collaboration, spark conversations, and create lasting memories within the Oasis Live community.
💬 Chat & Emojis: Integrated text-based messaging with an emoji library for expression.
The chat function in Oasis Live is a vital tool for users to communicate and connect with their friends across various platforms. Whether they are using the mobile app, PC client, or web version, Oasis Live provides real-time chat functionality, enabling seamless communication. Users can engage in text-based conversations with their friends, expressing themselves with the help of Unicode emojis. To make it even more convenient, Oasis Live includes an extensive emoji library, allowing users to access a wide range of emojis effortlessly. This feature enhances the chat experience, making it more expressive and enjoyable for users as they engage in conversations and share their thoughts and reactions with friends. It adds a layer of fun and emotional expression to the overall streaming and socializing experience on Oasis Live.
🎭 Avatar Customization: A diverse avatar selection for personalized user identity.
The profile avatar function on Oasis Live gives users the opportunity to personalize their online presence by selecting avatars from a diverse avatar library. Users can choose from a wide range of avatars that reflect their personality, interests, and style. The avatar library offers a variety of options, allowing users to find the perfect representation of themselves in the virtual world of Oasis Live. By selecting an avatar, users can create a unique identity and enhance their social interactions within the platform. This feature adds a visual element to the user profiles, making them more engaging and visually appealing. Users can express themselves and showcase their individuality through their chosen avatars, contributing to a vibrant and dynamic community within Oasis Live.
📈 Business Impact & Key Metrics
🚀 2M+ users engaged on PC & Web, leading to planned mobile expansion.
📈 User retention increased by 30% post-UI redesign.
💡 Redesigned onboarding reduced drop-off by 18%.
🔄 Figma component library reduced design iteration time by 40%.
👥 Social engagement features boosted time spent per session by 22%.
- 🎭 Theater Mode Engagement: Increased from 18% → 65% (+47%)
- 💬 Chat Readability Score: Improved from 6.2/10 → 8.9/10
- 📱 Tablet Usability Rating: Enhanced from 5.4/10 → 8.7/10
- 📷 Webcam Feature Usage: Grew from 25% → 55% (+30%)
- ⏳ Time Spent Per Session: Increased from ~10 min → ~18 min (+80%)
📈 Next Steps
🛠️ Multi-Screen Sharing: Allow multiple users to broadcast their screens simultaneously.
📞 Direct Calling: Add one-on-one voice/video calling for better social interaction.
👾 Friends List & Social Features: Integrate OMEN Gaming Hub connections for seamless party invites.
💡 Smart UX Personalization: AI-driven recommendations for frequently joined parties & friends.
🚀 Reflections & Key Learnings
🌟 Bridging UX & Engineering: Close collaboration streamlined feature implementation.
🎯 User-Centric Iteration: A/B testing and feedback loops drove major engagement improvements.
📊 Data-Informed Design: Leveraging analytics improved adoption and retention rates.
The success of Oasis Live on PC & Web (2M+ users) set the stage for a scalable mobile experience. Future enhancements will further strengthen the platform’s social and gaming connectivity, making it a leading hybrid social-streaming solution.
🔥 Conclusion
By addressing user pain points, refining key features, and leveraging data-driven UX decisions, I helped create an intuitive, engaging, and scalable platform that connects gamers across devices and environments. The project not only enhanced the OMEN Gaming Hub ecosystem but also set a new standard for seamless social gaming interactions.
💬 “Oasis Live finally feels like it was made for all my devices. Whether I’m on my phone, iPad, or laptop, it just works.”– Beta Tester, 27