From Zero to One
MontageCMS
Establishing the Design Framework for Growth
Platform: Mobile & Web App
Date: May 2023
The Challenge
“Where things stood when I joined”
When I began building MontageCMS, there was no product — just a shared vision: to help film schools and independent creators design, host, and stream their own media ecosystems.
Film educators were juggling multiple disconnected tools (Vimeo for hosting, Google Drive for submissions, YouTube for screening). Students had no unified place to showcase their films, get feedback, or build a portfolio.
Our mission was clear: create one centralized system where educators could manage content, students could upload and share, and audiences could experience films in a studio-quality interface.
Core Challenges:
-
No prior CMS architecture — everything had to be designed from scratch.
-
Need for enterprise-grade scalability, but startup-level speed.
-
Designing for multiple audiences (admins, students, and viewers).
-
Balancing flexibility (for creativity) with consistency (for maintainability).
Overview
Founding Product Designer of MontageCMS — a zero-to-one SaaS platform built to help film schools design and manage their own streaming networks. I led the vision, UX architecture, and design system that scaled the product from concept to enterprise adoption.
Skills
Project Management · Figma · Wireframing · Digital Strategy · Design Management · Mobile Design · Design Strategy · Product Management· Usability Testing, User Interviews, Design System
My Squad
-
Founding Designer (1)
-
Product Designers (4)
-
Product Managers (2)
-
Engineering (4)
-
Researchers (2)
Tools
Figma, Figma Prototype, FigJam, MIRO, Height, Notion
-
Built design function from scratch (first design hire → scaled to 3)
-
Created frameworks outlining design phases.
-
Created decision matrix frameworks
My Role
Founding Product Designer
As the Founding Product Designer, I defined the product vision, design language, and end-to-end experience for MontageCMS.
My role spanned strategy, systems, and execution:
-
Established UX strategy and product roadmap with founders and engineers.
-
Designed the first version of the platform — from information architecture to high-fidelity interfaces.
-
Built the design system, interaction model, and component library from the ground up.
-
Set up the workflows, rituals, and documentation to scale design operations as the team grew.
Research
Discovery & Insights
We interviewed film professors, students, and festival organizers to identify friction points in how creative work is shared, reviewed, and published.
Key Insights:
-
Educators needed submission and grading tools with clear media management.
-
Students wanted creative control — the ability to customize pages and publish work like Netflix or Criterion.
-
Viewers cared about easy discovery, community feedback, and high-quality playback.
From these insights, we defined our four foundational product pillars:
-
Uploading System – Simplified, reliable, and fast video submissions.
-
Sports Content
-
Short and Long Form Content
-
Podcast Content
-
-
Onboarding System – Branded templates for institutions to set up their own network.
-
Grading & Review System – Timestamped grading tools for feedback and rubric tracking.
-
Design System (Montage Design Language) – A reusable, modular design framework enabling future scalability.
Whiteboarding session with mural
Design Strategy
Designing and Building for Scale
I applied atomic design principles (Brad Frost) to ensure every component could scale — from buttons to full-page templates.
Core Objectives:
-
Clarity: Simple enough for non-technical educators.
-
Customization: Allow schools to white-label their streaming portals.
-
Consistency: Centralize UI and accessibility standards.
-
Scalability: Build the foundation for enterprise adoption.
Design Artifacts:
-
Modular card system for films, classes, and events.
-
Grid-based layout optimized for film posters and metadata.
-
Dark mode and adaptive themes for cinematic presentation.
-
Responsive UX for mobile, desktop, and smart TVs.
.jpg)
New stream design - coming soon!
New podcast dashboard design - coming soon!
12-Column Adaptive Grid System
In establishing the visual foundation for the MontageCMS platform, my team identified the need for a strong grid system. We observed that the initial designs lacked consistent vertical alignment and uniform padding between content modules. To address this, we created an initial grid framework that worked within the constraints of the platform's content. While not perfect, this grid provided a significant improvement in visual coherence and structure.
The MontageCMS design system uses a 12-column modular grid that adapts to various layouts, including admin dashboards, content editors, and media players. This approach allows designers and developers to build flexible page structures while maintaining spatial rhythm, predictable alignment, and visual harmony across devices.
Design Principles:
-
Standardized gutters and margins for consistent spacing.
-
Modular responsiveness for desktop, tablet, and mobile.
-
Grid overlays built directly into Figma and front-end documentation for developer handoff
12 Column Design Grid
Compositional Hierarchy Through Panels and Regions
The layout system is broken down into three main sections:
-
Navigation (Left Rail) – Anchors user orientation and provides contextual access.
-
Main Content Panel – Houses core functionality such as video management, grading, or project workflows.
-
Sequence Panels (Right Side) – Dedicated contextual panels for supplemental actions like feedback, metadata, or AI-assist features.
Goal:
Enable teams to build consistent yet flexible templates for new product features without having to reinvent layout patterns.
Component Frameworks
In my design work, I use grid systems to create a consistent visual structure across interfaces. By aligning elements and ensuring visual balance, grids help me achieve a polished, cohesive look. They also improve usability by maintaining uniform spacing and padding, which enhances clarity and legibility for users—a key priority in every project I take on.
Using grids allows me to streamline content organization, establishing clear hierarchies that guide users’ focus effortlessly. I ensure that my designs remain adaptable to various screen sizes, leveraging grids to promote responsiveness and preserve design integrity across devices.
Grids also play a crucial role in collaboration. They provide a shared framework that simplifies communication and implementation between designers and developers, ensuring that the final product aligns with the original vision.
Design Components + Icons + Illustrations
Building a Modular System to Scale Functionality, Consistency, and Brand Expression
As Head of Design, I led the creation of MontageCMS’s modular design framework — a system built to scale efficiently while maintaining visual and experiential consistency across the platform.
-
Modular Architecture
-
We approached the product by dividing its ecosystem into functional modules — onboarding, upload, screening, and progress tracking — each with its own UX pattern and reusable components. This modular breakdown allowed us to evolve sections independently without destabilizing the larger system.
-
-
Component Library & Design Tokens
-
Each module was supported by a shared component library consisting of buttons, inputs, sliders, notifications, and tooltips. Using design tokens for typography, color, spacing, and interaction states, we ensured visual harmony and accessibility across multiple devices and contexts.
-
-
Systemized Collaboration
-
This structure created a unified language between design and engineering. Designers worked with a standardized framework, while developers accessed Figma-to-code parity. This reduced redundancies, improved velocity, and enabled faster iteration cycles.
-
-
Illustration & Iconography
-
We developed a custom icon and illustration set to express the creative energy of film schools and student storytellers. These elements balanced professional UI clarity with a sense of identity and storytelling — a nod to the creators using the platform.
-
-
Results
-
Accelerated design-to-dev handoff by 45% through consistent documentation and component reuse.
-
Simplified feature rollout, enabling teams to add new modules with minimal design debt.
-
Strengthened brand cohesion across CMS, student dashboards, and marketing experiences.
-
Tab Navigations
Interactive Buttons
I developed a modular approach to the platform’s UX and UI to ensure scalability, consistency, and efficiency. The strategy involved breaking down the platform's core functions into modules, each representing features like onboarding, upload, screening, and progress tracking. This structure allowed us to build and iterate on specific sections without affecting the entire system.
Each module was divided into reusable components, such as buttons, sliders, and tooltips, ensuring a consistent user experience. I maintained a design system with standardized typography, color schemes, and spacing, streamlining workflows and enhancing visual harmony.
This approach enabled a seamless handoff between designers and developers and reduced redundancies in the design process. It also allowed for efficient updates, making it easy to add new features without disrupting existing designs. This strategy was key to improving the user experience and contributing to Montage’s success.
Navigration Components
Interactive Buttons
Wireframing the System Architecture for Rapid Prototyping
Defining structure, hierarchy, and modular relationships before scaling the UI.
To accelerate iteration and cross-team alignment, I introduced a wireframing framework rooted in modular architecture. Each wireframe represented functional regions of the product — from the dashboard to the content upload flow — allowing us to validate structure and hierarchy before committing to high-fidelity design.
This stage focused on:
-
Information Architecture: Mapping content hierarchy and workflows for film school admins and students.
-
Interaction Flow: Defining how users navigate between key modules (Upload → Channel → Grading).
-
Component Logic: Identifying reusable patterns early to inform the design system later.
Impact:
-
Reduced iteration time during visual design by 35%.
-
Established the foundation for component-based design in MontageCMS’s scalable system.
-
Unified product, design, and engineering teams around early experience blueprints.
Stream
Studio
Stream
Studio
Visual Design
The Visual Approach
Designing a Modular and White-Labeled Streaming Experience
I designed and implemented the white-labeled video experience for MontageCMS, blending a Netflix-style interface with a flexible CMS backend. The goal was to help film schools and creators organize, customize, and brand their own streaming networks without relying on engineering support.
The design emphasized scalability, accessibility, and brand personalization — supporting multiple themes, color systems, and content layouts while maintaining a unified design language. I built visual guidelines, responsive layouts, and interaction patterns that could adapt across web, tablet, and connected TV experiences.
MontageCMS Streaming Example
Our biggest challenge was meeting the needs of multiple stakeholders—our content team, brand team, and, most importantly, the end user. To address this, we took a ground-up approach, redesigning the studio CMS backend using a modular library of components. This system allowed us to work efficiently, adapt to changing needs, and experiment with reorganizing or hiding specific modules. The result was a highly customizable CMS that empowered users to tailor the platform to their preferences with ease.
MontageCMS Studio Example
Visual Design: Podcast New Visuals - Coming Soon
Montage Podcast Design is a creative and easy-to-use tab section design for the overall Montage media portfolio. I made it to bring stories to life with great visuals and sound. I combined modern design with simple navigation so creators and listeners can easily connect with each episode.
.jpg)
Visual Design: Stream Interface
Discover how Montage CMS empowers you to stream on-demand videos, from eLearning to entertainment, using a Netflix-Design Interface.
Information Architecture
System Architecture & Experience Mapping
I collaborated with engineering to map the content-to-distribution pipeline, ensuring creators could publish and share instantly.
Workflow Visualization:
Student Upload → Faculty Review → CMS Approval → Channel Publish → Viewer Playback
Each stage triggered automation for transcoding, notifications, and analytics — all visualized in the CMS dashboard.
.jpg)
Results
The successful launch of the MontageCMS platform from the ground up resulted in significant achievements, including the acquisition of key B2B customers. The visual designs and UX/UI strategy I developed for this project are featured in my portfolio to showcase the impact of design on driving business growth and product adoption.
-
🎥 Launched MVP in 9 months, onboarding 5+ film programs in pilot phase.
-
📈 Increased upload efficiency by 70% vs. legacy tools.
-
🔁 Reduced faculty grading time by 45%.
-
🌎 Created a scalable framework now used as the foundation for creative education streaming.