Delivering an OTT platform experience on mobile devices
Delivering an OTT platform experience on mobile devices
Bridging the gap for Indonesian creators by transitioning a desktop-only streaming builder into a mobile-first experience. This project focused on simplifying complex publishing workflows and enabling real-time live streaming directly from a smartphone.
Product designer
Nov 2024
Interaction design, Visual design
Bring desktop-only dashboard to mobile and enabling live stream on the go.
Bring desktop-only dashboard to mobile and enabling live stream on the go.
Mocaas is a no-code streaming builder that helps creators launch their own video platforms. Originally desktop-only, research found that over 70% of Indonesian creators primarily use mobile devices for content. This project aimed to meet creators where they are by building a mobile app for video management and live streaming.
Creators relied heavily on mobile devices, but Mocaas was locked to desktop.
Creators relied heavily on mobile devices, but Mocaas was locked to desktop.
- Limited Accessibility: Creators were locked to desktop despite being mobile-heavy.
- Complex Experience: The original web forms were too long for small screens.
- Missed Opportunities: Users were forced to use other apps for mobile live streaming.
A mobile-first design that simplifies upload and enables live streaming.
A mobile-first design that simplifies upload and enables live streaming.
Mobile-First Upload Flow
Mobile-First Upload Flow
- Start directly from the “+” button on the home tab.
- Upload video or go live both accessible in one tap.
- Automatically fill video title and thumbnail from the uploaded file.
Smart Drafts & Quick Edits
Smart Drafts & Quick Edits
- Provide slide up editing for title, price, and description to streamline experiences.
- Automatically save unfinished uploads as drafts, so creators never lose progress.
Seamless Live Streaming
Seamless Live Streaming
- Seamless Live Streaming.
- Add title, thumbnail, and choose monetization.
- Real-time chat integrated into the live stream UI.
iOS launch delayed by App Store fee.
iOS launch delayed by App Store fee.
Despite the successful design and initial development, the iOS launch was delayed due to a misunderstanding about the 30% App Store commission fee. Meanwhile, the Android launch was deprioritized because it was expected to have a lower impact.
Flow for adding video
Flow for adding video
Flow for adding playlist
Flow for adding playlist
Balancing technical speed with early business validation.
Balancing technical speed with early business validation.
Validate constraints early
I learned to align on business policies like App Store fees and platform user fit at the start to avoid late-stage roadblocks.
Leverage design systems
Using Material Design proved that standardized frameworks are essential for accelerating the design and development.