Clipsmash

Video editing for the non-video editor

Clipsmash is a downloadable video editing app designed for users with little to no editing experience.

Over the past five years, I’ve collaborated with the team at Rivet to design and develop the product from the ground up. My contributions spanned brand identity, design system development, marketing materials, and light QA—helping shape a cohesive and user-friendly experience.

Internal Product

Clipsmash

Role

Lead UI Designer, UX & Product Team

Duration

2020 – Present

Visit Clipsmash.io

Skills Used

Collaborative Ideation

Workflow Creation

Design System Strategic Development

Developer Collaboration & Support

UX Strategy & Problem Solving

Figma Design Systems & Variables

Adobe Illustrator

Adobe Illustrator

Adobe Photoshop

Adobe Photoshop

Adobe After Effects

Adobe After Effects

Sketch

Sketch

Wordpress

The Design Challenge

Creating a SaaS product from the ground up—branding, designing, developing, testing, and marketing—took persistence, creativity, and teamwork. Along the way, we made several pivots, refining our approach, design solutions, and MVP features to bring the product to life. Some of my key contributions included:

Established the Clipsmash brand identity from the ground up—including brand values, tone, logomark development, and visual design elements.

Collaborative Ideation

Design System Strategic Development

Established the Clipsmash brand identity from the ground up—including brand values, tone, logomark development, and visual design elements.

Collaborative Ideation

Design System Strategic Development

Designed the complete UI architecture and workflows for the application, from early concepts to final execution.

Collaborative Ideation

Workflow Creation

Design System Strategic Development

Developer Collaboration & Support

Designed the complete UI architecture and workflows for the application, from early concepts to final execution.

Collaborative Ideation

Workflow Creation

Design System Strategic Development

Developer Collaboration & Support

I led the design and management of the Clipsmash main website, as well as single-page marketing sites, keeping the brand experience consistent and engaging across all platforms.

Collaborative Ideation

Design System Strategic Development

I led the design and management of the Clipsmash main website, as well as single-page marketing sites, keeping the brand experience consistent and engaging across all platforms.

Collaborative Ideation

Design System Strategic Development

Main Takeaways

Working on a startup demanded dedication, close collaboration, and an agile mindset. Throughout this experience, I gained several key insights:

Building a product from scratch demands perseverance, focus, and collaboration. This project reinforced that effective teamwork is critical to creating meaningful, successful solutions.

Effective communication is critical for smooth design-to-developer handoff. Throughout the process, collaborating closely and asking clarifying questions ensured alignment, improved efficiency, and led to stronger solutions.

Prioritizing core functionality leads to better user experiences. Instead of spreading efforts across too many features, refining a handful of key features creates a stronger, more usable product.

Brief Product Demo

Pause & Highlight and Slide Templates are the two newest features in Clipsmash. Check out this quick video demo to see them in action.

Establishing the Brand Identity

At the start of the project, we held an intensive session to define the Clipsmash brand—establishing its visual identity, core values, and guidelines for marketing assets and supporting materials.

Collaborative Ideation

Design System Strategic Development

Download the Brand Guide

Design Evolution, Workflow Creation and Developer Handover

Over five years of product evolution, creating detailed workflows and handoff documents was crucial to maintaining momentum and ensuring smooth collaboration.

Cross-Functional Collaboration

Workflow Creation

Design System Strategic Development

Design Evolution

Over the past five years, the application’s visual design and structure evolved as we tested with users and refined the concept. Here’s a brief before-and-after showcasing the product’s visual evolution:

Workflow Creation

Throughout the design process, I created hundreds of workflows to both refine the user experience and clearly communicate application functionality to developers.

Developer Handover

As the product evolved, it underwent several design iterations. I created detailed change files documenting updates, which facilitated a smooth handoff to developers—much of this work predating the adoption of Figma’s Dev Mode.

Clipsmash Website, Tutorials and Marketing Asset Creation

Throughout the project, I designed and maintained the Clipsmash website, creating all necessary design assets, recording and editing tutorial videos, and producing marketing one-pagers.

Collaborative Ideation

Cross-Functional Collaboration

Design System Strategic Development

Clipsmash Website

I designed the Clipsmash website using Elementor and WordPress to help prospective customers easily understand the app’s features and value. Visit Clipsmash.io

Tutorial Videos

As part of the website design, I produced a series of tutorial videos to help users quickly learn how to use Clipsmash. Watch the tutorial videos

Marketing One Pagers

We launched a marketing campaign aimed at helping high school athletes create standout highlight reels for college recruiting. Visit the live site

I am a product designer with a passion for turning ideas into meaningful products for real people.

I am a product designer with a passion for turning ideas into meaningful products for real people.

I am a product designer with a passion for turning ideas into meaningful products for real people.