Building Curiosity:
Designing a hero image to tease
our product features at Formant.
Building Curiosity:
Designing a hero image to tease
our product features at Formant.
Building Curiosity:
Designing a hero image
to tease our product features at Formant.
BACKGROUND
Formant’s hero image wasn’t clearly communicating value to potential customers. As the brand shifted focus to small businesses, they needed a hero section that instantly showcased core offerings like teleoperation, APIs/SDKs, and analytics. The challenge was to turn complex concepts into a compelling visual story that captured attention, drove conversions, and remained simple for engineers to implement.
PROBLEM
The original hero section struggled to communicate the product’s core value, especially to non-technical users. Key offerings were buried or unclear, leading to confusion, low engagement, and missed conversion opportunities. The visual language lacked focus, failing to capture attention or reflect the brand’s capabilities.
UNCLEAR VALUE COMMUNICATION
The existing hero image failed to clearly explain what Formant's robotics platform offered, leaving potential customers confused about the company's capabilities.
POOR AUDIENCE TARGETING
Complex technical concepts weren't resonating with small business audiences, resulting in low engagement and missed conversion opportunities.
IMPLEMENTATION CONSTRAINTS
Limited engineering resources required a solution that could be easily implemented without extensive development work while maintaining high visual impact.
PROCESS
RESEARCH
Analyzed current user base and target segments (small businesses vs enterprises) while studying competitor approaches to identify industry trends and differentiation opportunities.
ALIGNMENT
Collaborated with marketing team and CEO to determine which product aspects to highlight, focusing on teleoperation, APIs/SDKs, and analytical tools.
EXPLORATION
Developed three strong visual concepts that would effectively communicate how companies can use Formant's tools to grow their business and scale operations.
OPTIMIZATION
Created detailed designs and interactive prototypes to demonstrate functionality, including motion timing to ensure clear messaging without user confusion.
APPLY
When engineering resources were limited, took initiative to create the motion graphic in After Effects and export as Lottie files for easy web implementation.
THE CONCEPTS
The redesigned hero made Formant’s value clear and accessible to small business users. A motion graphic boosted engagement and credibility, while using Lottie files kept implementation lightweight and scalable.
ENHANCED BRAND PRESENCE
Strengthened Formant's identity and credibility in the competitive robotics industry through compelling visual storytelling.
IMPROVED USER ENGAGEMENT
Made complex robotics data feel accessible and approachable, leading to better visitor interaction with the platform.
INCREASED CONVERSION POTENTIAL
Created an intuitive and modern first impression that effectively communicated value proposition to target audiences.
SUCCESSFUL TECHNICAL IMPLEMENTATION
Delivered a high-impact solution that worked within engineering constraints using Lottie files for seamless web integration.
CONTRIBUTED TO PLATFORM GROWTH
The redesigned hero section supported Formant's 2022 website redesign goals and helped drive increased customer interest.
THE CHALLENGE
Creating a hero image that would instantly communicate Formant's complex robotics platform value while resonating with small business audiences required balancing technical accuracy with visual simplicity. The design needed to work within strict implementation constraints while delivering maximum impact.
SIMPLIFYING COMPLEX CONCEPTS
Translating technical robotics features like teleoperation, APIs/SDKs, and analytics into visually compelling stories that small businesses could immediately understand and connect with.
IMPLEMENTATION LIMITATIONS
Designing a high-impact motion graphic solution that could be easily implemented by busy engineers without extensive development resources or complex integrations.
WEB HERO DESIGN
EDUCATIONAL, SOCIAL MEDIA, PRINT, MARKETING DESIGN
WEB HERO DESIGN
Lead designer. I led the end to end design process in close collaboration with OUR EXTERNAL CONTRACTOR
BACKGROUND
Formant’s hero image wasn’t clearly communicating value to potential customers. As the brand shifted focus to small businesses, they needed a hero section that instantly showcased core offerings like teleoperation, APIs/SDKs, and analytics. The challenge was to turn complex concepts into a compelling visual story that captured attention, drove conversions, and remained simple for engineers to implement.
Formant’s hero image wasn’t clearly communicating value to potential customers. As the brand shifted focus to small businesses, they needed a hero section that instantly showcased core offerings like teleoperation, APIs/SDKs, and analytics. The challenge was to turn complex concepts into a compelling visual story that captured attention, drove conversions, and remained simple for engineers to implement.
Formant’s hero image wasn’t clearly communicating value to potential customers. As the brand shifted focus to small businesses, they needed a hero section that instantly showcased core offerings like teleoperation, APIs/SDKs, and analytics. The challenge was to turn complex concepts into a compelling visual story that captured attention, drove conversions, and remained simple for engineers to implement.
PROBLEM
The original hero section struggled to communicate the product’s core value, especially to non-technical users. Key offerings were buried or unclear, leading to confusion, low engagement, and missed conversion opportunities. The visual language lacked focus, failing to capture attention or reflect the brand’s capabilities.
Robotics operators faced delays and inefficiencies due to disconnected tools and complex interfaces. Without a unified visualization solution, critical spatial data remained inaccessible to many users.
UNCLEAR VALUE COMMUNICATION
The existing hero image failed to clearly explain what Formant's robotics platform offered, leaving potential customers confused about the company's capabilities.
POOR AUDIENCE TARGETING
Complex technical concepts weren't resonating with small business audiences, resulting in low engagement and missed conversion opportunities.
IMPLEMENTATION CONSTRAINTS
Limited engineering resources required a solution that could be easily implemented without extensive development work while maintaining high visual impact.
PROCESS
RESEARCH
Analyzed current user base and target segments (small businesses vs enterprises) while studying competitor approaches to identify industry trends and differentiation opportunities.
ALIGNMENT
Collaborated with marketing team and CEO to determine which product aspects to highlight, focusing on teleoperation, APIs/SDKs, and analytical tools.
EXPLORATION
Developed three strong visual concepts that would effectively communicate how companies can use Formant's tools to grow their business and scale operations.
OPTIMIZATION
Created detailed designs and interactive prototypes to demonstrate functionality, including motion timing to ensure clear messaging without user confusion.
APPLY
When engineering resources were limited, took initiative to create the motion graphic in After Effects and export as Lottie files for easy web implementation.
THE CONCEPTS
The redesigned hero made Formant’s value clear and accessible to small business users. A motion graphic boosted engagement and credibility, while using Lottie files kept implementation lightweight and scalable.
The redesigned hero made Formant’s value clear and accessible to small business users. A motion graphic boosted engagement and credibility, while using Lottie files kept implementation lightweight and scalable.
The redesigned hero made Formant’s value clear and accessible to small business users. A motion graphic boosted engagement and credibility, while using Lottie files kept implementation lightweight and scalable.
ENHANCED BRAND PRESENCE
Strengthened Formant's identity and credibility in the competitive robotics industry through compelling visual storytelling.
IMPROVED USER ENGAGEMENT
Made complex robotics data feel accessible and approachable, leading to better visitor interaction with the platform.
INCREASED CONVERSION POTENTIAL
Created an intuitive and modern first impression that effectively communicated value proposition to target audiences.
SUCCESSFUL TECHNICAL IMPLEMENTATION
Delivered a high-impact solution that worked within engineering constraints using Lottie files for seamless web integration.
CONTRIBUTED TO PLATFORM GROWTH
The redesigned hero section supported Formant's 2022 website redesign goals and helped drive increased customer interest.
RESEARCH
Analyzed current user base and target segments (small businesses vs enterprises) while studying competitor approaches to identify industry trends and differentiation opportunities.
ALIGN
Collaborated with marketing team and CEO to determine which product aspects to highlight, focusing on teleoperation, APIs/SDKs, and analytical tools.
EXPLORE
Developed three strong visual concepts that would effectively communicate how companies can use Formant's tools to grow their business and scale operations.
OPTIMIZE
Created detailed designs and interactive prototypes to demonstrate functionality, including motion timing to ensure clear messaging without user confusion.
COLLAB
Worked with Midori to validate data flows, edge cases, and system constraints, ensuring that what we designed could be built accurately and perform reliably inreal-world scenarios.
APPLY
When engineering resources were limited, took initiative to create the motion graphic in After Effects and export as Lottie files for easy web implementation.
DELIVER
Built interactive prototypes testing different visualization approaches, refined the interface through user feedback, and delivered a comprehensive 3D Scene Module with intuitive mouse controls and flexible
layer management.
PROCESS
PROCESS
RESEARCH
Analyzed current user base and target segments (small businesses vs enterprises) while studying competitor approaches to identify industry trends and differentiation opportunities.
ALIGNMENT
Collaborated with marketing team and CEO to determine which product aspects to highlight, focusing on teleoperation, APIs/SDKs, and analytical tools.
EXPLORATION
Developed three strong visual concepts that would effectively communicate how companies can use Formant's tools to grow their business and scale operations.
OPTIMIZATION
Created detailed designs and interactive prototypes to demonstrate functionality, including motion timing to ensure clear messaging without user confusion.
APPLY
When engineering resources were limited, took initiative to create the motion graphic in After Effects and export as Lottie files for easy web implementation.
DELIVER
While the design was driven by Trombia’s needs, I made sure the solution was modular & scalable, so other customers could benefit from the same path planning experience within our platform.
THE CHALLENGE
Creating a hero image that would instantly communicate Formant's complex robotics platform value while resonating with small business audiences required balancing technical accuracy with visual simplicity. The design needed to work within strict implementation constraints while delivering maximum impact.
Creating a hero image that would instantly communicate Formant's complex robotics platform value while resonating with small business audiences required balancing technical accuracy with visual simplicity. The design needed to work within strict implementation constraints while delivering maximum impact.
Creating a hero image that would instantly communicate Formant's complex robotics platform value while resonating with small business audiences required balancing technical accuracy with visual simplicity. The design needed to work within strict implementation constraints while delivering maximum impact.
SIMPLIFYING COMPLEX CONCEPTS
Translating technical robotics features like teleoperation, APIs/SDKs, and analytics into visually compelling stories that small businesses could immediately understand and connect with.
IMPLEMENTATION LIMITATIONS
Designing a high-impact motion graphic solution that could be easily implemented by busy engineers without extensive development resources or complex integrations.