Framer Website Redesign Process—Fixing Broken Workflows Before They Break You

Let’s be honest: redesigning a website in Framer can feel a bit like trying to change your car’s tires while speeding down the freeway. If your Information Architecture (IA) and sitemaps aren’t rock solid, you’re basically asking for chaos. Imagine finding out—halfway through the process—that your “About” page went missing, or that your client wants a blog now (of course they do).

Sitemaps (especially the visual kind) and a clean IA are your project’s safety harness. In Framer, they’re not just documentation—they’re the difference between a smooth upgrade and a week of Slack messages that end with you talking to your dog for project feedback.

Here’s the real talk: Before you move a single layer, open up your sitemap (visual or XML, or—if you’re feeling dangerous—both). Go through your project and make sure you have:

• A current list of all pages (not just the ones you remember).
• A clear map of user flows (including the weird “forgot password” route your boss always skips).

Use Flows for this ( its 100% Free )

• An updated component library (because no one wants to refactor 37 different “button” variants).
• Mobile, tablet, and desktop views (because users don’t only visit your site on a 32” monitor, surprisingly).

Pro tip: If you haven’t updated your sitemap since the last time Taylor Swift dropped an album, you’re overdue.

Every redesign is a minefield for “orphaned” pages and random popups no one claims responsibility for. Here’s how to keep your entities aligned:

• Map every page and component to the new IA.
• Label orphaned pages for review. If you don’t know what it does, your users definitely won’t.
• Cross-check navigation and footer links—those are sneaky places for old pages to hide.

Sync with your team or client: Share the updated IA before you touch a pixel. You’ll save yourself a 2 AM “Where did the pricing page go?” message.

Ready for the checklist that actually works? Bookmark this before you do anything drastic:

1. Export your current sitemap/IA (visual and/or XML).
2. Update all user flows—especially checkout, signup, and anything involving money.
3. List all components in use (buttons, modals, nav bars—yes, all of them).
4. Flag all pages for redesign, merge, or removal.
5. Review mobile and accessibility standards.
6. Share a draft IA map with your client/team for “final” feedback (and prepare for one more round anyway).
7. Lock in navigation and footer updates.
8. Back up the old project somewhere safe.
9. Start your redesign—knowing you actually know what you’re working with.

Yes, it’s a bit of work up front. But trust me—in the future you will thank the present you when launch day comes and you don’t get panicked emails about missing pages or broken flows. Plus, you get to be the hero who actually knows where everything is (and who deleted it).

Next Steps:

• See the full IA Visualization guide →
• Information Architecture Tips and Tools→
• Back to Guide →