Prebuilt: Simplifying live video embedding in web and mobile apps
Timeline
2023, 6 months
The Problem
The 100ms sample app displays inconsistencies on various platforms, leading to UX problems and a lack of customization options.
The Solution
An overhaul of the sample app across four platforms – Web, mWeb, Android, and iOS, employing a token-based design system to maintain uniformity, while offering a platform-independent and adaptable approach, and a customizer within the 100ms dashboard to seamlessly customise the app to your needs.
My Role
Design Lead — closely worked with the product and engineering team to redesign the app. Developed color tokens, a diverse set of components, the overhaul of over 30 user flows tailored for each platform, and the seamless integration of a customizer within the dashboard.
The Team
Akanksha, Saikat, Chris and 30+ awesome people.
The Problem
The previous iteration, known as the "sample app," presented several critical issues. It lacked a no-code customization feature, requiring customers to invest significant time and effort into integrating the 100ms Video SDK and subsequently delivering outcomes.
The extended turnaround time (TAT) for integrating and customizing the sample app resulted in a significant number of drop-offs among potential users. Moreover, the sample app's lack of use-case specificity further exacerbated the problem, demanding extensive time for adjusting settings and customization to meet individual requirements.
✿
How does 100ms Prebuilt solve this
Our solution offers a seamless, no-code method for configuring and deploying apps. This versatile platform primarily supports standalone web and mobile apps, and extends compatibility across various platforms.
✿
Discovery
The goal here was to enable customers (and our sales team) to demo, customize Pre-built Kits and Room Elements on dashboard.
Approach 1: Reveal UI component code to enable customization by customer developers through 100ms Docs.
Approach 2: Prebuilt Customiser. This tool allows customers to customize Prebuilt templates according to their specific needs or preferences. It provides a way for customers to modify various aspects of the prebuilt design, such as appearance, roles, and settings. It empowers users to tailor Prebuilt templates to suit their unique requirements, saving time and effort in creating custom designs from scratch.
Customers can find the Prebuilt Customiser and Join via Prebuilt with our onboarding, which helps us to identify what the customer is looking for and customise the template to their needs…
Also, with other discovery points across the dashboard. The main touchpoint being the template page, where customers come to customise their app.
✿
Color Tokens
Design tokens embody the subtle, repeated design decisions that shape a design system's visual appeal. Tokens replace static values, such as color hex codes, with comprehensible names. This also allows customers to easily change colors by adjusting a hex code.
Incorporating these color tokens into Figma using variables allowed us to maintain design consistency across various platforms.
Customers can effortlessly personalize their Prebuilt applications using our Prebuilt Customizer by changing the hex codes, as demonstrated in the video below.
✿
Design Components
Collaborated closely with the engineering and product teams to revamp the design system, encompassing typographic styles, as well as mobile and web components, all without significantly altering existing sample app components in order to minimize extensive engineering work.
With the power of color tokens, we are able to easily implement light and dark modes within Figma and in the Prebuilt Customizer.
✿
Explorations
There was multiple iterations and explorations for each part of the app. Some were not working best for the users and some had to be staged out so developers can ship it in time. Here's one of the explorations.
✿
Preview Screen
This is the first of the three screens on Prebuilt. This is where your users land before they join a 100ms hosted room. We've added some sleek updates to make joining more seamless:
Customise Title and Subtitle on preview when your users enter the room - Delight your users with a custom welcome text for each role in your room.
Users can quickly access microphone and video settings before joining the room
✿
Dynamic Layout
The existing configuration isn't highly customizable unless you dive into the code and modify it; it's unfit for a 1:1 call. Furthermore, it lacks responsiveness, retaining its consistency across breakpoints.
The proposal to improve this was a dynamic tile layout. Prebuilt dynamically arranges tiles that optimises for maximum tile coverage area; the layouts are now more responsive and adaptive with Chat and Participant list.
Prominent tiles for roles - For a 1:many use case, you can now assign a role to be the most prominent role in the room, while other roles can be assigned secondary tile position.
✿
Bring to Stage
In a webinar with a Broadcaster and multiple Viewers; Viewers can request to talk to the broadcaster real-time by raising their hands. Broadcaster can approve/decline viewers requests to join the broadcaster.
✿
Outcome
Prebuilt marks the start of a journey to make video creation as low-code as possible, and the results prove that we're on the right track.
Impact from the first 3 months of release:
95%
Successfully created Prebuilt app in onboarding
600+
Prebuilt apps across Web, iOS and Android SDKs
240+
Customers used Prebuilt Customiser
Happy customers!
Customers are the forefront of what we do at 100ms. Our goal was to make the integration and customization of live video as seamless as possible. This response keeps us going.
Figma UI Kit
We have created a system of colors, typography, and components to help you design your own video conferencing, live streaming, and any video/audio experience imaginable based completely on Prebuilt.
Back to home
✿
Prebuilt: Simplifying live video embedding in web and mobile apps
Timeline
2023, 6 months
The Problem
The 100ms sample app displays inconsistencies on various platforms, leading to UX problems and a lack of customization options.
The Solution
An overhaul of the sample app across four platforms – Web, mWeb, Android, and iOS, employing a token-based design system to maintain uniformity, while offering a platform-independent and adaptable approach, and a customizer within the 100ms dashboard to seamlessly customise the app to your needs.
My Role
Design Lead — closely worked with the product and engineering team to redesign the app. Developed color tokens, a diverse set of components, the overhaul of over 30 user flows tailored for each platform, and the seamless integration of a customizer within the dashboard.
The Team
Akanksha, Saikat, Chris and 30+ awesome people.
The Problem
The previous iteration, known as the "sample app," presented several critical issues. It lacked a no-code customization feature, requiring customers to invest significant time and effort into integrating the 100ms Video SDK and subsequently delivering outcomes.
The extended turnaround time (TAT) for integrating and customizing the sample app resulted in a significant number of drop-offs among potential users. Moreover, the sample app's lack of use-case specificity further exacerbated the problem, demanding extensive time for adjusting settings and customization to meet individual requirements.
✿
How does 100ms Prebuilt solve this
Our solution offers a seamless, no-code method for configuring and deploying apps. This versatile platform primarily supports standalone web and mobile apps, and extends compatibility across various platforms.
✿
Discovery
The goal here was to enable customers (and our sales team) to demo, customize Pre-built Kits and Room Elements on dashboard.
Approach 1: Reveal UI component code to enable customization by customer developers through 100ms Docs.
Approach 2: Prebuilt Customiser. This tool allows customers to customize Prebuilt templates according to their specific needs or preferences. It provides a way for customers to modify various aspects of the prebuilt design, such as appearance, roles, and settings. It empowers users to tailor Prebuilt templates to suit their unique requirements, saving time and effort in creating custom designs from scratch.
Customers can find the Prebuilt Customiser and Join via Prebuilt with our onboarding, which helps us to identify what the customer is looking for and customise the template to their needs…
Also, with other discovery points across the dashboard. The main touchpoint being the template page, where customers come to customise their app.
✿
Color Tokens
Design tokens embody the subtle, repeated design decisions that shape a design system's visual appeal. Tokens replace static values, such as color hex codes, with comprehensible names. This also allows customers to easily change colors by adjusting a hex code.
Incorporating these color tokens into Figma using variables allowed us to maintain design consistency across various platforms.
Customers can effortlessly personalize their Prebuilt applications using our Prebuilt Customizer by changing the hex codes, as demonstrated in the video below.
✿
Design Components
Collaborated closely with the engineering and product teams to revamp the design system, encompassing typographic styles, as well as mobile and web components, all without significantly altering existing sample app components in order to minimize extensive engineering work.
With the power of color tokens, we are able to easily implement light and dark modes within Figma and in the Prebuilt Customizer.
✿
Explorations
There was multiple iterations and explorations for each part of the app. Some were not working best for the users and some had to be staged out so developers can ship it in time. Here's one of the explorations.
✿
Preview Screen
This is the first of the three screens on Prebuilt. This is where your users land before they join a 100ms hosted room. We've added some sleek updates to make joining more seamless:
Customise Title and Subtitle on preview when your users enter the room - Delight your users with a custom welcome text for each role in your room.
Users can quickly access microphone and video settings before joining the room
✿
Dynamic Layout
The existing configuration isn't highly customizable unless you dive into the code and modify it; it's unfit for a 1:1 call. Furthermore, it lacks responsiveness, retaining its consistency across breakpoints.
The proposal to improve this was a dynamic tile layout. Prebuilt dynamically arranges tiles that optimises for maximum tile coverage area; the layouts are now more responsive and adaptive with Chat and Participant list.
Prominent tiles for roles - For a 1:many use case, you can now assign a role to be the most prominent role in the room, while other roles can be assigned secondary tile position.
✿
Bring to Stage
In a webinar with a Broadcaster and multiple Viewers; Viewers can request to talk to the broadcaster real-time by raising their hands. Broadcaster can approve/decline viewers requests to join the broadcaster.
✿
Outcome
Prebuilt marks the start of a journey to make video creation as low-code as possible, and the results prove that we're on the right track.
Impact from the first 3 months of release:
95%
Successfully created Prebuilt app in onboarding
600+
Prebuilt apps across Web, iOS and Android SDKs
240+
Customers used Prebuilt Customiser
Happy customers!
Customers are the forefront of what we do at 100ms. Our goal was to make the integration and customization of live video as seamless as possible. This response keeps us going.
Figma UI Kit
We have created a system of colors, typography, and components to help you design your own video conferencing, live streaming, and any video/audio experience imaginable based completely on Prebuilt.
Back to home
✿
Prebuilt: Simplifying live video
embedding in web and mobile apps
Timeline
2023, 6 months
The Problem
The 100ms sample app displays inconsistencies on various platforms, leading to UX problems and a lack of customization options.
The Solution
An overhaul of the sample app across four platforms – Web, mWeb, Android, and iOS, employing a token-based design system to maintain uniformity, while offering a platform-independent and adaptable approach, and a customizer within the 100ms dashboard to seamlessly customise the app to your needs.
My Role
Design Lead — closely worked with the product and engineering team to redesign the app. Developed color tokens, a diverse set of components, the overhaul of over 30 user flows tailored for each platform, and the seamless integration of a customizer within the dashboard.
The Team
Akanksha, Saikat, Chris and 30+ awesome people.
The Problem
The previous iteration, known as the "sample app," presented several critical issues. It lacked a no-code customization feature, requiring customers to invest significant time and effort into integrating the 100ms Video SDK and subsequently delivering outcomes.
The extended turnaround time (TAT) for integrating and customizing the sample app resulted in a significant number of drop-offs among potential users. Moreover, the sample app's lack of use-case specificity further exacerbated the problem, demanding extensive time for adjusting settings and customization to meet individual requirements.
✿
How does 100ms Prebuilt solve this
Our solution offers a seamless, no-code method for configuring and deploying apps. This versatile platform primarily supports standalone web and mobile apps, and extends compatibility across various platforms.
✿
Discovery
The goal here was to enable customers (and our sales team) to demo, customize Pre-built Kits and Room Elements on dashboard.
Approach 1: Reveal UI component code to enable customization by customer developers through 100ms Docs.
Approach 2: Prebuilt Customiser. This tool allows customers to customize Prebuilt templates according to their specific needs or preferences. It provides a way for customers to modify various aspects of the prebuilt design, such as appearance, roles, and settings. It empowers users to tailor Prebuilt templates to suit their unique requirements, saving time and effort in creating custom designs from scratch.
Customers can find the Prebuilt Customiser and Join via Prebuilt with our onboarding, which helps us to identify what the customer is looking for and customise the template to their needs…
Also, with other discovery points across the dashboard. The main touchpoint being the template page, where customers come to customise their app.
✿
Color Tokens
Design tokens embody the subtle, repeated design decisions that shape a design system's visual appeal. Tokens replace static values, such as color hex codes, with comprehensible names. This also allows customers to easily change colors by adjusting a hex code.
Incorporating these color tokens into Figma using variables allowed us to maintain design consistency across various platforms.
Customers can effortlessly personalize their Prebuilt applications using our Prebuilt Customizer by changing the hex codes, as demonstrated in the video below.
✿
Design Components
Collaborated closely with the engineering and product teams to revamp the design system, encompassing typographic styles, as well as mobile and web components, all without significantly altering existing sample app components in order to minimize extensive engineering work.
With the power of color tokens, we are able to easily implement light and dark modes within Figma and in the Prebuilt Customizer.
✿
Explorations
There was multiple iterations and explorations for each part of the app. Some were not working best for the users and some had to be staged out so developers can ship it in time. Here's one of the explorations.
✿
Preview Screen
This is the first of the three screens on Prebuilt. This is where your users land before they join a 100ms hosted room. We've added some sleek updates to make joining more seamless:
Customise Title and Subtitle on preview when your users enter the room - Delight your users with a custom welcome text for each role in your room.
Users can quickly access microphone and video settings before joining the room
✿
Dynamic Layout
The existing configuration isn't highly customizable unless you dive into the code and modify it; it's unfit for a 1:1 call. Furthermore, it lacks responsiveness, retaining its consistency across breakpoints.
The proposal to improve this was a dynamic tile layout. Prebuilt dynamically arranges tiles that optimises for maximum tile coverage area; the layouts are now more responsive and adaptive with Chat and Participant list.
Prominent tiles for roles - For a 1:many use case, you can now assign a role to be the most prominent role in the room, while other roles can be assigned secondary tile position.
✿
Bring to Stage
In a webinar with a Broadcaster and multiple Viewers; Viewers can request to talk to the broadcaster real-time by raising their hands. Broadcaster can approve/decline viewers requests to join the broadcaster.
✿
Outcome
Prebuilt marks the start of a journey to make video creation as low-code as possible, and the results prove that we're on the right track.
Impact from the first 3 months of release:
95%
Successfully created Prebuilt app in onboarding
600+
Prebuilt apps across Web, iOS and Android SDKs
240+
Customers used Prebuilt Customiser
Happy customers!
Customers are the forefront of what we do at 100ms. Our goal was to make the integration and customization of live video as seamless as possible. This response keeps us going.
Figma UI Kit
We have created a system of colors, typography, and components to help you design your own video conferencing, live streaming, and any video/audio experience imaginable based completely on Prebuilt.
Back to home