How-to: Seamlessly integrate a production website with your mockup

Labcoat was born out of a need to try out a new design for some key pages (e.g., the homepage) on a very large existing website. Rather than laboriously creating a full mockup of the existing site including our new homepage, we used a precursor to Labcoat to redirect just the homepage to our mockup and vice versa.

Create your mockup

For any page or pages you want to integrate into the live site, simply create a mockup using whatever tool you’d like.

For example, you might use Axure to create a simple image-mapped, click-through of your new homepage. But you could use anything from InVision to complete HTML/CSS/JS. The key is that your mockup in available in a browser by URL.

For every place that makes sense, link your prototype to the appropriate place on the live site. That login button might link to http://example.com/login, for example.

Host your mockup on the web

The next step is to make sure your mockup is available on the web somewhere. If you’re mockup is in InVision, then the share link will work and you’re all set.

If you’re using Balsamiq, Axure, or another drawing tool, you’ll need to export your mockup to HTML/CSS so it can be viewed and interacted with in a browser.

One you have your mockup in HTML/CSS, then you’ll need to host your mockup on a webserver. If you simply want to view it locally, you can use a simple local webserver. Fortunately, this is ridiculously easy:

# on Mac OSX/Linux, this will serve the current directory on http://localhost:8000
python -m SimpleHTTPServer

# via NPM, this package will run a server and do live-reloading
# More info here: https://www.npmjs.com/package/live-server
npm install -g live-server
# cd to the directory of your mockup's HTML
# Your mockup will be hosted on http://localhost:8080
live-server

Use Labcoat to redirect to your prototype where it makes sense

At this point, we have our mockup linking to the live site. Now we need to do the reverse.

Using Labcoat, create a new script that handles the redirects to your prototype.

// Redirect live homepage to your mockup
if (window.location.path == '/' || window.location.path == '/home') {
  window.location = 'http://localhost:8000/homepage.html'
}

At this point, anytime the user visits the http://example.com/homepage they are redirected to your mockup. Learn more about targeting particular webpages.

For bonus points, you might replace parts of a page with an <iframe> that loads your mockup. For example, want to try a new footer on every page?

$('#footer').html('<iframe src="http://localhost:8000/footer.html"></iframe>)

Celebrate!

Now we have mixed the live site with just the parts of your mockup that make sense. The result is a much closer approximation of the new site without having to invest significant time in creating a huge mockup.



Do you have any suggestions for how to improve this (or any) documentation?
Send an email to support@labcoat.io