In 2023, we added a new tool, CONNECT, to be the main page of Frequency's Studio software, giving users a quick, actionable window into their video streaming performance data.
My role was to own the dashboard layout, and figure out ways for customers to self-service common playout and schedule issues, a common customer success request.
1. Give creators (and eventually, distributors) an overview of their entire streaming operation on Frequency.
2. Add status monitoring.
3. Add ability to fix common playout and schedule issues without customer support help.
4. Improve scalability by making self-service product more attractive.
Channel Status
Stream (Channel x Distributor) Status
On Air Status
Playout Alerts
Schedule Alerts
Live Playout Monitoring
Distribution Matrix
Monitoring Dashboard
Actionable Alerts
1. Dashboard layout - Make alerts the primary focus
2. Guide users to self-service actions
3. Work with product team to add new elements to updated design system
Kickoff: August 2022 | Launch: June 2023
1. Head of Design and Product
2. Sr Product Designer (me)
3. SVP of Marketing
4. Head of Product Engineering
5. CEO
1. New User Flows
2. Wireframes
3. High-fidelity Figma prototype
4. Final implementation of dashboard and fix functionality
How do users currently monitor their stream playout?
Do they want to fix their own problems?
What are most common issues?
Can we educate about fixes in real time?
What is the engineering load?
Bringing users to other tools for fixes may be complex
Avoid scope creep
How do we prioritize information on the dashboard?
Multiple levels of issue severity
1. Issues arise, they call Frequency to fix it, or have to dig through Studio to find away to fix it.
2. Monitoring all streams is difficult - especially across distributors
3. No central place to manage and monitor all your channels and streams once they're set up
1. Card Sorting - Asked users to indicate their priorities for a) most common issues they experience, b) reasons they call support, and c) possible solution options
2. Wireframes & Low-Fidelity Prototypes - Shared with co-workers and a few close clients to determine preferences of layout for a) alert configurations, b) ways to guide users toward solutions, c) fixing within CONNECT tool vs. moving to respective tools, d) more or less functionality contained on CONNECT dashboard.
3. Interviews and Surveys - To answer qualitative questions such as a) how do you use Studio, b) How often do you use Studio, c) would you be open to self-service problem solving, and finally d) how do you currently monitor playout. I also asked users to accomplish a task using the old interface - finding playout or scheduling issues, and monitoring streams.
1. Black screen
2. Gaps in Schedule
3. Ingest (Upload) Failure
4. Ads missing
5. Live Sports overrun
6. Schedule Overlap
7. Distributor connection down
Close clients
Customer Success team
Team members
Frequency-operated users
Self-service users
More likely to self-service
Add value
Reallocate monitoring resources
More executive-level participation
Card sorting was instrumental in determining the following:
1. Which main issues to track on the dashboard, and priority
2. Which issues would be labeled "High," "Medium," and "Low" urgency
2. Building an INTUITIVE flow for self-service of certain issues
As this was the first dashboard and issue monitoring solution designed for Frequency Studio, I paid it special attention in wireframes through a variety of iterations (recreated to the right). As with any interface, the challenge was balancing simplicity with valuable information.
1. A simple "alerts-focused" iteration later incorporated urgency ratings and more detailed descriptions.
2. Overall Alert settled in the top left, leading directly into alerts split into the main categories of Playout, Scheduling, and Ingestion alerts.
3. Side by side columns of alerts gave way to wider panels as more information (such as Images, Channel, Description, and Status) were added, with "view all" buttons to bring up modals with more issues.
4. Generic action buttons became tool logos (e.g. SCHEDULE and INGEST) to indicate that you would be taken to that tool to examine and fix the issue.
My interview pool included representatives from 3 clients who had been Frequency customers for several years. I also surveyed existing users, with different surveys going out to clients who self-serviced and those who hired Frequency to operate the software for them. Wireframes and prototypes were iterated on initially with feedback from project team members, and later from the client representatives.
The research as a whole confirmed the company's strategy of creating an actionable monitoring dashboard to shift monitoring and simple troubleshooting to more users, to make it more scalable as Frequency Studio becomes more popular. It also helped the Sales team hone in on aspects of the tool that would add value and make it more attractive to potential customers who want quicker fixes to major issues.
Alert flow:
1 > 3 > Details > Action
Informed layout of dashboard from top-left
Determination that fixing even simple issues required more input than clicking a dashboard button, so will take you to appropriate tool
Action buttons with Studio tool icons, indicating where you'll be taken
Balanced hierarchy to inform as well as alert
Monitor pane to view live playout of all streams simultaneously, with alerts visible there as well
Override playout functionality (reversible) to quickly solve playout issues with predetermined media
Created flows for actionable alerts based on the most common issues faced, based on work with the Product and Engineering teams to determine the most intuitive and effective ways to accomplish those fixes.
I built Figma prototypes with the help of our Sr UX Designer and the Head of Design and UX, who were also in the process of building a comprehensive design system for Frequency Studio. Interactions and flows were tested with close clients for effectiveness.
Designed a new alert bar for the top of the dashboard, with alerts for playout, scheduling, and ingestion, plus one for total alerts.
Eye flows from top left, across alert bar, alerts correspond to panes, panes lead you to action.
Designed monitor squares that were big enough to see playback, but small enough to be able to load dozens at a time.
Status panels organized by time and urgency, with additional details and action buttons.
Action buttons in the shape of tool icons (in this case, INGEST) to indicate where you're going.
Monitor tab allows for live playout monitoring, viewing, and overriding in the event of issues.
1. Meetings throughout the design process with Product and Engineering teams, to determine functionality, roadblocks, engineering requirements, and any updates to other tools that might be necessary.
2. Prototype progress was mirrored in staging to be able to test new tools and features with dummy channels and media.
3. Thorough developer notes in Figma, with meetings to demonstrate interactions
4. Met with sales and customer support to take them through the new tools and their benefits
5. QA process with internal team members and select clients to iron out any bugs before launch.
Major launch update to Studio software for existing users, followed by marketing push and website update. It quickly became a killer app that distinguished Frequency from competitors Amagi and WURL.
Our sales and customer success teams also worked together to educate existing clients on the new features and how to use them. Even though we intended for the dashboard to enable self-service, we reassured clients that customer support would still be available if needed.
Analytics and post-launch feedback indicated that we completed our project goals:
1. Analytics saw a huge jump (40%) in Frequency Studio logins immediately after launch, leveling out to a 24% monthly average increase over time.
2. Customer support calls dropped 35% on a monthly average compared to pre-launch, indicating that our focus on self-service for the most common issues was paying off
3. Post-launch interviews indicated that clients spent less resources monitoring stream playout, and opted to do more monitoring in Studio
4. Amagi, our closest competitor, released a practical clone of the dashboard two months later, indicating that their customers had seen ours and were asking for it
A few months later, it was the centerpiece of "Frequency Studio v5," a major visual and functional upgrade to the Studio software. We mimicked the design of the monitoring dashboard for the INGEST tool, a more robust media upload, organization, and channel building tool.
For launch week, 40% increase in Studio logins compared to previous week
Leveled out at 24% monthly average increase in logins
Black screen issues fixed by clients 77% of the time
Black screen issues reduced 58% due to Scheduling alerts
Increase in time spent using Studio post-setup of 130% (mostly on dashboard and monitoring in CONNECT)
Amagi copied CONNECT tool due to client demand, and WURL changed focus to ad sales (later partnering with Frequency)
Frequency made its reputation on user-friendliness, especially with live events, becoming the fastest growing FAST platform
Easier to monitor all streams in one place
Love being able to fix issues, and avoid issues
Massive value add