The Power of Before and Afters

Before and after pictures convert well because people love a great success story. Before and after photos create some social triggers that help you convert interest into sales. They persuade the prospect that your product can deliver results for them.

There are many ways that before and after photos are beneficial to selling products and services. There are a number of ways to present those before and afters, depending upon the effect you’d like to accomplish.

1. Side-by-Side with Stats

One of the many advantages of using before and after photos is to show just what a product can do to dramatically change that person’s life. For products that promote weight loss or beauty, showing such a dramatic change can help you convert visitors into customers quite easily.

One way to show a dramatic change is presenting the photos side by side. Adding statistics in the margin add another level to the impact of the change.
before and after

A good example of before and after photos laid out this way and showing a dramatic change can be found at Beach Body’s website. This company sells exercise videos and wellness products with the intent of helping people lose weight and get fit. What better way to show this than by offering some before and after photos to show people’s transformations?

2. Showing a Transformation with Slides

Some companies offer a variety of services that can be difficult to show to a potential customer. For example, if you are an interior designer or contractor, how do you get your message across when you can’t define a service that changes with each job?

This is where before and after pics come in handy for a service business. You can show a house before it was remodeled and then a house after the renovation. This will show the potential customer quite clearly what type of results she can expect from hiring you. Allowing the visitor to scroll through images that alternate between before and after has a strong impact.

One example of a good before and after model for a service business can be found on the site for HGTV’s popular show Property Brothers. The show features twin brothers who help people find a home in the neighborhood of their dreams but with a house from your worst nightmare.

property brothers

property brothers 2

They remodel the home and make it look updated and beautiful. They share some before and after photos on HGTV’s website. You simply click through the slideshow to see before and then after of several projects. Below is one before and one after to show you how it works.

3. Showing Side-by-Side Comparisons

Another option is to show before and after side by side, but allow the user to slide back and forth with arrows so that she can view the results without and with the product. By adding an interactive feature, the site visitor becomes more engaged.

side by side comparison

Take a look at Clopay’s website. The company sells garage doors and offers an image of before the new door and after the new door. Click on the slider to scroll back and forth between before and after. This gives the customer a real feel for how dramatic the transformation can be. The image slides fluidly without any hesitation, which creates a seamless experience for the user.

4. Side-by-Side Plus a Slideshow

One way to show what a product does is to present the views side-by-side but also put them into a slideshow. This allows the user to scroll through comparisons of different types of treatments. This type of presentation works well for dental offices that might offer a number of different services that impact your overall appearance.

side by side slideshow

One example of this type of before and after presentation can be found on WebMD as they run down different types of cosmetic dental treatments and the results. Note how the slideshow features a side-by-side on each slide. You’ll find examples of the results of using braces, teeth whitening, bridges, bond and many other dental treatments.

5. Side-by-Side Run Down

Another option is to offer side-by-side before and after photos running down the page and showing different people or objects. This is effective to show long-term results or to highlight how dramatic the difference between before and after really is.

side by side run down

One site that does this really well is Bored Panda, with their before and after sobriety photos. As you scroll down the page, you see different people, a heading stating how long that person has been sober and a photo of before sobriety and after. The difference in appearance is striking.

6. Top and Bottom

Another option for before and after photos is to show them one on top of the other. This works particularly well for photos that are wider than they are tall. The way that you lay out your before and after photos could likely depend upon the size and shape of those photos, so this layout just gives you another option.

top and bottom

You can see an example of this at Gencept. Notice how the after horizontal photo of the woman sits on top of the before photo. This has a dramatic impact because of the shape of the original image.

7. Before and After Video

One way to show your before and after images in action is through a video display of the images. Consider a product where you are changing something with the product. You can clearly show this by taking video of the process and sharing with the viewer.

before and after video

One example of this technique is seen at Photography Concentrate. They show the process of using Lightroom software to enhance your photos. The video allows the user to see exactly how the software works. Further down the page are more examples of before and after one on top of the other.

There are many different ways to feature before and after photos. Adding a video to a landing page can improve your conversion rate by 80%, so consider working that into your before and after pages when possible.

No matter which method you use to show before and afters, know that it is a powerful testimonial that will help sell your product or service.

Lexie Lu

Guest Blog Author: Lexie Lu

Lexie Lu is a freelance UX designer and blogger. She keeps up with the latest web design trends and always has a cup in close proximity.

Get started with everything you need to know about developing a website. Download My Free E-Book

Our Before & After Designs

Look at what a difference a website redesign makes!

internal computer services old Before
internal computer services new After

- Before and After -