From concept, design, and development, to collaborating with kate marshall on copy, for Webflow's 404 page, it was great and super fun to take this live. Preview it live here: Wanted to share some thoughts with y'all as to how we landed on this result.

We had different ideas for what the 404 page should look like, what the UX should feel like, and what sort of content should be present. But our general approach centered around the fact that, ultimately, a 404 is never going to be someone’s intended destination. So how can we make it useful (and fun) while they’re there? Keep reading to learn more about how we reached the end result.

1) Nobody wants to land on a 404. Because ending up on a 404 page isn’t the ideal experience, we wanted to find a way to offer people the opportunity to go to other pages easily (we added our nav back in), provide useful resources that might come in handy, and create an ahá moment when interacting with the page.

2) Go outside of the box (no pun intended). When I designed this option, I wasn't really sure how I was going to build it, at all! So once this concept got approved, I knew I had to pull out all the stops. I collaborated back and forth with ChatGPT (as well as with @itsjonq) to find a good, fully functional solution, and to work on the code to make it work just like it does in the Designer (minus the padding because it really wouldn't make any sense, of course). Funny how easy it was to implement Cmd+Z and Cmd+Shift+Z functionality (with a Ctrl alternative of course for Windows users)

3) Keep visitors within the ecosystem. We now have a dynamic CTA that changes copy and URL based on where you are coming from. — If you are coming from a page, the CTA will read "Go back" and by clicking it, you'll be taken back to your last visited page on our site. — If you are coming from an external source, you'll see "Go to homepage" that will take you to the homepage and hopefully set you on a better path to finding the page you were looking for!

4) Find ways to blend the gap between marketing and product. I wanted to find a way to include some of the product visuals and functionality in our 404, but a static image fell short or felt confusing — and landing on a 404 that looked just like the Designer was going to be awkward and an odd experience. You'd be thinking: "why am I here?". I had to explore other alternatives. Replacing the zero in 404 with the spacing UI, with its added functionality, makes a fun experience for people familiar with it (it’s hard not to start playing with it instantly) — as well as providing some context and visual language to new visitors as to what a well-known part of @webflow looks like.

Hope you don't hit a 404 while you're navigating but if you do, hope you enjoy it! Check it out:

@katemarshallll @webflow <3 you, this is super fun

@katemarshallll @webflow Ryry, means so much <3

@katemarshallll @webflow Too good

@katemarshallll @webflow I am looking forward to the time we have enough people on our team that we can make our 404 page this nice... haha..