Built with Framer
Vanos.ai
Ans Ali
Verified
Designing and developing a digital presence for a Silicon Valley-based agentic AI startup
Vanos.ai is a Silicon Valley-based AI startup building an agentic execution platform designed to move beyond traditional voice assistants.
The company’s product direction is built around two connected systems: Voice-to-Voice and Voice-to-Action.
Voice-to-Voice enables natural, real-time conversations between people and AI. Voice-to-Action extends those conversations into real execution by allowing AI agents to interact with tools, systems and workflows.
This distinction was central to the project.
Vanos was not positioning itself as another conversational AI product, call automation platform or voice interface. The company was building toward a broader system in which AI could understand intent, reason across context and complete actions across connected environments.
The website therefore needed to communicate both the product available today and the much larger technical direction behind it.
I worked across the website strategy, information architecture, visual direction, UX/UI design in Figma and responsive development in Framer.
Project overview
Client
Vanos.ai
Location
Silicon Valley, California
Industry
Agentic AI, voice technology and enterprise automation
Services
Website strategy, information architecture, copy direction, UX/UI design, Figma design, Framer development, motion design, responsive optimization and on-page SEO
Platform
Framer
Design tool
Figma
Project type
Marketing website design and development
The context
Silicon Valley is one of the most competitive environments for artificial intelligence companies.
Startups are not only competing for customers. They are also competing for the attention of investors, researchers, engineers, partners and potential enterprise clients.
For Vanos, the website had to do more than present a polished product.
It needed to establish the company as a serious technical organization with a credible long-term vision.
That meant avoiding the visual and messaging patterns commonly associated with early-stage AI websites.
The site could not rely on:
Generic claims about transforming the future
Decorative voice waveforms
Glowing gradients
Robot imagery
Floating dashboards
Vague references to intelligence
Overstated technical capabilities
Feature lists without a clear product narrative
The website needed to feel grounded, precise and ambitious.
It also needed to reflect the expectations associated with a Silicon Valley-based AI startup: strong product thinking, clear market positioning, technical credibility and a visual identity capable of standing beside mature technology companies.
The challenge
Vanos was working across an emerging category that many visitors would not immediately understand.
Most people were already familiar with voice assistants and conversational AI. Fewer understood how a voice interface could become part of a larger agentic execution system.
The first challenge was therefore conceptual.
The website had to explain that Vanos was not only helping users speak with AI. It was building systems that could eventually act on those conversations.
The second challenge was positioning.
If the website focused too heavily on Voice-to-Voice, Vanos risked being perceived as another voice AI startup.
If it focused only on the long-term Voice-to-Action vision, the company risked sounding abstract or overly speculative.
The final website needed to balance both:
A product that could be experienced today
A broader platform direction that showed where the company was going
The third challenge was visual.
The website needed enough personality to feel memorable, but it could not become overly cinematic or decorative. Every visual decision had to support the company’s technical and enterprise positioning.
Project goals
The website was designed around several core objectives.
Clarify the category
Visitors needed to understand how Vanos differed from conventional voice assistants, chatbot products and call automation tools.
Present the current product
Voice-to-Voice needed to feel real, accessible and ready to experience rather than buried beneath future-facing language.
Introduce the long-term platform
Voice-to-Action needed to be presented as a natural progression from conversation into execution.
Build technical credibility
The design and copy needed to communicate precision, seriousness and research depth.
Support multiple audiences
The website had to work for enterprise buyers, investors, engineers, researchers, partners and future team members.
Create a scalable foundation
The system needed to support future product pages, research releases, use cases, enterprise content and hiring pages.
Phase 1: Strategy and product positioning
Understanding the product direction
Before moving into visual design, I focused on understanding how Vanos wanted to be perceived.
The company was building around a simple but important progression:
Voice becomes understanding.
Understanding becomes intent.
Intent becomes action.
That progression became the foundation of the website narrative.
Instead of structuring the website around isolated product features, I structured it around the movement from conversation to execution.
This made it easier to explain the relationship between Voice-to-Voice and Voice-to-Action without presenting them as two disconnected products.
Defining the audience
The website had to communicate with several audiences at once.
Enterprise buyers
Enterprise visitors needed to understand the commercial relevance of the platform, including how it could connect conversations with internal systems and workflows.
Investors
Investors needed to see that Vanos was addressing a larger category than voice interaction alone.
Technical talent
Engineers and researchers needed to feel that the company was working on a meaningful technical problem rather than packaging existing AI models behind a new interface.
Partners
Potential partners needed to understand where Vanos could fit into a wider technology or enterprise ecosystem.
Product users
Visitors exploring the live product needed a direct path to experience Voice-to-Voice without reading the entire website.
The content hierarchy was designed so each audience could enter at a high level and then move deeper into the areas most relevant to them.
Developing the website narrative
The page was designed to answer a sequence of questions:
What is Vanos?
What does the company offer today?
How is it different from a traditional voice assistant?
What is Voice-to-Action?
How do the two systems connect?
Why does the platform matter for enterprise teams?
How does Vanos approach safety, reliability and execution?
What should the visitor do next?
This structure helped simplify a technically complex product without oversimplifying the company’s ambition.
Positioning Vanos beyond voice AI
One of the most important strategic decisions was to avoid leading with the phrase “voice AI company.”
That description was too narrow.
Voice was an important interface, but it was not the boundary of the product.
The website instead positioned Vanos as an agentic execution company building systems that could move from interaction into action.
Voice-to-Voice was presented as the entry point.
Voice-to-Action represented the next layer.
This framing made the company’s product roadmap easier to understand and gave the website a stronger long-term position.
Phase 2: UX and content architecture
Structuring the homepage
The homepage was organized as a progressive product story.
Hero section
The opening established Vanos as a Silicon Valley-based agentic AI startup and introduced the wider product direction.
The goal was to make the company’s ambition clear before introducing individual capabilities.
Product introduction
The next section explained the relationship between Voice-to-Voice and Voice-to-Action.
Rather than presenting two feature cards without context, the section showed how conversation could become a trigger for execution.
Voice-to-Voice
This section focused on what users could experience today: natural, real-time AI conversations designed to feel responsive and context-aware.
Voice-to-Action
This section introduced the broader execution layer, where agents could interact with tools, complete tasks and move workflows forward.
System explanation
A supporting section visualized the flow from user input to understanding, intent and action.
Enterprise relevance
The website then connected the product to practical enterprise use cases and operational environments.
Safety and control
Because action-based AI introduces greater responsibility, the site included space to discuss control, oversight, permissions and reliability.
Research and company direction
The closing sections helped position Vanos as a long-term technical company rather than a single-feature startup.
Calls to action
Different calls to action were created for product exploration, enterprise conversations and company interest.
Writing for clarity
The copy direction avoided inflated language.
Instead of using phrases such as “revolutionary intelligence” or “the future of AI,” the content focused on what the system was designed to do.
Headlines were concise.
Supporting copy explained the concept in plain language.
Technical ideas were introduced gradually rather than placed into a single dense section.
The writing aimed to make Vanos understandable without making the company feel simplistic.
Balancing present capability and future ambition
This was one of the most sensitive parts of the project.
The website needed to show the company’s direction without presenting future functionality as already complete.
Voice-to-Voice was communicated as the live and immediate product layer.
Voice-to-Action was framed as the larger system direction.
This created a credible distinction between what visitors could experience and what the company was building toward.
That balance was important for maintaining trust with enterprise visitors and technical audiences.
Phase 3: Visual design in Figma
Defining the visual direction
The design direction was influenced more by AI infrastructure companies, research labs and advanced technology organizations than conventional SaaS websites.
The visual system needed to feel:
Precise
Minimal
Technical
Calm
Confident
Research-led
Enterprise-ready
Long-lasting
The interface used restrained typography, controlled spacing and strong contrast.
Rather than relying on decorative graphics, the design used composition and motion to communicate intelligence and system behaviour.
Avoiding common AI design clichés
Many AI websites share the same visual language.
They often use purple gradients, particle fields, glowing objects, voice waveforms and futuristic dashboards.
These patterns can create an immediate AI association, but they can also make companies feel interchangeable.
For Vanos, I deliberately moved away from those conventions.
The design avoided:
Neon gradient backgrounds
Literal robot imagery
Generic microphone icons
Decorative waveform loops
Excessive glassmorphism
Floating UI mockups without context
Random data visualizations
Artificially complex diagrams
The visual identity instead relied on a disciplined system that made the product feel more credible.
Typography
Typography played a central role in the website.
The headline system was designed to feel bold but controlled.
Large type helped establish confidence, while restrained line lengths kept the content readable.
Supporting typography used a clear hierarchy for:
Product labels
Section introductions
Technical explanations
Supporting details
Navigation
Calls to action
The typography system was designed to remain effective across desktop, tablet and mobile.
Grid and spacing system
The website used a structured grid to create consistency across very different content types.
The grid supported:
Large editorial statements
Product comparisons
Technical diagrams
Enterprise use cases
Research content
Demo sections
Calls to action
Spacing was used to create rhythm and reduce visual noise.
The layout intentionally gave technical ideas room to breathe rather than compressing information into dense card systems.
Designing the hero
The hero needed to communicate scale without relying on an oversized product screenshot.
The visual concept represented the movement of information through a connected system.
Abstract forms suggested:
Input
Signal
Understanding
Coordination
Execution
The visual was not intended to represent the exact internal architecture of the product.
Instead, it gave visitors an intuitive sense of movement from communication into action.
The copy and visual worked together to establish Vanos as an agentic AI company rather than a voice software tool.
Product storytelling
The Voice-to-Voice and Voice-to-Action sections were designed as connected chapters.
Voice-to-Voice introduced natural interaction.
Voice-to-Action showed how those interactions could move into practical execution.
The visual system maintained a relationship between the two while giving each its own role.
This helped visitors understand that the products were part of the same technical direction.
Designing technical visuals
The technical illustrations were kept abstract but purposeful.
They used elements such as:
Nodes
Connections
Sequential states
Signals
Branching paths
Input and output relationships
Controlled system movement
The aim was to help communicate product behaviour without pretending to reveal proprietary architecture.
This approach created a more honest and flexible visual language.
Designing for enterprise credibility
Enterprise buyers often need more than a visually impressive homepage.
They need signs of reliability, control and operational relevance.
The design therefore included space for content around:
Security
Permissions
Human oversight
System control
Integration potential
Workflow reliability
Enterprise deployment
These sections were designed with less visual decoration and more emphasis on readability and trust.
Building a reusable Figma system
The Figma file was organized around reusable components and design rules.
The system included:
Navigation
Buttons
Product labels
Section headers
Content grids
Feature rows
CTA modules
Technical diagram styles
Demo containers
Footer layouts
Responsive typography
Spacing rules
This reduced inconsistency and made the transition into development more efficient.
The design system also created a foundation for future pages.
Phase 4: Framer development
Translating Figma into a real website
The approved designs were developed in Framer using native responsive layout systems.
The website was not built as a fixed visual replica.
Each section was recreated using:
Stacks
Grids
Relative sizing
Flexible containers
Reusable components
Breakpoint-specific layouts
Responsive typography
Structured content layers
This made the website more stable and easier to update.
Component architecture
Repeated elements were converted into reusable Framer components.
These included:
Navbar
Buttons
Product sections
Technical content blocks
CTA modules
Footer
Labels
Repeated content cards
Visual containers
Component-based development helped maintain consistency and reduced the risk of future updates creating design differences across the site.
Responsive development
The desktop design used large typography, wide layouts and significant negative space.
Those decisions could not simply be scaled down for smaller screens.
Each breakpoint was adjusted manually.
Desktop
The desktop layout prioritized visual scale, wide storytelling sections and immersive motion.
Tablet
Tablet required careful refinement of line lengths, section widths and content order.
Some multi-column sections were converted into simplified layouts to prevent awkward text wrapping and unbalanced spacing.
Mobile
The mobile version was treated as its own experience.
The structure was simplified where necessary, but the core product narrative remained intact.
I refined:
Hero line breaks
Product section stacking
Navigation behaviour
Diagram proportions
Touch target sizes
Section spacing
CTA placement
Footer layout
Animation complexity
The goal was to preserve the same level of clarity and confidence across all screen sizes.
Motion design
Motion was important to the Vanos experience because the product itself was based on movement from conversation to execution.
However, the animation needed to feel controlled.
The site used:
Section reveal sequences
State transitions
Signal movement
Layered system responses
Subtle parallax
Hover states
Scroll-linked transitions
Progressive content disclosure
Animations were used to explain relationships between ideas.
They were not added simply to make the website feel futuristic.
Scroll-based storytelling
Some sections used scroll behaviour to reveal parts of the product story in sequence.
This allowed visitors to understand the progression from voice input to interpretation and action.
The scroll interactions were designed to feel smooth and deliberate.
They were also adjusted for smaller devices, where complex animation could reduce usability or performance.
Performance optimization
Motion-heavy websites can become slow if they are not built carefully.
During development, I focused on reducing unnecessary complexity.
This included:
Reusing animation components
Limiting simultaneous effects
Optimizing images and visual assets
Reducing unnecessary nested layers
Simplifying mobile animations
Using responsive media sizing
Avoiding heavy third-party scripts
Keeping decorative effects controlled
These decisions helped preserve the visual experience without compromising usability.
Content management and scalability
The Framer structure was designed so the Vanos team could continue expanding the website.
The reusable system could support:
Product updates
Research posts
Enterprise use cases
Technical documentation
Hiring pages
New landing pages
Partner content
Company announcements
The goal was to build a foundation rather than a one-time marketing page.
SEO strategy
Building search relevance in an emerging category
Agentic AI is still an evolving category.
Different users may search using different terminology, including voice agents, enterprise AI agents, autonomous workflows or agentic automation.
The SEO structure therefore covered a group of related themes rather than relying on one repeated keyword.
Relevant themes included:
Agentic AI platform
Voice AI agents
Voice-to-Voice AI
Voice-to-Action AI
Enterprise AI agents
AI workflow execution
General-purpose AI agents
Agentic automation
AI voice technology
Enterprise automation
Multimodal AI agents
AI execution systems
The content used these themes naturally within the product story.
Semantic structure
The website was organized with a clear semantic hierarchy.
This included:
One primary H1
Clear H2 section headings
Supporting H3 headings
Descriptive paragraph structure
Meaningful button labels
Logical content order
Crawlable text
Accessible visual descriptions
The structure helped both visitors and search engines understand the relationship between the company, product and technology.
Metadata and social sharing
The site was prepared with:
Search-friendly page titles
Meta descriptions
Open Graph titles
Social sharing descriptions
Descriptive image alt text
Clean page URLs
Consistent page naming
These details helped create a more professional appearance when the website was shared by founders, team members or investors.
Technical SEO considerations
The development also considered:
Responsive page structure
Optimized media
Clean heading hierarchy
Link clarity
Crawlable content
Page performance
Mobile usability
Reduced layout shifting
Controlled animation load
The aim was to create a technically reliable foundation before expanding into broader content and search campaigns.
Supporting Vanos.ai’s business growth
A website alone does not build an AI company.
Vanos was responsible for the technology, product development, market strategy, partnerships and enterprise conversations.
The role of the website was to make those efforts more effective.
As a Silicon Valley-based startup, Vanos needed a public presence that could support high-value conversations across several areas.
Improving first impressions
For investors, enterprise prospects and technical talent, the website often became the first detailed interaction with the company.
The new design created a more credible and mature first impression.
It communicated that Vanos was approaching the category with seriousness rather than following short-term AI trends.
Supporting enterprise conversations
The site gave Vanos a clearer destination for enterprise outreach.
Before a meeting or demo, prospects could understand:
What the company was building
How Voice-to-Voice worked
Where Voice-to-Action fit
Why the platform was different
What the larger product direction looked like
This helped reduce the amount of basic explanation required during early sales conversations.
Supporting investor communication
Investors evaluating an AI startup need to understand both the present product and the size of the opportunity.
The website helped show that Vanos was not limited to a narrow voice use case.
It presented the company as building toward an agentic execution layer with potential across tools, systems and enterprise workflows.
Supporting recruitment
Technical startups also compete for talent.
A stronger digital presence helped Vanos communicate its ambition to engineers, researchers and product specialists.
The visual and written direction gave potential team members a clearer sense of the problem the company was trying to solve.
Strengthening category positioning
The website helped separate Vanos from:
Voice assistant tools
Customer support bots
Call automation platforms
AI wrappers
General chatbot products
It created a clearer category around conversation-driven agentic execution.
Creating a scalable public platform
As the company evolves, the website can become a central platform for:
Product announcements
Research updates
Enterprise case studies
Technical insights
Hiring
Partnerships
New product capabilities
This gave Vanos a flexible foundation for long-term communication.
The outcome
The final website gave Vanos.ai a clearer and more credible digital identity.
It positioned the company as a Silicon Valley-based agentic AI startup building beyond voice interaction and toward real execution.
The completed project delivered:
A clearer company narrative
Stronger Voice-to-Voice positioning
A credible introduction to Voice-to-Action
A refined visual identity
A responsive Figma-to-Framer implementation
Reusable Framer components
Technical product storytelling
Controlled motion and scroll interactions
Enterprise-focused content architecture
SEO-friendly page structure
Improved responsive performance
A scalable foundation for future growth
The result was a website that felt more like the public face of an ambitious AI systems company and less like a conventional SaaS landing page.
It gave Vanos a stronger platform for enterprise outreach, investor communication, recruitment and future product expansion.
Services delivered
Website strategy
Product positioning
Information architecture
Content structure
Copy direction
UX design
UI design in Figma
Responsive web design
Framer development
Component development
Scroll interactions
Motion design
Desktop optimization
Tablet optimization
Mobile optimization
On-page SEO
Technical SEO foundations
Performance refinement
Quality assurance
Like this project
What the client had to say
Rashid, Ans and Mehdi are very hardworking and creative group of people, will keep working with them!
spacedome llc, Yazer Ali
Feb 6, 2026, Client
Posted Feb 8, 2026
Silicon Based startup Vanos.ai Website Design and Development Using Figma & Framer
Likes
4
Views
27
Timeline
Nov 24, 2025 - Feb 6, 2026
Clients
Yazer Ali
