V-7.4.0.1 SITEMAP.XML

 Master Demolition Inc. Website

Web development and design work for a Los Angeles Demolition Company. This started as a small promotional site and over time the site progressively became a full-fledged web-app.

First rough sketch

MasterDemolitionInc.com started as a simple landing page for converting AdWords customers. Over time, the site gained more traffic, and as a result, more business. Thanks to all this new work the pictures and data-sets I had to draw from grew, and so did the site.

On the left you can see one of the original concept designs for the site, later more detailed versions would be made up in Photoshop.

Desktop homepage mockup in Adobe XD

Here you can see some more fleshed out designs, and a clear plan for an app shell architecture that would ensure visitors would not have to wait long before seeing pixels on screen.

Mobile homepage mockup in Adobe XD

At it's core we wanted the site to have service pages describing the work, a contact page for general inquiries, a guided quote form, image gallery, and blog detailing the ongoing projects.

One of the main elements of the design was a large above-the-fold slideshow. Here you can see how this was done for for both mobile, and larger desktop screens.

The soft fade between slides is subtle but eye catching. Personally I'm not a big fan of slideshows that actually move large elements across the screen, and in context with the rest of the design it really would have been overkill. The more delicate approach used here allows you to focus on the imagery and highlights the changing text.

The call to action at the bottom of the slides is where the real eye catching fun came in. An expanding button (or bar on smaller screens) would display text relevant to the current slide, and clicking on it would take you to the appropriate service page. This button is immediately noticeable upon first page visit and it's quick playfull movements contrast greatly against the peaceful slide transitions.

This combination of movement was directly influential in that button being one of the most clicked items on the entire site, serving its purpose exceptionally well.

Once the core functionality of the slideshow was nailed down, the next step was to optimize it's delivery. First, the code was reworked a number of times in order to get the imagery on screen in under 500ms.

Secondly the whole section was hidden by default and only displayed after an onload hook on the first image. This ensured that the whole object came on screen at once, rather than seeing pieces of other slides pop in below. The result is much more eye catching and professional looking.

A few iterations of the spinner design. It was important to have a way to show things were loading and it presented an opportunity to reinforce the branding.

Tweaks were then made to the diamonds personality by varying its stroke width and the way in which it would move. One of the first animatics included two diamonds rotating in opposite directions with some interesting clipping effects. While it was a fun look, it took away from the immediate connection to the logo.

In the end, the more plain, spinning diamond was the clear choice. The custom bezier timing of the animation was directly influenced by the Material Design Motion discussed at length during the Chrome Dev Summit in 2016. The speed and timing are intended to give a sense of tangibility to the spinner as if gravity were affecting its movements.

Further along down the homepage design are two blue "cards" which showcase the company's different services. The work is split between commercial and residential services, thus the two separate cards. The imagery and the text layout were carefully designed for optimal legibility at all screen sizes. Not only affecting flow and text size, the images themselves would swap out at a number of breakpoints, ensuring that the user is never downloading larger images than they need for their particular screen.

Moving to a new page within the app shell architecture meant that all child elements would need to be removed and new ones filled in. This was done by fading out each "section" and removing the node once it was invisible. The elements were removed in reverse order up the page with a 30ms delay between each removal. This in combination with a smooth scroll back to the top made the effect. The items fading-out leave just a little faster than the time taken to scroll all the way up. This left the whole page free of visual elements while the browser performs its most taxing reflow calculations. This moment of a blank canvas helped make it clear that you were moving to a new page without too many things moving around and becoming overwhelming. This design minimizes repaints while at the same time gives clear and comfortable indication of moving to a new page.

Deeper into the site is the gallery page. Here all of the photos and videos from the company's previous demolition projects are shown off. The image here shoes a work in progress effort to fetch the images, where you can see each photos json data being pulled in and immediately echoed out. This was done along with an overall reference json file which let the parser determine the number of image containers to build before a single jpg request gets sent out.

Building it this way meant that when the image loaded and fades in, there is only a repaint incurred on the container element, and no visual re-flow ever has to happen. Additionally it gives the user a very clear indication that a large amount of content is on the way in a more explicit way than the spinner animation would accomplish on its own. This perceived performance benefit was absolutely crucial for such a massive library. Additionally each image object included an array of srcset's to further speed up the real load time. Finally the spinner. On all other pages it exists while the content loads and fades out when it's all done. In most cases that's a only a few seconds and provides a comfortable distraction from having to wait. But here on the image library the "finished content" event would only fire once every image was added, and would ultimately be up to 20 seconds before it disappeared. This made the page feel slow again so something had to change.

The solution was, that on parse of the reference file a script would quickly take into account the devices screen size and calculate the number of images needed to fill up the "above the fold" area. A counter callback on each image load would then check if this threshold was reached and remove the spinner when the user had a full page ready to interact with. This again optimized the perceived performance of the page and gave the user clear indication that they were free to start clicking and opening images.

One of the final big constructions of the site was the guided quote page. While a simple contact form would suffice for lead generation, this enhanced experience made data collection significantly easier.

Instead of a customer having to assume what project details would be needed by the estimators the site guides them through the process. This reduced the need for additional follow up calls to gather additional data, optimizing the call centers time usage.

Metadata

Keywords: blog, custom cms, demolition, image gallery, master demolition inc., offline-first, pwa, quote calculator, service worker, web-app