The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
New website animations for a B2B SaaS startup. Client came to me pre-launch. Site was ready. But it felt flat. Like every other product page out there. (psst psst: AI-generated)
And so we worked on revamping key visuals across the site with motion. Hero, feature breakdowns, UI flows.
The site went from "another SaaS tool" to something that actually holds attention.
Static pages don't cut it anymore... not when your visitors are scrolling past a hundred of them a day. Motion captures attention. Motion makes it easier for your visitors to understand exactly how your product works. Motion separates you from the wave of AI-generated wesbites.
If your website feels flat, let's fix it. DM me.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
⛳️ 𝗦𝗸𝗶𝗹𝗹 𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁 𝗠𝗮𝘁𝗿𝗶𝘅 & 𝗥𝗼𝗮𝗱𝗺𝗮𝗽 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 𝗳𝗼𝗿 𝗗𝗲𝘀𝗶𝗴𝗻𝗲𝗿𝘀
Skill Assessment Matrix is a SaaS designed to help Product Designers and UI/UX Designers better understand their current level, identify their strongest skills, and build a personalized growth roadmap
The idea came from a problem I experienced early in my career:
"𝙃𝙤𝙬 𝙙𝙤 𝙄 𝙠𝙣𝙤𝙬 𝙞𝙛 𝙄'𝙢 𝙖 𝙅𝙪𝙣𝙞𝙤𝙧, 𝙈𝙞𝙙-𝙡𝙚𝙫𝙚𝙡, 𝙤𝙧 𝙎𝙚𝙣𝙞𝙤𝙧 𝙙𝙚𝙨𝙞𝙜𝙣𝙚𝙧?"
This first version is focused on the desktop experience and was designed as the foundation for a larger SaaS product
𝗣𝗥𝗢𝗕𝗟𝗘𝗠
Designers often struggle with:
✦ Understanding their current level
✦ Identifying their strongest skills
✦ Knowing what to improve next
✦ Creating a clear career growth plan
𝗦𝗢𝗟𝗨𝗧𝗜𝗢𝗡
Skill Assessment Matrix helps designers answer three simple questions:
✦ Where am I today?
✦ What are my strongest skills?
✦ What should I focus on next?
The product guides users through a complete career planning flow:
𝗦𝘁𝗲𝗽 𝟭 [Career Goals Setup] Users define their career goals and desired direction
𝗦𝘁𝗲𝗽 𝟮 [Self Assessment] Users evaluate their current skills across multiple competency areas
𝗦𝘁𝗲𝗽 𝟯 [Summary] The system generates a personalized overview highlighting strengths and growth opportunities.
𝗦𝘁𝗲𝗽 𝟰 [Roadmap Builder] Users receive a personalized roadmap and can further customize it by adding their own skills
𝗦𝘁𝗲𝗽 𝟱 [PDF Export] The final roadmap can be exported as a PDF and used as a practical career development plan.
⚡️This roadmap generation and export flow became one of the most valuable features of the project⚡️
𝗥𝗘𝗦𝗘𝗔𝗥𝗖𝗛 𝗙𝗢𝗨𝗡𝗗𝗔𝗧𝗜𝗢𝗡
This project is based on more than 5 years of research into Skill assessment frameworks. The primary foundation for this work was the Figma Community Skills Matrix documentation, supported by dozens of additional public frameworks
𝗪𝗛𝗔𝗧 𝗪𝗔𝗦 𝗧𝗘𝗦𝗧𝗘𝗗
✦ Figma AI Agent for generating new interfaces
✦ Figma Make for transforming designs into interactive product flows
✦ Combining a custom design system with generated product experiences
✦ Building complex multi-step user journeys inside Figma Make
✦ Creating SaaS-style product logic without traditional development workflows
𝗧𝗢𝗢𝗟𝗦 𝗨𝗦𝗘𝗗
Figma ✦ Figma AI Agent ✦ Figma Make ✦ MCP Servers
🔗 𝗣𝗥𝗢𝗝𝗘𝗖𝗧 𝗟𝗜𝗡𝗞: https://meta-poet-59855448.figma.site
🎥 Watch the video to see the full design process and how the project was built
🔗 𝗩𝗜𝗗𝗘𝗢: https://youtu.be/S3q38_kpTXo
𝗖𝗢𝗟𝗟𝗔𝗕𝗢𝗥𝗔𝗧𝗢𝗥𝗦:
Special thanks to @Illia Skliarov for contributing to the creative process, design discussions, design, brainstorming sessions, and product thinking throughout the project.
𝗦𝗨𝗣𝗣𝗢𝗥𝗧 (っ◔◡◔)っ
Please like, comment, share, or save this project to help more designers discover it ❤️
🔗 𝗦𝗢𝗖𝗜𝗔𝗟 𝗠𝗘𝗗𝗜𝗔 𝗣𝗢𝗦𝗧: https://www.instagram.com/reel/DZwXAvhoMHA/?igsh=MWpmZGRwYmx0Y2lwdA==
Love this
I built a virtual Ikebana experience. It's called Project: Ikebana. 🌸
It's the first time I've ever built something with gesture controls, worked with 3D assets, and vibecoded this much with Figma Make.
Try it here!
Ikebana is the traditional Japanese art of flower arranging. It literally translates to "giving life to flowers."
Project: Ikebana is my attempt to bring that idea into a digital space.
You can create floral arrangements in both 2D and 3D, using either hand gestures or traditional mouse controls.
The part I love most: the little moments of whimsy.
Sliding Japanese fusuma doors.
Tiny kaomojis q(≧▽≦q).
Petal-shaped gesture tracking markers.
This project started with a bunch of moodboarding into FigJam board, grew through 100+ make iterations, and somehow led me into learning 3D workflows, gesture interactions, databases, debugging, and a whole lot more.
I used Weave to create many of the visual assets and models, then brought everything together in Figma Make with Supabase powering the project's content library.
I love how tools like Weave and Make encourage you to focus on what something should feel like, not just how to build it.
If there's one thing I'd love people to take away from this project:
Try something new.
You might surprise yourself.
(≧∇≦)ﾉ
This is honestly so beautiful and elegant! I love the concept a lot and you have brought it to life so well :)
🫧📒 Digital Journal for Self-Reflection ✨
[ PROBLEM ]
In a busy world filled with work, responsibilities, and constant distractions, many people lose touch with their emotions, needs, and personal goals
While journaling can improve self-awareness and well-being, traditional journals are not always practical to use every day
[ SOLUTION ]
I created Digital Journal that makes self-reflection simple and accessible
The app helps users:
💎 Track mood and energy
💎 Reflect on daily experiences
💎 Practice gratitude
💎 Capture thoughts, memories, and dreams
💎 Build greater self-awareness over time
The goal was to combine the convenience of digital tools with the warmth of a scrapbook-style journal
[ TOOLS TESTED ]
During the Makeathon, I explored and tested:
✔️Claude + Figma MCP for generating initial wireframes
✔️Figma AI Agent for early concept exploration and wireframing
✔️Figma for core pages visual design
✔️Figma Make for building and testing the interactive prototype
Project Link: https://aroma-clover-93652527.figma.site
🎥 Watch the demo video to see the full design process, tools used, and how the project was built from idea to interactive prototype
Demo Video (the same as attached): https://drive.google.com/file/d/16Bvwa4M9g3-vPlygg6ljnqOPhMV69cvV/view?usp=sharing
If you enjoyed this project, I would appreciate your support ❤️
———
Wow, feel whisper of childhood. Amazing work.
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?