Built with Framer
DEXIGN.IO Website Redesign in Framer
Ans Ali
Like this project
Posted Jan 29, 2026
Redesigned and rebuilt DEXIGN.IO's website in Framer to enhance conversions.
DEXIGN.IO — Website Redesign in Framer
Project lead: Ans Ali (Founder & CEO, Spark Code)
Service: Full redesign & rebuild in Framer — UX strategy, visual design, micro-interactions, CMS, performance optimization, and launch.
Timeline: 6 weeks (Discovery → Launch)
Deliverables: New Framer site, component library, responsive system, CMS + blog, analytics + lead capture flows, design handoff & documentation.
Executive summary
DEXIGN.IO — a boutique web design agency — needed a modern, conversion-focused website that reflected its premium design capabilities and helped convert visitors into qualified leads. I (Ans Ali) redesigned and rebuilt their site in Framer to deliver a fast, motion-rich experience with a clear sales funnel for high-value clients.
Key outcomes (post-launch)
Qualified leads ↑ 46%
Bounce rate ↓ 34%
Average load time ↓ from 4.6s → 1.1s
Time on page for case studies ↑ 82%
Note: metrics measured across 8 weeks post-launch vs. 8 weeks pre-launch using Google Analytics + Hotjar.
Project goals
Positioning & storytelling: Present DEXIGN.IO as a premium, outcome-driven design partner.
Conversion-first layouts: Clear funnels for “Work with us”, “Request proposal” and portfolio exploration.
Speed & SEO: Improve Core Web Vitals and organic visibility.
Show, don’t tell: Use animations and interactive case studies without sacrificing performance.
Editor-friendly: Enable non-technical editors to update portfolio and blog in Framer CMS.
Discovery & research
Stakeholder interviews: Two workshops with the DEXIGN.IO founders to align KPIs, tone, and target market (startups, fintech, B2B SaaS).
Analytics audit: Identified high-exit pages (portfolio list, contact), slow landing templates, and weak CTAs.
Competitive scan: Mapped 8 direct competitors to identify patterns and differentiation opportunities (client stories, pricing transparency, motion language).
User journeys: Created 3 priority personas and mapped an ideal funnel: Discover → Trust (case study) → Contact (pre-qualified form).
Strategy & information architecture
Homepage: Value-led hero, atelier style portfolio highlights, clear CTA to “See pricing” and “Request proposal”.
Work / Case Studies: Filterable CMS-driven case studies with hero KPIs, challenge → approach → results, interactive visuals.
Services: Short, scannable service pages with outcome-focused bullets and linked case studies.
Lead capture: Multi-step contact flow that collects project budget, timeline, and industry—reduces unqualified inquiries.
SEO: Semantic structure, schema for Organization and Breadcrumbs, optimized meta titles/descriptions, and keywords layered into case study headings.
Design approach
Visual system: Neutral base (charcoal/ivory), single accent color for CTAs, 3-tier typographic scale, 2xl rounded cards for case studies.
Imagery: Stylized full-bleed hero shots; custom device mockups exported as optimized SVGs.
Micro-interactions: Framer variants for hover states, scroll-triggered reveals, and animated progress indicators in case studies.
Accessibility: High contrast CTA colors, keyboard navigable menus, alt text and ARIA roles for interactive components.
Why Framer?
Framer allowed us to:
Build pixel-perfect animations without heavy custom JS (variants + scroll interactions).
Ship an editor-friendly CMS so the client can add case studies and blog posts without developer support.
Publish to a fast CDN and leverage modern image formats (AVIF/WebP) with automatic resizing.
Rapidly iterate: components + overrides made design changes fast during stakeholder reviews.
Implementation details (technical highlights)
Component library: Reusable Framer components with responsive constraints and variants for states.
Performance:
Images auto-served in next-gen formats and lazy-loaded.
Critical CSS inlined, non-critical CSS deferred.
Removed unused fonts; used variable fonts for reduced requests.
Animations: Used Framer’s motion and scroll interactions; heavy animations converted to Lottie where appropriate for performance.
Forms & integrations: Contact form hooked to Zapier → HubSpot pipeline; CAPTCHA + honeypot to reduce spam.
Analytics & heatmaps: Google Analytics 4 + Hotjar for behaviour tracking; events added for CTA clicks and form abandonment.
SEO basics: Canonical tags, Open Graph, Twitter cards, structured data for case studies, 301s for legacy URLs.
Notable challenges & solutions
Challenge: DEXIGN.IO wanted rich, tactile animations but the previous site suffered from slow load times.
Solution: Re-architect animation strategy — use GPU-accelerated transforms, limit global animated elements on load, and swap resource-heavy hero video for animated SVG + Lottie loop that’s <200KB.
Challenge: Portfolio updates required developer involvement.
Solution: Built Framer CMS collections with templates and a short editor guide (video + doc) for the DEXIGN team.
Challenge: Client had legacy URLs and SEO value to preserve.
Solution: Full URL mapping and 301 redirect plan; preserved meta titles/descriptions and canonicalization.
Before → After (high level)
Before
Cluttered homepage, inconsistent CTAs, long lead form, slow load times, manual update process for portfolio.
After
Streamlined homepage funnel, modular case study pages, multi-step short contact form, Framer CMS-driven portfolio, performance and SEO uplift.
Results & analytics (8 weeks after launch)
Organic sessions: +28%
Qualified leads (budget ≥ client minimum): +46%
Bounce rate (site-wide): −34%
Average page load time: 4.6s → 1.1s
Average time on case study pages: +82%
Behavioral insights from Hotjar:
Users spent more time on interactive case studies and were more likely to click CTAs after viewing “results” cards with clear KPIs.
Project timeline (high level)
Week 1 — Discovery, kickoff workshops, analytics audit
Week 2 — Information architecture, low-fidelity wireframes, content mapping
Week 3 — Visual direction, design system, desktop mockups
Week 4 — Framer build: components, CMS, responsive layout
Week 5 — Integrations, QA, performance optimization, SEO setup
Week 6 — Staging review, launch, monitoring & first-week fixes
Role & team
Lead: Ans Ali — UX strategy, Framer build, motion design, QA.
Support: 1 frontend dev (integration), 1 copywriter (case study edits), 1 QA specialist.
Client: DEXIGN.IO founders (feedback, content sign-off).
What made this project successful
Aligning the redesign with measurable business goals (fewer unqualified leads, higher conversion).
Picking Framer for a balanced mix of motion, editorial control, and speed.
Prioritizing content that builds trust: KPI-driven case studies and clear pricing/contact flows.
Close collaboration: weekly demos and iterative feedback loops kept scope focused.
Replicable checklist
Start with analytics: find pages that leak leads.
Create KPI-driven case studies (Hero KPI + Challenge → Approach → Results).
Build a component-driven system in Framer with CMS templates.
Optimize images & fonts; prefer Lottie/SVG over heavy video.
Implement a friction-reducing contact flow that qualifies leads early.
Set up event tracking and heatmaps before launch.
“Working with Ans and Spark Code transformed our site from a brochure into a lead-generating platform faster, clearer, and more aligned with the premium clients we want to attract.”