UI\UX, Branding & FED
InstaLively is a live streaming app that seamlessly integrates with one's Youtube channel, thereby managing all the DRM(Digital Rights Management) and enabling Video Monetization. Instalively was backed by six angel investors(GSF Accelerator’s Rajesh Sawhney, Google MD Rajan Anandan, SlideShare Co-Founder Amit Ranjan,...) followed by Series A round from SAIF Partners. InstaLively eventually got acquired by Hike Messenger in 2017.
I started to work on this streaming application as an independent Freelancer and later became part of the founding team. My role in this project was that of a Design Technologist - Leading the Product Design and Front-End development for the mobile, web and desktop app. Managed a team of 2 front end developers and 2 graphic designers.Problem Statement
Cross-platform low band-width video delivery that is also cost-effective is required in the Asian market to enable everyday enterprise to create/ broadcast content from any location, thereby democrise online video.The Process
Following the three Design principles listed below I kept the design process(figure) very straightforward.
- Build on what we love.
The best logic is so natural, we feel like it was our idea. Rather than designing for what’s new, I look to metaphors for what we already know and love.
- Show who we could be.
The most compelling product is a better portrait of ourselves. Rather than designing for what’s accessible, I design for moments of potential.
- Create that together.
Often users are the best designers. Rather than solving every problem myself, I try to design platforms around who and what we already share.
Design process followed at InstaLively
Being a small team with cost and time constraints for sure limits your breath of research. We would rely on post-event user feedbacks, make WhatsApp groups of influencers from the platform to gather intel on user needs and rather than A/B testing we would just indirectly post questions on our WA groups to make UX decisions and readup as much as we could to understand the competition better.
Competitive market analysis
For every new feature we would just repeat the same process mentioned in the above figure and honestly at times we would just jump straight to development by just sketching out some mocks on a piece of paper which I wasn’t very proud of, so I kept evolving it over time to advocate UX in true sense. Have a look at some of the notes/sketches/flow we did on the board:
How Does It Work?
Some scribbles from the 1st week kickoff meetings
Based on the SaaS(software as a service) model InstaLively was catering to both the worlds - B2C via mobile + web application and B2B via web + desktop application. The secret sauce was YouTube Livestreaming API which enabled us to seamlessly integrate with one's Youtube channel allowing users to GO LIVE using our wrapper app.
In the B2B world of InstaLively we had two livestreaming modes – “Do-it-Yourself" OR "Get External Help". While the former(DIY) was free, thanks to Youtube 🙏🏼, the latter(uber-esque: Hire-a-Videographer), a nearest(user entered location) videographer comes to your location on the click of a button to livestream/ record the event into your Youtube channel. This strategy was aimed to make users aware about the app and get them on the platform.
Two modes of Livestreaming using the web platform + desktop app
Here a walkthrough of the process 👉 Instalively_web_tutoria.pdf
Now coming to B2C app which we ended up concentrating the most, because why not? This is the space where we’d get to acquire users in mass and spread the Livestreaming awareness apart from the fact that the world is going portable and mobile phones are getting more powerful everyday.
With InstaLively mobile app, going live was made super easy. Login > Name your event > Set share setting > Go Live
Following are some user flows from the latest version of the app:Onboarding/ Login Flow
Keeping the onboarding experience as minimal as possible with Facebook(on design) or Google SSO to fetch user information for Sign-In or Sign-Up along with asking user preference on what kind of content they like to watch.
Discovery/ Home screen
Prototype of the onboarding experience
I designed the MVP for InstaLively in Photoshop and if you’ve ever done that you’ll always praise these modern tools like Sketch or Figma 🙏. Checkout the screens below and notice all that we ended up changing in our journey from MVP to a matured design to solve discoverability:
Creation(GoLive or Record)/ Consumption
MVP to the final designs improvising content discovery
We had no usability lab to test our designs, all we had were users feedback post live-streaming. “Title your phone to GO LIVE” seriously what were we thinking? There were so many instances where users would accidentally go live!! Also putting a direct CTA to share on WhatsApp didn’t work the way we expected, so we moved-on to automated FB-Share(user selects share behaviour).
Creation & Consumption from MVP to final designs
We also realised that viewers won’t always express with comments and so we added emojis(the red button on viewer screen) for the viewers to express more. Tap to make the emoji fly and optionally long-press to change the emoji of your choice which will be viewed on both viewer's and broadcaster's screen.Measuring Success
With over over 1000K+ minutes broadcasted from thousands of users including 100+ influencers getting 10K+ views defines good success of InstaLively. Checkout some popular streams made on InstaLively 👇
Feel free to checkout more stream made via InsaLively on InsaLively's Youtube Channel And thanks for reading 🙌