Agent ecosystem designed—then
redesigned.
Creatify
Rethinking how users discover and navigate Creatify’s AI Agent—redesigning Skills, structuring complex AI workflows, and exploring a more discoverable homepage experience.
Get the highlights.
33 conversations with real Creatify
users.
“I want to know how many credits this will use before I generate.”
“A tutorial would be really helpful.”
“I wasn’t sure what Agent did.”
“It looks cool—there’s just a lot going on at once.”
“The results look so human compared to other tools.”
“I wish I had more control over the final output.”
Chat, meet structure.
Designed it. Coded it. Shipped it.
38% more Agent Skill sessions post-launch.
[01] Overview
Designing discoverability
As Creatify’s sole product design intern, I redesigned how users discover and use Agent—across Skills, in-chat workflows, navigation, and its homepage.
I also stepped into design engineering, moving from Figma into production code to implement, open PRs, and ship live.
Product Design Intern
May – Aug 2026
Figma
VS Code, GitHub
Posthog
Notion
The problem
Agent could do a lot.
Users just couldn’t see it.
As Agent grew more capable, its best features got harder to find and understand.
- Skills hid behind unfamiliar shortcuts
- Complex tasks started from an empty prompt box
- Each product area looked different (Agent vs Home vs Ad Flow)
Where Agent started
Before I redesigned it, Agent went through two versions. V1 had a strong visual identity but hid its best features. The V2 that replaced it was cleaner but more generic, and its features stayed just as hidden.
Before
Colorful visual identity
Micro-animations
Features hidden
Didn’t match other pages
Before
Clean & sleek
Features hidden
Generic
Lack of animations
Deep dive into V2
The big question:
How might we make Agent’s capabilities easier to understand—and the experience unmistakably Creatify?
[02] Research
Users stalled before Agent showed its value
Was the friction I saw in Agent a one-off, or a pattern across all of Creatify? I looked at it from four angles: analytics, user calls, competitor audits, and product audits.
1 in 3new sign-ups ever rendered a video
The TL;DR:
Where
Users stalled at the same moments: choosing a workflow, reaching a first generation, and understanding credit costs. About half of users who started an ad never rendered it.
Why
In 33 calls, users said capabilities were hard to discover and credits made them cautious. They also valued Creatify’s color and personality.
How
Creatify hid Skills behind an unlabeled + menu and a “/” command, while competitors like Higgsfield made similar features browsable.
Thumb through the files.
PostHog analytics
PostHog showed users losing momentum at the same few moments. Many struggled to choose the right workflow and to reach their first generation. Later, credit costs were hard to understand, and rendering, downloading and hitting the paywall all caused more drop-off.
About half of users who start an ad render it. Under a third download it.
Started an ad100%
Confirmed product87%
Chose a script85%
Viewed previews81%
Rendered video54%
Downloaded32%
81% → 54%the biggest drop: from viewing previews to rendering
7.6%subscribe after seeing the paywall
1%of Ad Flow projects start from a template
User Calls
The 33 users I talked to (founders, marketers, consultants, creators, and users of Creatify’s AI competitors) helped explain why the data looked the way it did.
3 major themes stood out:
- 01Capabilities were hard to discoverAgent could do sophisticated tasks, but the interface expected users to already know what to ask for.
- 02Generative actions required confidenceGenerations cost credits, so users wanted clearer cost, duration and previews before committing.
- 03Creatify’s visual identity was an assetColor and personality were worth refining, not stripping away for a generic AI look.
Competitor audit
I studied competitors and similar products such as Higgsfield, Flora, HeyGen, InVideo, and Arcads.
Higgsfield made capabilities browsable. Creatify hid them in a menu.
For Ad Flow, I also ran a deeper comparison with Arcads: cognitive load, node readability, predictability, templates and navigation.
Product audit
Skills lived behind an unlabeled + menu or a / command. Feature names appeared with little context. Agent often opened on an empty prompt box, and different product areas used inconsistent visual and interaction patterns.
The opportunity:
Make Creatify’s capabilities visible before users have to know to look for them.
03
Designing
(and redesigning)
Skills.
[03] Agent Skills
From hidden commands to discoverable capabilities
Skills are ready-made instructions that improve the quality of Agent’s output. However, users first had to know Skills existed before they could use them. Skills could only reach them by typing “/” or opening an unlabeled + menu. In fact, only about 1.3% of Agent sessions used a Skill.
1.3%of Agent sessions used a Skill
Brand new chip, brand new dropdown
Because Skills function like Agent’s other prompt chips, I gave them a dedicated chip and dropdown. Selecting a Skill loads it into the chat bar, with starred Skills listed first.
I also redesigned the hover card to prioritize each Skill’s ideal use cases and style, alongside a preview of how it appears loaded in chat.
Before
After
A gallery to showcase Skills’ capabilities
Skills generate visual ads, but hover cards only had room for a name and a line of text. Since every generation costs credits, users wanted to see what a Skill makes before trying it. So I designed Creatify’s first Skills gallery, where every Skill leads with its output.
Iteration 1 · Skills gallery
01Category chipsFilter Skills by ad type: UGC, video ads, image ads and more.
02Hot picksThe most-used Skills, front and center.
03StarringSave any Skill to come back to later.
04Explore moreA browsable grid of every Skill; any card opens its detail page.
Iteration 1 · Skill detail page
01Example outputsReal results to judge a Skill by before spending credits.
02Best-for & style tagsExplain at a glance when to use the Skill.
03Pre-filled composerThe Skill’s command is ready to go, so a chat starts in one click.
04Full SKILL.mdThe exact instructions, for anyone who wants the details.
Impact
Gallery saw steady use
~39
visits a day to gallery
71
Agent sessions started from a detail page
Looking back
New Skills were buried, and every card looked the same
After later inspection, I realized that the design of the gallery cards and inefficient Skill detail pages limited how easily users could browse.
Post-launch data and a review of my own design revealed three issues:
01
Low visibility for new Skills
The top 10 Skills accounted for 58% of all uses; 71% were used twice or less.
02
Little differentiation between cards
Identical thumbnails and dense descriptions made the grid hard to scan.
03
Inefficient detail pages
Excessive length and irrelevant details, such as version numbers.
This raised a broader question:
Did users need to leave the gallery at all?
Redesigning the gallery
01Eye-catching heroSimultaneously explains and demonstrates Skills within a mock chat bar.
02Three distinct sectionsAdded “New Arrivals” between “Hot Picks” and “Explore More”—surfaces recently added skills.
03Color-coded cardsColorful cards now serve as visual landmarks, with details revealed on hover.
04Persistent searchSearch bar and category filter remain accessible while scrolling.
Modals made for easy browsing
I replaced detail pages with a modal that opened over the gallery, streamlining the browsing experience. It contained all the information as the previous Skill detail page, but reduced scrolling and allowed the user to close it easily.
Example outputs and the chat bar remain fixed, allowing users to compare Skills without constantly losing their place.
Evolution of the Skill Card
Designed, developed, deployed
I built this iteration’s front end myself. With guidance from Creatify’s engineers, I moved from Figma into the codebase, using VS Code and Claude to code the interface and ship it through GitHub pull requests. Working in code also let me design motion Figma couldn’t prototype, from the hero’s floating cards to the subtle movement of each card on hover.
Impact
Skill sessions rose 38% the week after launch
38%
increase in Skill sessions in the week following launch
16%
increase in the share of Agent sessions using a Skill (1.17% → 1.36%)
Based on matched seven-day periods. Observational data, not a controlled experiment.
The reception:
The CEO chose the Skills style for Agent
I presented the final design to the company in a live walkthrough. The CEO identified it as the polished, premium direction Creatify was pursuing and asked me to apply the same visual language to Agent.
04
Revamping Agent.
Time to tackle the Agent page itself.
04 Agent · In-chat workflows
Setup cards replaced long back-and-forths
When a prompt was missing details, Agent either guessed, wasting credits on off-target ads, or asked follow-up questions in a long block of text that users had to read, decode and answer by typing. I designed in-chat setup cards that ask one question at a time and take a click to answer.
I conceptualized 12 unique scenarios that would involve set-up cards, including interruption states.
Learning from other AI tools
I studied how Claude, Flora, Higgsfield, TapNow and Magnific ask questions in chat. Most offered a single list of options with a way to skip or write something else. Few handled what video ads need, like choosing a voice or uploading a logo, so I designed a card for each kind of answer.
Six ways to answer
Every card shares one frame: a step count with arrows to move between questions, a field to type your own direction, Skip setup, and Continue. Inside it, the answer takes the shape the question needs.
Always a way out
Users can answer every question, skip ahead, or close the card at any point. Skipped questions aren’t lost: Agent fills them in with its best choice.
Complete setup
Fill it in yourself for maximum control.
Skip setup
Let Agent infer the remaining decisions and generate.
Exit with ×
Cancel the workflow entirely.
A summary to close the loop
Once setup is done, Agent lists every detail it collected in the chat, marking which answers came from the user and which it chose, so there’s a clear record before anything generates.
Bringing in Skills
Lastly, I recognized that the setup cards were also a chance to make Skills proactive.
When a prompt matches one, Agent recommends the Skill in the conversation, since Skills produce better results than an open-ended prompt.
Conversation when flexibility matters.
Interface when precision matters.
04 — Design · Look & feel
Making Agent unmistakably Creatify
Structure fixed how Agent worked, but it still didn’t feel like Creatify. I redesigned its look and feel around two things users and leadership already liked: the original Agent’s aurora, and the Skills page.
Untangling Agent’s two sidebars
Agent had two layers of navigation: Creatify’s main rail and Agent’s own chat sidebar. I worked on both, months apart.
Pass 1 · Main rail
After auditing how Figma, Higgsfield, HeyGen and Claude handle layered navigation, I proposed a contextual rail that keeps global navigation reachable while giving Agent priority.
An Agent icon to match the rest
While rethinking the sidebar, one detail stood out: Agent’s icon. Its intricate, dotted style stood apart from the simple line icons around it. It was a stylized “C” for Creatify, but Agent is one tool within Creatify, not the brand as a whole, and it was still building its own reputation. Agent needed an icon of its own.
With Abed, our lead visual designer, I explored ideas through rapid sticky-note sketching. We grouped the sketches into five themes, then voted our way down to a handful of finalists.
The team chose my concept: a chat bubble whose ellipsis doubles as a pair of eyes, reflecting Agent’s conversational nature, with an AI sparkle for generation, a symbol already used across Creatify’s icons.
04 — Design · Visual direction
Showing Agent’s range before asking for credits
Agent’s homepage is the first screen most users see.
The existing homepage centered on a composer and prompt suggestions. It worked, but it still asked users to understand Agent before Agent had shown much of its range. Not only that, but trust Agent with their credits.
Direction A
Refining the existing model
Kept the familiar chat-first structure and improved hierarchy and personality:
- Introductory motion
- Refined navigation and chat management
- Richer hover interactions
- A more controlled version of Creatify’s gradient language
Direction B
Making capabilities visible
Questioned whether an empty prompt box should be the main introduction to Agent. Instead of asking users to invent a prompt, Agent shows strong outputs by category, so users can start from inspiration.
AllSkillsVideo AdsImage AdsCompetitor Research
The trade-off
Ship polish now, test discovery next
Direction A was familiar, low-risk and quick to ship, but new users would still face an empty prompt. Direction B answered the question users kept asking on calls (“can it handle my product?”), but needed example content and backend work. My recommendation: ship A’s polish now, and test B with new users. Discovery was the core problem in our research, but B’s cost made it a bet worth validating first.
The reception:
Discovery should happen before prompting, not only after it.
I presented the coded prototype to the CEO. He wanted to bring the new visual style into production right away, and liked the reasoning behind Direction B, though as a conceptual prototype it would need testing first.
Creatify has significantly evolved the design since, as fast-moving teams do.
05 — Reflection
What I’m taking with me
01
Discoverability is part of product capability
A powerful feature has limited value if users can’t find it or understand why they should use it.
02
AI interfaces don’t have to be only chat
Cards, galleries, selectors, previews, and forms can make AI systems more understandable without sacrificing conversational flexibility.
03
Analytics belongs inside the design loop
I started using analytics to diagnose problems. By the end, I saw instrumentation as part of the product, planned alongside the interface so future iterations rest on real behavior.
04
Designing in code
Learning to ship my own designs changed how I work: I could test ideas at full fidelity, especially motion, and hand off less. It also showed me how much good engineering mentorship speeds up that leap.
Closing
Creatify already had powerful AI capabilities. My work focused on making them easier to discover, understand, and use.
Fin.