Built with Framer
DEXIGN.IO Website Redesign in Framer
Ans Ali
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.”
Like this project
Posted Jan 29, 2026
Redesigned and rebuilt DEXIGN.IO's website in Framer to enhance conversions.
