Case study · 2026 · ongoing
UI Design | Framer Development | AI SaaS Website
My role
UI Designer & Framer Developer
Timeline
~2 months · 2026 · ongoing
Team
1 UI Designer & Framer Developer
Tolto founder
Platform
Website (Framer + custom code)
Status
Live
Introduction
The client
Tolto.ai is an AI-powered translation platform for real-time multilingual customer support. It plugs into the help desks support teams already use, like Zendesk, Intercom, Gorgias and HubSpot, so agents can reply to customers in any language without leaving their inbox.
My role
I design and build every page directly in Framer: layout, responsive behaviour, interactions and custom code. I work one-to-one with the founder, so I own the whole path from first layout to the live page, with no hand-off in between.
Impact
The site is live and growing on a structure built for search. New SEO pages can be added quickly, and a working cost calculator lets visitors try out the value of the product for themselves instead of just reading about it.
interactive cost calculator, built with custom code
design and development, from layout to live site
page structure that keeps growing with new pages
and actively growing with every new page
01 — The problem
Tolto works in a busy market. Support teams searching for a translation tool compare many options side by side. Tolto needed a website built for search: clear pages people can find, comparisons that answer real questions, and a structure that can keep growing.
Findability
Lost in search
Buyers search for very specific things, like integrations, competitors and pricing. One long page can't rank for all of them.
Comparison
"Why this and not the others?"
Teams are already looking at well-known tools. They need a clear, honest reason to choose Tolto.
Value
"Is it worth the cost?"
AI translation savings are hard to picture. Without numbers, the value stays abstract.
The challenge
02 — Who it's for
The site has two jobs: help support leaders decide quickly, and give the founder a site that can grow without a redesign every time a new page is needed. I designed for both.
The visitor
Support and CX leaders at growing companies who need to serve customers in many languages without hiring for each one.
What they need
• Understand what Tolto does in seconds
• Check it works with their help desk
• See how it compares, and what it will cost
What frustrates them
• Vague AI claims with no proof
• Comparison info scattered across sites
• Pricing they have to guess
The owner
Tolto's founder and growth team, who need the website to bring in qualified visitors and turn them into sign-ups.
What they need
• Pages that rank for real search terms
• Add new pages fast, without a designer for each
• A clear path from visit to sign-up
What frustrates them
• A site that can't scale with SEO plans
• Every new page built from scratch
• Value that's hard to show on a page
03 — Research & strategy
Tolto shares an owner and a market with Lingpad, another site I had designed. Instead of starting from zero, I reused Lingpad's foundational components and reshaped them for Tolto's darker, more technical brand. I also studied how competitors present comparisons and pricing, and what people actually search for.
What the research told me
Insight 01
Search is specific
People search for exact questions, like "Tolto vs Unbabel" or "Zendesk translation". Each question deserves its own page.
Insight 02
Comparisons decide the deal
Buyers are already weighing a few tools. A clear, fair comparison page meets them right at that moment.
Insight 03
Numbers beat promises
"Save time and money" is easy to ignore. Letting people enter their own numbers makes the value real.
How I worked
Competitor research
SEO page structure
Wireframes
Reusing Lingpad components
Visual design
Framer build
Custom code
Responsive QA
04 — Mapping the journey
I mapped the path a buyer takes, from the first search to starting a trial, and what the site needs to do at each step. Every page on the site has a clear place on this map.
Step 1
Search
Visitor
Searches a specific question, like a competitor or integration.
The site
Has a focused page ready to rank for it.
Step 2
Land
Visitor
Wants to know what Tolto is, fast.
The site
Explains the product in one clear headline.
Step 3
Compare
Visitor
Weighs Tolto against the tools they know.
The site
Shows an honest, side-by-side comparison.
Step 4
Calculate
Visitor
Asks "what would this save us?"
The site
Lets them enter real numbers and see the result.
Step 5
Sign up
Visitor
Is ready to try it.
The site
Gives a clear, simple call to action.
05 — Key decisions
Each decision was about one thing: helping the right people find Tolto, and giving them a reason to choose it.
The problem
Long pages that cover everything rank for nothing. Search engines and people both want one clear answer per page.
Options I weighed
Keep a few long pages (fewer to build), or split the content into many focused pages, each built around one topic.
What I chose
Information split into clearly defined sections and pages, built from reusable Framer components and CMS templates, so each page can rank and be found.
Why it worked
Each page has one clear job, and new SEO pages can be added quickly without a new design each time.
The problem
Buyers were already comparing Tolto with well-known tools, but they were getting that comparison from someone else's site.
Options I weighed
A single generic "why us" page, or dedicated pages for each competitor that answer exactly what people search for.
What I chose
Dedicated comparison pages (like Tolto vs Unbabel) with a clear side-by-side layout and a strong visual hierarchy that leads to a call to action.
Why it worked
Tolto shows up at the exact moment people are deciding, and tells its own story.
The problem
Savings from AI translation are hard to picture. Claims like "cut costs" don't feel real until people see their own numbers.
Options I weighed
A static pricing table (simple, but generic), or an interactive calculator where visitors enter their own numbers.
What I chose
A cost comparison calculator: visitors enter their numbers and instantly see how costs compare across translation platforms. I built the logic and its responsive layout with custom code in Framer.
Why it worked
Visitors can feel the product's value for themselves, which makes the decision easier.
06 — Visual direction
Tolto sits next to Lingpad, so it needed to feel related but not the same. I kept the shared structure and typeface, and gave Tolto a darker, more technical, AI-focused look: black as the main colour, with purple to guide the eye to what matters.
07 — Design system
With new pages added all the time, every section had to be a reusable building block. I set up colours, type and components in Framer so new pages are put together, not redrawn.
Colour
Black
#0B0B0F
Purple
#6C4CF1
Soft Purple
#EDE9FE
Grey
#8A8680
Canvas
#F8F7F5
Typeface
Clean and geometric, and shared with Lingpad to keep the two brands in the same family.
Foundation
Lingpad's core components, reshaped with Tolto's colours and darker, more technical feel.
Components
Hero sections, feature blocks, integration logos, comparison tables, pricing and calculator modules, FAQs and calls to action, each responsive and reusable across every page.
08 — Final designs
A Framer website organised for search, with focused pages, comparison pages and an interactive calculator, all built from one set of reusable sections.
On tablet
Hero
What Tolto does, in one clear headline.
Features
Glossary, AI Context, reporting and 120+ languages.
Pricing
One simple price per agent, everything included.
On mobile
Mobile hero
The same clear message, sized for small screens.
Results
Proven impact, stacked for easy scrolling.
Reviews
What support leaders say about Tolto.
09 — Outcome
Tolto.ai is live on a structure built for search. New SEO pages keep being added, and the calculator gives visitors a hands-on way to understand the value of the product.
custom-coded cost calculator that turns claims into numbers.
design and build, from the first layout to the live site.
and growing with new SEO pages every few weeks.
10 — Looking back
No final retrospective yet
The project is still going, so this is a snapshot. It keeps changing as new pages come in.
Designing for scale
Each new page pushes me to make sections more flexible, so the site can grow without losing its look.
Measuring what works
Next, I'd like to track which pages and calculator results lead to sign-ups, and design from that data.
Learnings
Owning the whole experience
Designing and building it myself means every detail on the live site is a decision I made.
A new identity inside a system
Creating a distinct brand while reusing another brand's foundation, without the two feeling like copies.
Design meets function
The calculator taught me to connect visual design with real logic and real numbers.
Enjoyed this case study?
© 2026 Tolto.ai. All rights reserved. Designed by Shreya Pandya.