Embedded Files
PROBLEM STATEMENT
Mux is a video infrastructure platform that gives developers simple yet powerful APIs to build streaming video into their products. The Mux dashboard (web interface) was built to serve an initial onboarding use case, but as the complexity of the product grew, the dashboard didn't keep up.
ROLE
As the lead Product Designer for Mux Video, I lead research and design for the overall Mux Video product while continuing to support incremental changes as needed.
The user journey map produced from discovery research informed the updated designs for the core video pages in the dashboard.
USER RESEARCH
I interviewed developers who integrated Mux Video at 14 companies representing a variety of Mux Video products, archetypes, and company sizes. As a team, we tagged 500+ data points from the interviews, and categorized the users' activities, behaviors and feelings into key insights.
Affinity map of user interview data in Dovetail.
USER JOURNEY MAP
The Mux Video user journey describes the developer experience of getting started to getting in production with the live streaming and on-demand video APIs. Each phase shows the goals, steps, pain points the user encounters.
User journey map across all Mux Video interfaces, from docs to APIs to the dashboard.
INFORMATION ARCHITECTURE
The first design task was to update the core page for interacting with an on-demand video asset. The original version was trying to do everything for the user in one place, which made it difficult to find what you needed in any given phase.
All the information on the page was reorganized into a tabbed structure that matched the user's journey with Mux.
BEFORE: all workflows spread across one page
AFTER: workflows organized into tab structure
DESIGN: METRICS
With a new page structure, I was also able to redesign key elements based on the video user journey research.
Key Insight: Mux Video users are most interested in Mux Data engagement metrics.
I redesigned the metrics section to highlight historical metrics since many users's assets would not typically have data to show for "Current Views".
Redesigned metrics section with increased prominence and actionable data.
DESIGN: IMAGE API FEATURE DISCOVERY
The Build phase of the user journey map revealed another key insight that helped prioritize an effort to redesign the area of the dashboard that developers use most when building their integration with Mux.
Key Insight: Once developers start building, they come back to the dashboard to verify API call results work as expected, and troubleshoot any issues using the API activity. While they’re in the dashboard, they also discover features like thumbnails and GIFs.
Since the dashboard was successful at getting people to adopt features that were already shown there, we wanted to add more API features to the Build tab of the asset page so that developers would get more value from the product before they finished their integration.
I started this process on paper and then moved to Figma to start working on layout and using components from our design system.
SKETCH
DRAFT
FINAL
EXPLORING PAGE SECTIONS
The "Get previews of your video" section surfaces functionality in the Mux image API. The pill component is used to toggle optional parameters on and off for a quick discoverability. Ultimately the raw URL is exposed with helpful syntax highlighting for the developer to copy and paste in their own app, keeping the focus on the developer workflow.
Image API functionality shown with syntax highlighting and pill selectors to explore options.
DESIGN: VIDEO API FEATURE DISCOVERY
In a subsequent phase, I was able to include more robust and even more high value API functionality: adding watermarks, creating video clips and adding subtitles. For these features, I re-used an existing pattern in our product to send an API request and see its response in full screen modal.
Full screen modal to edit and send an API request in the Mux dashboard.
DELIVERY
This project was designed and built in multiple phases, delivering value to customers every 2-4 weeks over a quarter. As the engineering team was building one phase, I was reviewing PRs while responding to feedback and questions on the next phase of work that was in design.
These short cycles helped us to work closely as a team, and move fast.
Google Sites
Report abuse