Shipped
Shipped
Transforming Rootflo’s website into a clear, modern & scalable AI narrative
Transforming Rootflo’s website into a clear, modern & scalable AI narrative
Transforming Rootflo’s website into a clear, modern & scalable AI narrative
I redesigned Rootflo’s entire website to solve clarity issues around our AI middleware product. I rebuilt the information architecture, simplified the narrative, introduced a modular product-page structure, and refreshed the UI to feel modern and enterprise-grade. The redesign improved understanding of what Rootflo does, increased demo signups, and became the foundation for our sales and investor conversations.
I redesigned Rootflo’s entire website to solve clarity issues around our AI middleware product. I rebuilt the information architecture, simplified the narrative, introduced a modular product-page structure, and refreshed the UI to feel modern and enterprise-grade. The redesign improved understanding of what Rootflo does, increased demo signups, and became the foundation for our sales and investor conversations.
30% reduction in sales explanation time
30% reduction in sales explanation time
3x higher engagement
3x higher engagement
Skills
UX, Motion design, Interface design, Illustrations, Interaction design, Webflow development
Timeline
1 month
Tools
Why redesign?
Why redesign?
PROBLEM 01
PROBLEM 01
PROBLEM 01
The existing Rootflo website did not fully reflect the company’s current objectives
The existing Rootflo website did not fully reflect the company’s current objectives
The existing Rootflo website did not fully reflect the company’s current objectives
The website felt off brand - since the colours used were not on brand
The website felt off brand - since the colours used were not on brand
The website felt off brand - since the colours used were not on brand
PROBLEM 02
PROBLEM 02
PROBLEM 02
Fragmented messaging, limited visuals, and no clear storytelling
Fragmented messaging, limited visuals, and no clear storytelling
Fragmented messaging, limited visuals, and no clear storytelling
Complicated illustrations that is time consuming which leads to high chances of users abandoning the site after few scrolls
Complicated illustrations that is time consuming which leads to high chances of users abandoning the site after few scrolls
Complicated illustrations that is time consuming which leads to high chances of users abandoning the site after few scrolls
PROBLEM 03
PROBLEM 03
PROBLEM 03
Usage of stock images feels outdated, which is the opposite of what the company is doing - innovation
Usage of stock images feels outdated, which is the opposite of what the company is doing - innovation
Usage of stock images feels outdated, which is the opposite of what the company is doing - innovation
The planning.
The planning.
🧭
The first step was defining what Rootflo does and the story we are trying to tell
The first step was defining what Rootflo does and the story we are trying to tell
The first step was defining what Rootflo does and the story we are trying to tell
🎯
Then we identified the point that makes us stand out
Then we identified the point that makes us stand out
Then we identified the point that makes us stand out
🧩
Developed a clear story flow that connects Rootflo’s purpose, products, and value
Developed a clear story flow that connects Rootflo’s purpose, products, and value
Developed a clear story flow that connects Rootflo’s purpose, products, and value
🎬
Structured the homepage and sub-pages to guide visitors seamlessly
Structured the homepage and sub-pages to guide visitors seamlessly
Structured the homepage and sub-pages to guide visitors seamlessly
"Tell a complex AI story through simplicity - both in content and design"
"Tell a complex AI story through simplicity - both in content and design"
"Tell a complex AI story through simplicity - both in content and design"
Information architecture.
Information architecture.
Storyboard.
Storyboard.
💡
💡
Showcased how Rootflo stands out with a bold headline, clean layout, and subtle animations
🎯
Explained the middleware concept with simple text and clear, illustrative storytelling.
📊
📊
Build credibility using numbers
🧩
🧩
Introducing our products using simple grid layout
🚀
🚀
The standout features that define Rootflo’s edge.
💬
💬
Testimonials that build confidence and authenticity.
Design decisions.
Design decisions.
Typography
Typography
We needed a font with clean geometry and high legibility, allowing the interface to feel modern yet professional.
We needed a font with clean geometry and high legibility, allowing the interface to feel modern yet professional.
We needed a font with clean geometry and high legibility, allowing the interface to feel modern yet professional.
Colours
Colours
#0080E2 is used as the primary brand color to convey energy and trust — key traits in the fintech and AI ecosystem
#0080E2 is used as the primary brand color to convey energy and trust — key traits in the fintech and AI ecosystem
#0080E2 is used as the primary brand color to convey energy and trust — key traits in the fintech and AI ecosystem
#0080E2
#0080E2
#0080E2
Brand colour
#101010
#101010
#101010
Deep grey
#FFFFFF
#FFFFFF
#FFFFFF
White
Visual direction
Visual direction
A design that feels intelligent, enterprise-grade and human.
A design that feels intelligent, enterprise-grade and human.
A design that feels intelligent, enterprise-grade and human.
🎯
Clean, modular interface
Clean, modular interface
Clean, modular interface
💙
Consistent brand language
Consistent brand language
Consistent brand language
📊
Information hierarchy simplified
Information hierarchy simplified
Information hierarchy simplified
📱
Responsive layouts
Responsive layouts
Responsive layouts
🚀
Scalable for future
Scalable for future
Scalable for future
Design approach.
Design approach.
From complicated design decisions to a simplified,
easy to follow version
Tell a complex AI story through simplicity — both in content and design
From complicated design decisions to a simplified,
easy to follow version
Example 01
Example 01
Example 01
Explaining middleware
Explaining middleware
Explaining middleware
BEFORE (Also designed by me)
BEFORE (Also designed by me)
Complicated scroll animation to show the middleware concept. Time consuming for viewers.
Complicated scroll animation to show the middleware concept. Time consuming for viewers.
Complicated scroll animation. Time consuming for viewers.
AFTER
AFTER
Simplified explanation in just two scrolls with illustrations that explain the concept clearly.
Simplified explanation in just two scrolls with illustrations that explain the concept clearly.
Simplified explanation in just two scrolls with illustrations that explain the concept clearly.
Example 02
Example 02
Example 02
Showing use cases
Showing use cases
Showing use cases
BEFORE
BEFORE
Using AI generated stock images, the design style does not match with the overall website.
Using AI generated stock images, the design style does not match with the overall website.
Complicated scroll animation. Time consuming for viewers. (Also designed by me)
AFTER
AFTER
Clean bento grid to show all the agents we currently have, easy to view in one glance
Clean bento grid to show all the agents we currently have, easy to view in one glance
Clean bento grid to show all the agents we currently have, easy to view in one glance
Learnings.
Learnings.
💡
Focused strategy upfront made the entire redesign easier - talked to the founders to understand what their intend is before designing
Focused strategy upfront made the entire redesign easier - talked to the founders to understand what their intend is before designing
Focused strategy upfront made the entire redesign easier - talked to the founders to understand what their intend is before designing
🎯
Simplifying complex ideas, using layouts users are already familiar with proved that clarity always creates stronger user understanding and trust
Simplifying complex ideas, using layouts users are already familiar with proved that clarity always creates stronger user understanding and trust
Simplifying complex ideas, using layouts users are already familiar with proved that clarity always creates stronger user understanding and trust
🤝
Cross-team collaboration with the sales team, and the engineering team helped align narrative & visual direction.
Cross-team collaboration with the sales team, and the engineering team helped align narrative & visual direction.
Cross-team collaboration with the sales team, and the engineering team helped align narrative & visual direction.
⚡
Thoughtful micro-details and interactions significantly improved the overall experience and feel of the website
Thoughtful micro-details and interactions significantly improved the overall experience and feel of the website
Thoughtful micro-details and interactions significantly improved the overall experience and feel of the website
Let's work together
Let's work together
Let's work together
I'm eager to know more about your work, let's talk.
I'm eager to know more about your work, let's talk.
I'm eager to know more about your work, let's talk.
