THE PRODUCT
Pencil Pro is a SaaS platform that uses generative AI to create marketing videos and images and to predict how well they'll perform.
The video editor is where ads get built. Users create videos and templates with basic animations, then automate them and send them straight to a brand's ad account. That's the part I worked on.
PROJECT OVERVIEW
Product: Pencil Pro, a SaaS AI marketing platform (video editor and review workflow)
My role:UX/UI design of Pencil’s video editor, as part of Brandtech’s red team. (Job title: GenAI Senior Motion Graphics Designer.)
Team: me, a senior designer, a copywriter and the team lead. We worked directly with Pencil’s two founders, their designer and, later, their product manager.
Duration: 2023 to 2024
Scope: Workflow analysis, stakeholder alignment, UX/UI for the editor, and a proposed role-based access and review pipeline
Users: Designers, managers and clients
Status: Pencil’s product manager told me my design was used as a base for the current video editor. I saw the simple/advanced timeline built into the platform while I was still at Brandtech. The final interface looked different, because Pencil’s front end couldn’t support everything I’d designed.
Tools: Figma + Prototype
Goal: Make the platform faster and clearer for designers, while giving managers and clients access at the right stage.
WHERE IT STARTED
My team was evaluating Pencil Pro for Brandtech+. As motion designers used to After Effects, we found the video editor hard to work in: a limited toolbar, missing features, and a clumsy flow where switching videos meant leaving the editor and navigating back in.
The starting point
The problem
Making one video in Pencil meant leaving the editor again and again. Missing an asset? Leave. Want to generate an image? Leave. Hit back by accident? You’re out. Ready to send it for review or download it? Leave again. Pencil is a web app, so there was no desktop software to fall back on, and every exit broke the flow.
The goal
Make it easier for motion designers and non-designers to build videos in Pencil, with everything in one place.
What I did
The red team tested Pencil’s video editor and I evaluated the experience. Then I redesigned it. I also presented Pencil’s capabilities to client stakeholders and taught 100+ people how to use it.
I reviewed the whole platform, with a focus on motion, and then began designing what the editor could be.
NEW LAYOUT
I started on paper: tools on the left, AI and animation panels on the right, a scene strip under the preview and a full timeline along the bottom. The final design kept that skeleton.
WHAT I FOUND
Pencil was positioned as a tool for everyone, but treating everyone the same was exactly what made it hard for designers. Open access wasn't a feature, it was the friction.
I reached this through interviews with 12 designers, managers and developers, a map of the existing workflow, and a review of how similar platforms handle roles and stages. It led directly to role-based access, a visual pipeline and role-specific zones.
Wireframe
VIDEO EDITOR
LAYOUT
I organised the editor into clear zones so users always know where to look. The main toolbar sits on the left, where users add things to the project, and the right-hand side is for editing what's already there. It follows the structure designers know from tools like After Effects, so experienced users feel at home and newcomers get a simple split: add on the left, adjust on the right.
VISUAL SYSTEM
Pencil's users move between Adobe software, project management tools and web apps, so I wanted type that feels familiar and stays out of the way.
Typefaces
Inter
Inter carries the interface: headings, body text and buttons. It's clean and stays legible at small sizes, which suits dense editing panels.
Nunito
Nunito is reserved for Pencil's AI assistant. Its rounder shapes give the chat a friendly voice, and using a different typeface means users can tell at a glance when the assistant is speaking and when they're using a tool.
5E17EB
EB8517
76EB00
307EF3
406B47
4F406B
EBBA2F
F66AE3
A317EB
FFFFFF
D9D9D9
818181
000000
Colours
Colour is a signal, not decoration. The interface is neutral (white, greys, black) so colour only appears where something needs attention. In a dense editing tool, that keeps the work itself at the centre and lets users find what matters quickly. Purple is reserved for AI so users always know when the platform is generating, not just editing.
Main use of colours
aI
APPROVE
DOWNLOAD
IMPORT
EXPORT
FUNCTION
EFFECT
Iconography
I kept the icons simple and consistent: one stroke weight, one visual style, and no decoration. They need to be recognised in a glance, because users are watching a timeline, not the toolbar. Where a symbol is already standard in editing software (cut, trim, layers), I kept it familiar so designers don't have to relearn it. Where Pencil has its own functions, such as AI tools, I drew new icons in the same style.
SECONDARY LAYOUT
Left-hand panel
Main function is adding elements to the project
Right-hand panel
Secondary functions - editing elements inside the project
One timeline, two ways to use it
The editor had to serve two very different people: motion designers who expect the precision of After Effects, and marketers who have never touched a timeline. A single design would fail one of them, either too complex for beginners or too limited for experts.
So I designed one timeline with two modes. Simple shows only the essentials: e.g. clips, trim, basic animation presets. Advanced adds keyframes, layers, easing curves, etc. Users switch with X, and the choice is remembered. Beginners aren't overwhelmed, experts aren't held back, and nobody has to leave the editor to get what they need.
DASHBOARD
Added later in the project
Every time work in progress needed reviewing, someone built a PowerPoint to show it, about 1.5 hours per review. I designed a dashboard where managers and clients can browse everything in a project in one place: videos, statics, copy and generated images, in a visual grid.
They can filter by status (Approved, Favourites, Winners), see the prompt or caption behind each asset, comment, approve, download or share, without opening the project itself. That gives stakeholders somewhere to look when they want an update, and keeps them out of the designers' workspace until they need to be in it.
MAIN LAYOUT
-
Time saved: a target of roughly 35 minutes per asset, from removing the exit-and-return loop and the PowerPoint review decks
-
Fewer interruptions: designers finish projects without stakeholders opening them mid-work
-
Stakeholders included at the right stage: through the dashboard and client preview
Reception: Presented to Pencil's product designer, who said it informed their shipped version.
OUTCOME
Next
Johannesburg
Gauteng
South Africa
Melissa Cramer © 2026