Designing a responsive livestreaming feature for Parabled, a professional e-sports coaching platform. I led the design for the student-facing interface.
Parabled (now known as Savicore) is an esports coaching company that teaches professional gameplay to League of Legends players. At the time, there was no existing feature for students to view lectures on the website. Classes were instead hosted on Discord or on coach's Twitch channels.
This posed issues from both the user and business standpoint—students had to use a third party software to attend lessons, and the use of other platforms may come across as unprofessional to investors.
We needed to balance user-friendly functionality with professional presentation for our streaming feature to creating an attractive experience. For students, this meant developing an accessible, intuitive, and engaging platform. For investors, it was crucial to showcase a polished, cohesive brand that highlighted the platform's scalability and growth potential.
Our target users often use Twitch, Kick, and YouTube to view video content. We conducted a competitor analysis to identify common trends, strengths, and weaknesses. Additionally, we looked at videoconferencing platforms often used in an educational or professional setting, such as Google Meet and Zoom.
A summary of the features that each competitor offered.
Common pain points that our users stated include difficulty navigating to coach course material, technical difficulties with Discord bots, and a desire for a more comprehensive website.
With the prominent influence of platforms like Twitch and Kick in the gaming industry, we took inspiration from their UI, as most gamers will find these layouts to be intuitive. We have also included the ability for the audience to raise hands and join the stage as a guest streamer, similar to Google Meet.
Combining popular gaming livestreaming interfaces with the functionality of video conference platforms creates a useful and interactive experience for our users.
The primary goal was to incorporate features that would address the user pain points we identified. To visualize layout and functionality, I created low fidelity wireframes in Figma. Key features include:
.png)
.png)
Examples of the lofi wireframes for standard view and accept stage invite module.
When designing high fidelity mockups, I incorporated stakeholder feedback and collaborated with our engineers to make sure our designs were aligned with business goals and within the scope of development. During this phase, I added additional use cases, such as hover states for buttons and additional video interactions.
Full screen and hide chat
Utilizing a 16:9 aspect ratio, users will be able to full screen their video. In addition, they can choose to toggle the side chat.
Raise hands and view community
Students will be able to raise their hands if they have any questions. There is also an option to see other viewers that are attending the same sessions.
Join the stage
To set us apart from other livestreaming platforms, students have the option to join coaches on their stream and share screens when invited.
Our target users may need to view lectures on the go due to busy schedules. To further improve accessibility for students, we also designed for mobile and tablet devices.
Following the initial launch of the livestreaming platform, we experienced a dramatic increase in user engagement, with more than triple the usual number of users joining and interacting with our courses. This significant uptick highlights the platform's success in capturing interest and driving active participation.
Our high-fidelity mockups received positive feedback from various collegiate teams, leading to their conversion into subscribers. This not only boosted our monthly revenue, but also expanded our network significantly.
To validate our design decisions, the next steps for our livestreaming platform is user testing. For this design sprint, we focused on the core features that were most impactful for users. In the next phase, some additional features I would like to explore include:
1. Full screen with chat. This feature would be useful for users that prefer to chat while also watching videos in full screen mode.
2. Custom emojis and reactions. An insight that I found with streaming platforms that focused on games was a strong sense of community with streamers. Since our coaches are professional players in the League of Legends space, custom emojis and reactions for coaches can strengthen community with our players.
3. Feedback option. To continuously improve both our platform and the quality of services offered, we can implement a streamlined way for students to leave feedback, such as a rating system or module at the end of class.
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}