About the Client
BoxCast is a live-streaming platform that builds hardware and software solutions for organizations and events.
Setting the Stage
About the Project
BoxCast was looking for opportunities to drive user growth and lower the barrier of entry for new users to live stream with their products. It was easy for users to be deterred by the need for special video encoding hardware or the lack of production tools available in our iOS app.
What Was the Goal
How might we decrease the time it takes for a user to share their first stream?
Team Structure
Product Designer, Brandon Geib
Front-end Developer I
Front-end Developer II
Back-end Developer
Quality Engineer
SCRUM Master
Product Manager
Primary interface I designed showing A/V controls, social destinations, and screen configuration options during a livestream.
Key Activities
Competitive Analysis
UX Interviews
Interface Testing
Wireframe Creation
UI Design
Interactive Prototypes
Developer Collaboration
Identifying Problems
How Problems Were Identified
The idea for a browser-based live streaming application that allowed users to stream right from their computer, no download or additional equipment required, arose early in discussions. To vet this solution I conducted interviews and wrote survey questions. My goal was to understand if or how a browser-based streaming platform would fit into users’ workflows beyond getting them to go live for the first time faster. I also conducted and reported on a competitive analysis of the core functionality provided by various products we expected to compete with.
Once core functionality was developed I worked to coordinate alpha testing with a small set of users who had specific scenarios in which they could use Producer. We gave this group early access to the product in exchange for their feedback. I was able to run interface testing sessions with these alpha users and funnel their insights back into product improvements ahead of launch.
Who Were the Users
Pastors: Looking for a light-weight way to supplement weekly services with insights or announcements from their desk.
Content Creators: Looking to cut out additional video encoding tools like OBS from their live streaming workflows.
Designing Solutions
How Solutions Were Designed
The product team collaborated on creating an expected scope for launch and I began working through wireframes, then prototypes for how the new browser-based streaming product (dubbed Producer) would function. These prototypes were developed iteratively and in conjunction with developers as the team pushed an initial product forward together.
Highlight
Getting Started Faster
Problem
Pastors often had A/V teams to help during Sunday services but were unfamiliar or did not have the additional support needed to use hardware encoders, cameras, and microphones on their own.
Solution
We built Producer to function with just a webcam and internet access, no extra equipment required.
Modal screens for starting or scheduling a brand new broadcast (livestream).
Highlight
Sharing Your Screen
Figure 1) Primary interface by which a user can initiate sharing their screen. Figure 2) Modal that recommends users have a secondary monitor. Figure 3) Screen being shared with visibility and screen configuration controls.
Problem
Early interviews revealed that users expected any browser-based live streaming tool worth using to have certain key functionality including screen-sharing, and camera layout options.
Solution
I designed the basic screen sharing option first and prioritized it in the main action bar. To provide easy supplemental management of layout and screen visibility I added screen configuration and media source control options to the right sidebar.
Highlight
Adding Graphics
Figure 1) User interface while adjusting the visibility, position and size of graphics before applying changes. Figure 2) Viewer perspective of an image overlay that has been applied to a livestream.
Problem
Closely behind screen sharing on the list of expected functionality from users was the ability to add graphics. This was something abundant in similar products and it was obvious we’d be hard pressed to attract or retain users without it.
Solution
I designed the nuanced interactions for adding, removing and placing graphics before and after a user was live. I also helped clarify the logic for how to show graphics to users when they’re viewing a mirrored display so they don’t accidentally point to the wrong corner during a livestream.
Figure 1) Connection quality icon that changes based on the users internet speed. Figure 2) Status of social media connections being streamed to while live. Figure 3) Microphone pickup and volume control.
Highlight
Monitoring Quality
Problem
Users were unaware when their video or audio quality would degrade in the middle of a stream.
Solution
I added a connection strength graphic to always show signal strength while streaming as well as a pop-up trigger to notify users when their stream quality may be degrading due to a poor connection. In addition, I designed the volume control slider to also indicate when the mic picked up sound so users could see how loud different sounds were and if they were blowing out the mic.
Highlight
Streamlining Tests
Figure 1) Part of the screen for initiating a test stream or entering Producer from BoxCast's main interface. Figure 2) Video during a livestream. Figure 3) The modal that pops up after a test stream has ended with a prompt to delete the recording.
Problem
Test streams quickly cluttered users’ dashboards with irrelevant video recordings.
Solution
I designed a new flow that allowed users to start a private test stream. This flow included a prompt to delete the stream as soon as it concluded.
Upon Reflection
Project Status
Complete - Producer launched for all users.
Personal Retro
While Producer was a new product that I designed the interface for, it was built on BoxCast’s existing technical requirements. This gave me the opportunity to improve upon flows or interactions that existed elsewhere in the product. It also helped me creatively think through design constraints related to scheduling, going live, and joining an in-progress broadcast. All of this helped me become a more thoughtful and better detail oriented designer.
