🚀 Project Overview
Oasis Live is a social streaming platform that enables users to watch, chat, and interact with friends in real time. While initially optimized for desktop and mobile, the platform lacked a fully responsive web experience, which led to usability challenges on different screen sizes. This project focused on designing a seamless, responsive web experience, ensuring accessibility across desktop, laptop, tablet, and mobile browsers.
Lead UI/UX Designer collaborated with stakeholders, business owners, and engineering to ensure the seamless execution of the web app product.
📌 Key Goals:
✔ Establish a fully responsive web application
✔ Create a unified design system for web, mobile, and tablet
✔ Improve user accessibility and navigation
✔ Ensure cross-platform functionality for a seamless experience
🎯 Target Audience
The Oasis Live web application is designed for gamers and non-gamers who want to join streaming parties seamlessly through their web browser.
- Gamers: Easily share game screens and play together with friends.
- Casual Users: Hang out in watch parties, video chat, or stream content.
- Cross-Platform Users: Access the platform on Mac, Windows, and tablet browsers without an app installation.
💬 “I love that I don’t need to install anything! I send a link to my friends, and we’re in a party.” – Beta Tester, 28
🔥 Challenges & Problem Statement
Identified Issues:
🚫 No Responsive Web Version – Users struggled to navigate the mobile-optimized UI on tablets and desktops.
💬 “On my laptop, everything looks stretched. It doesn’t feel like it was made for the web.” – Beta Tester, 30
🚫 Inconsistent Design Language – UI elements lacked a cohesive look across mobile and web versions.
💬 “It looks different on my phone vs. my laptop. The experience should feel the same.” – Beta Tester, 27
🚫 Navigation & Feature Accessibility Issues – No clear entry points for screen sharing, party invites, and chat.
💬 “I couldn’t figure out how to start a party. The buttons are too hidden!” – Beta Tester, 31
🚫 Lack of Adaptive Layouts – The same UI elements were scaled up for web without optimizing interactions.
💬 “I want an actual web layout, not just a bigger mobile version.” – Beta Tester, 26
🔍 User Research & Insights
A usability study was conducted in July with 18 desktop, tablet, and mobile web users.
Key Findings:
✔ Desktop users preferred a panel-based UI with clear chat, video, and party control separation.
✔ Tablet users wanted a layout closer to mobile but with better touch navigation.
✔ Users wanted a frictionless party invite system that worked directly in a browser without login friction.
✔ Web users struggled with webcam resizing and screen-sharing features.
📊 Competitive Benchmarking:
We analyzed platforms like Google Meet, Discord, and Twitch, extracting best practices for responsive layouts, video positioning, and user-friendly streaming controls.
🛠️ UX Design Process & Iterations
Key Design Improvements:
✔ Fully Responsive UI – Introduced an adaptive layout system that adjusts elements based on screen size.
💬 “Now it actually feels like a web app, not just a mobile screen stretched out!” – Beta Tester, 32
✔ Unified Navigation System – Standardized UI components across all devices for consistent usability.
💬 “It finally looks and works the same across all my devices!” – Beta Tester, 25
✔ Party & Invite Flow Redesign – Made joining parties via web faster and easier with one-click entry.
💬 “Joining a party is super quick! No need to log in or go through extra steps.” – Beta Tester, 27
✔ Screen Sharing Optimization – Users can seamlessly share their screen from any browser.
💬 “Screen sharing is way easier! It works smoothly on Chrome and Safari.” – Beta Tester, 31
✔ Flexible Chat & Video Placement – Users can resize and reposition webcams and chat for a more custom experience.
💬 “I can finally move my webcam where I want—so much better!” – Beta Tester, 28
🧪 Usability Testing & Findings
📊 Post-testing with 25 users showed:
✔ 72% increase in engagement due to improved navigation and discoverability.
✔ 38% faster party joining time with the streamlined one-click invite system.
✔ Webcam and chat usability ratings improved from 5.8/10 → 8.9/10.
✔ Users rated the new responsive UI 9.2/10, citing better device adaptability.
💬 “This update makes a HUGE difference—I actually use the web version now!” – Beta Tester, 29
📐 Final UI Solution
🌍 Adaptive Web Experience – Fully responsive design with custom layouts for desktop, tablet, and mobile browsers.
🗺️ Clear Navigation Structure – Intuitive organization for parties, screen sharing, and video controls.
🔗 One-Click Invite System – Seamless onboarding with direct access via shared links, reducing friction.
💬 Customizable Chat & Webcam – Users can resize, reposition, and personalize chat & webcam layouts.
📺 Optimized Screen Sharing – Improved latency, smoother interactions, and multi-user screen sharing support.
💬 “Oasis Live web finally works the way I expect it to—it feels like a real app now!” – Beta Tester, 27
🖥️ Responsive Web Browser
⚡ Problem: Users need a seamless experience across different devices.
📐 How it Works: Oasis Live uses a Hybrid Grid system to adjust the layout based on screen size.
🖥️📱 Visuals: Show different UI breakpoints (Desktop, Tablet, Mobile).
💬 User Quote: “I love how it just works on any device without feeling cluttered.” – Beta Tester, 27
📊 Impact: +65% usability score improvement in testing.
🎉 Lunch Party from the Browser
⚡ Problem: Users found the onboarding process confusing.
📐 How it Works: Users can now receive a link, sign in, and create a profile in seconds.
🖥️ Visuals: Step-by-step onboarding UI screenshots.
💬 User Quote: “Joining was effortless – I went from link to party in under 30 seconds.” – Beta Tester, 31
📊 Impact: 40% increase in successful first-time joins.
🖥️ Join the Party from the Browser
⚡ Problem Users needed an easy way to enter parties without installing software.
📐 How it Works: Hosts generate a unique URL for invites; users enter via a waiting room.
🖥️ Visuals: Screenshots of the waiting room and host approval flow.
💬 User Quote: “I love being able to join from any browser without needing extra apps.” – Beta Tester, 29
📊 Impact: +50% adoption in guest party joins.
📺 Screen Sharing
⚡ Problem Users couldn’t easily share their game view with friends.
📐 How it Works: One user shares their screen in theater mode, while future updates will allow multiple streams.
🖥️ Visuals: Screenshots of single and multi-user screen sharing modes.
💬 User Quote: “I can finally stream my game to friends without extra setup!” – Beta Tester, 32
📊 Impact: 30% increase in party engagement time.
👀 Participants Viewing Shared Screens
⚡ Problem Users had difficulty watching shared screens in a clear, interactive way, making engagement less immersive.
📐 How it Works: When users share their screen, all participants can view it in default layout, theater mode, or full screen. This allows viewers to see gameplay, react in chat, and communicate seamlessly. Future updates will support multi-screen viewing, allowing users to switch between shared streams within the same party.
🖥️ Visuals: Screenshots showcasing default layout, theater mode, and full-screen viewing experience.
💬 User Quote: “Watching my friend’s gameplay in full screen makes it feel like we’re playing together, even if I’m just a spectator!” – Beta Tester, 29
📊 Impact: 40% increase in user engagement, as participants now spend more time actively watching shared screens and interacting with chat.
💬 Chat System
⚡ Problem Users struggled with message visibility & lack of emoji support.
📐 How it Works: Introduced color-coded usernames, emoji support, and customizable chat layouts.
🖥️ Visuals: Screenshots of new chat UI and emoji picker.
💬 User Quote: “I can finally tell who’s talking! The chat feels alive now.” – Beta Tester, 33
📊 Impact: 60% increase in chat engagement.
🎭 Avatar Customization
⚡ Problem Users wanted personalization options for their profiles.
📐 How it Works: Introduced a library of customizable avatars.
🖥️ Visuals: Screenshots of avatar selection screen & customization panel.
💬 User Quote: “Choosing an avatar makes the experience feel more personal.” – Beta Tester, 25
📊 Impact: Higher retention for new users (+20%).
🔊 Volume Control (Host & Participants)
⚡ Problem: Users had no control over background noise in large parties.
📐 How it Works: Hosts can now mute/unmute users, adjust volume, and remove disruptive participants.
🖥️ Visuals: Screenshots showing host vs. participant control levels.
💬 User Quote: “I love that I can mute a noisy mic without disrupting the whole party.” – Beta Tester, 28
📊 Impact: Better moderation & improved user satisfaction scores (+55%).
📈 Business & User Impact
| Metric | Before Web Redesign | After Web Redesign |
|---|---|---|
| User Retention on Web | 45% | 82% (+37%) |
| Average Party Joining Time | 22 seconds | 13 seconds (-41%) |
| Screen Sharing Usability Rating | 5.2/10 | 8.8/10 |
| Overall User Satisfaction | 6.4/10 | 9.2/10 |
💬 “Before, I always used the mobile app. Now I prefer the web version—it’s smoother and easier to use.” – Beta Tester, 26
🎉 Conclusion
The Oasis Live responsive web design project successfully transformed the platform into a seamless, cross-device experience. Through user research, iterative design, and responsive UI solutions, we addressed key pain points, enhanced usability, and increased engagement.
📌 Key Takeaways:
✔ A well-structured responsive web layout enhances usability across different screens.
✔ Navigation clarity improves feature discoverability, leading to higher engagement.
✔ Reducing friction in party joining boosts user retention significantly.
✔ Users value customization options, especially for chat, webcams, and screen sharing.
💬 “This version of Oasis Live feels made for the web, not just copied from mobile.” – Beta Tester, 30