Icalia Labs
Marketing Website System: Converting Visitors Through Interactive Storytelling
My context
Icalia Labs Web Design and Development 2023- 2025 | Web design and Development | Interaction Design | Figma | Webflow
Icalia labs website communication Challenge
Icalia Labs had a static web presence that wasn't converting visitors into leads. Following a brand refresh, leadership wanted to modernize how Icalia communicated its services, moving from a generic nearshore development
message to showcasing their unique process across three pillars: Innovate, Build, Love.
The goal
Transform the website into a lead-generation engine through compelling storytelling and interactive experiences.
Strategic approach
Rather than traditional static landing pages, I designed an interactive narrative system that would:
This required balancing marketing goals with technical constraints—creating experiences that felt premium while remaining performant and maintainable.
Increase engagement
through scroll-triggered animations and storytelling
Improve comprehension
of complex services through visual metaphors
Drive conversions
by creating memorable, differentiated experiences
Scale efficiently
using a design system translated to Webflow classes
A new hope home
Objective
At the time of the brand revamp the team worked on a new home page but that version didn’t quite delivers the value the HQ was looking for. in that period of time the 3D boom exploded with the release of Adobe Illustration Inflate tool, and also Motion and web animations started to gain attention so decided to give it a shot and present a new home for Icalia that really turns visitor into leads.
The goal was to improve Icalia way of communicate as a company, leaving a little behind all the Nearshore tag and focusing more in the process, expertise and process they have to develop solutions all divide in three pilars, Innovate, Build and Love
Design Approach
As i mention 3D was the boom and was present in every site back in the beginning of 2024, i decide to implement it right in the home I changed the static full descriptive hero for one with a show reel as the opening element. I restructure the rest of the page to work more like an invitation to navigate more in the site than a full line by line description of what is Icalia, for this i split each reaction with a big Header and small description followed of key visual elements to present the bullet points for the Build pillar.
For the Innovation pillar i focus in present a process of ideation and definition of ideas and goals, step by step using 3D inflated elements as visual catch. Finally i closed with the Love Section where i presented the values and passions of the team for development solutions but this was changed due internal movements, so i implemented a "review" section instead where the collaborator and projects are presented, followed for an all screen CTA.
Defining the hero
For my initial exploration i spend time crafting the Right hero that could impact the visitor from first time thinking in narrative, timing and interactions in the page using the 3D elements at the moment, leading to the following explorations.
THe initial version
For the first version i implement all that was described in the "design approach" description with a small amount of changes and directions from the design lead. this version was just design and intention and i wait for the final approval before work on prototype and interactions due other projects priority.
Plus: at the time of the brand revamp i was assigned to create the show reel for the new, (using After Effects), it was removed in later version but you can still watch it here:
Watch the reel
Scroll me
The Final version
After the final design lead check i worked closely with marketing, sales and HQ to make major changes in the final home, they where from copies to "repetitive" elements in the page, adjustments in layout and colors used to fulfill they requirements based on CEO, KPIS and internal adjustments at the time.
Visit
Built in a week
Objective
Explain the visitor what is “built in a week” as a process to develop ideas with the help of a Discovery workshop. For this case the explanation of the process is crucial to help the visitor understand what what and how is done.
“The page has to work as introduction for the three specialized workshops Icalia offers”
Design Approach
I crafted an explanation process animation to be played on scroll as the main element of the page to explain every step of the process with the pace of the visitor instead of trow everything in just one view. I start with a little tease of the page “style” with a big hero and small interactive element that plays with the “build” concept.
I used small labels like “what is it?” with arrows to interest user to keep scrolling. finally the main animation use element morphism to captivate the visitors attention, landing them in the final section where the main 3 workshops are displayed with micro interactions, aiming for the user click.
Visit
Placements
Objective
Communicate the value proposition of Placements as a service. Explain how it benefits head hunters and recruiters and solves their outsourcing hiring problems.
“The page has to build the narrative of the current hiring problems and how Placements is the solutions of all of them”
Design Approach
For this landing i focus on the narrative, using high contrast colors to describe pain and solution.
Starting with the hero i present a little animations that resemble top tech collaborators joining to the a project to wake up visitor interest.
The landing starts with the problem description aiming that the visitor feel identified with the build scenario of recruiting hell and their messy process, presenting not only statements but also crucial metrics identified within the hiring process to finally present the Placement solution with a new bright like if they discovered the light at the end of the dark tunnel and landing that presents the other side of the hero with a concise CTA.
Visit
Zero to Hero
Objective
From zero to hero or "Project Phill" is a AI framework like no other, where Icalia not only sells and AI technology but a process of understanding from their user side to deliver an AI tool that not just automate but improve the process.
"This is not ChatGPT into your business, is a new way to optimize process with AI services using what you already have except the messy work, with a process and price that adapts to you"
Design Approach
I turned Phill into a journey companion character, made him the center of the storytelling introducing new characteristics not just of the character but the framework with every new section of the page, the goal with this decision is to avoid the #1 barrier of AI adoption which is not technical but emotional, Phill is not an AI but a colleague that joins your team.
For the narrative, every section included a new different type of motion and interaction appealing to the visitor's surprise and curiosity to keep scrolling and discovering new sections, all while playing with a 3 columns layout.
The final design goal was to deliver a great first impression to visitors, using comprehensible not technical words, explaining benefits, times and prices using typography, high contrast with the color brands and a UX dedicated to the user journey thought the page scroll. Ending with a CTA that invites not "Buy a technology" but discover which benefits you could bring to the table with the AI framework help.
Visit
Business impact
Reported outcomes
Sales team reported a 10% increase in qualified leads during the first 5 weeks post-launch—a positive signal, though comprehensive analytics weren't shared across teams.
What We'd Track (If Starting Today)
Scroll depth (engagement indicator)
Time on page (narrative effectiveness)
Bounce rate (first impression success)
CTA click rates (conversion measuremen)
Heat maps (interaction pattern analysis)
This data would inform A/B testing and continuous optimization—turning these landing pages into a learning system, not static assets.
Live Validation
The strongest validation? **These pages are still live and actively used** for lead generation at [icalialabs.com](https://icalialabs.com). Unlike theoretical work, anyone can experience the interactions firsthand.
Key Learnings
Motion as a Strategic Tool
This project proved that thoughtful motion design drives engagement . Rather than gratuitous animation, each interaction served a purpose:
- Guiding attention through complex information
- Creating memorable moments that differentiate the brand
- Maintaining interest through long-form contentBalancing Craft with Constraints
Working within Webflow's ecosystem taught me to make pragmatic technical decisions. While I'd love to build custom GSAP animations for everything, shipping maintainable experiences that the team can own often matters more than technical perfection.
Design Systems for Web
Translating Icalia's design system to Webflow classes created a scalable foundation. New landing pages can now be built in days, not weeks, because the system handles consistency automatically.
Cross-Functional Collaboration
Coordinating with Marketing, Sales, and HQ taught me to balance competing priorities—brand expression, conversion optimization, and business messaging. The final designs were better because of these perspectives, not despite them.