Product Designer
Creating a live streaming platform for large scale online events.
March 2021 to May 2022
Project Context
- During lockdown, we saw a rise in digital events. New challenges arise as well as new ways of curating, organising, inviting and recording events in order to diffuse them live.
- During this period we also witnessed the first episodes of ”zoom fatigue”.
- The cost of launching such large scale digital events was daunting. Thus, ”Orange Events” and Publicis Live, two entities specialised in events, decided to launch their own online event streaming platform in order to market it to their client and become independent from third-party services.
- I was part of Publicis' core team and worked alongside with orange's core team to build the platform from the ground up.
- Three interfaces were built and plugged together to bring this SaaS product to life : Backstage (organisers) , Live stage (viewers) & Video mixer (speakers).
Project Structure
Backstage
Video studio
Event page
The backstage was a backoffice dashboard where event organisers could prepare and setup their events.
From this space, they could brand their event page, invite and manage attendees, configure live interactions such as custom reactions, live surveys, chat moderation and much more.
It was also the core area to plug every other streams (video studio & event page) as well as control streaming flows.
The video studio is where speakers and stream participants recorded and diffused their videos.
Similar to audio-visual control room for Television, this interface had a wide array of features to control video aspects, special effect visuals & accessibility features such as subtitles.
It was a powerful tool that allowed a topnotch video quality & allowed to go much further with 3D interactions to showcase products.
This was the front end page where event attendees could view , interact and enjoy the event.
It consisted in a video player, a live chat and event's information and description.
Access to the event was made easy with a 1 time login key.
My Tasks :
- 1- We had three teams composed of developers, designers & product managers.
- I was mainly tasked to manage a design team of 5 designers and assist where my help was needed. I was in charge of documenting the user stories on Notion & create the tasks cards and attribute them to each designer.
- My main rôle was to make sure that the overall product vision was consistent across all three interfaces in order to guarantee a seamless experience to our different typologies of users : organisers, viewers & speakers.
- For our design system, we used a material design library (Vuetify) and adapted it to our three interfaces in order to stay consistent within the whole product. This allowed for faster sprints.
- Our design tasks were organised in a Notion Kanban dashboard that I organised and updated weekly & religiously.
- I was also tasked with testing and monitoring deliveries and provide feedback when needed.
Multi-user journeys map :
Since our three interfaces were connected around the same live event and in order to avoid missing out on a key touchpoint, I drew this multi-user journey to give the team an overview of all the touchpoints to implement in the wireflows.
Team Process :
- Our three interfaces were divided into micro user stories across the three teams by product managers.
- We the design team, took these user stories and translated them into design tasks. We coordinated this translation by discussing with developers to articulate their needs from us.
- We designed end to end user journeys for each needed feature in pair design.
🔍🔍🔍🔍🔍🔍🔍🔍 Close ups 🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍
🔍 Focus on : Breakpoints & innovation.
Guarantee a multi-device experience
👉🏽 One of our key feature is to watch to live event on your TV and access the Chat on your mobile phone.
👉🏽 We called this feature “extended screen”. to activate it, user needed to scan a QR code with his phone and it will immediately connect him to the live audience chat. It allowed user to participate seamlessly while watching the event on their TV.
👉🏽 With great power comes great responsibility ! Such innovation needed to be carefully studied and be compliant with a wide variety of devices ! We took breakpoints very seriously in our workflows !
🔍 Focus on : Live Surveys configuration.
Live survey configuration was a key feature. Backstage organiser needed to control the flow of questions while the speaker was speaking.
We had to reflect on this interface to deliver the best possible workflow that allowed configuration with ease.
The result was an interface that allowed organisers to pre-configure the questions and possible answers and then diffuse them by simply selecting the questions. We also implemented a live data view of the answers for the speaker to use and react upon.
🔍 Focus on interactions zoning & breakpoints.
Our event streaming interface had a complexe structure since we plugged multiple feature. We had many discussions with developers to clearly define the various zones of interactions and diffusions on all possible devices.
These zones where :
1- Live chat area
2-Video controls area
3-Video area
4-Video info & descriptions
5-Live interactions.
