Boston Dynamics: Redesigning to showcase innovation

Boston Dynamics, a groundbreaking robotics company, engaged with Isovera for a complete redesign and rebuild of their website. Tasked with an aggressive launch goal, the Isovera team utilized Pattern Lab and Drupal 8 to develop Boston Dynamic’s new site from start to finish in less than 10 weeks. Our focus on accessibility and performance paid off, resulting in a huge increase in overall website traffic, mobile usage, and access from a variety of devices and networks, and our innovative use of video showcases Boston Dynamic’s fantastic lineup of robots.

Tasked with an aggressive launch goal, the Isovera team utilized Pattern Lab and Drupal 8 to develop Boston Dynamic’s new site from start to finish in less than 10 weeks. Our focus on accessibility and performance paid off, resulting in a huge increase in overall website traffic, mobile usage, and access from a variety of devices and networks, and our innovative use of video showcases Boston Dynamic’s fantastic lineup of robots.

Pattern lab

Using a style guide like Pattern Lab allowed us to create patterns once and reuse them throughout the site. Since most pages use a configuration of patterns, this helped to accelerate the development process — as the site design evolved, it was easy to make changes in Pattern Lab and quickly deploy the changes sitewide. For larger organizations, Isovera’s work with Pattern Lab and Drupal is a game changer for seamless and consistent branding across multiple digital properties.

Autoplay video without the headaches

Auto-playing video in the background on a homepage is trendy, but extremely challenging from a UX perspective (think about load time, varying screen sizes, animation smoothness, etc). Isovera developers came up with an approach based on the concept of Progressive Enhancement. This meant starting with a background photo (which was well-optimized and would work in any browser and on any device), and only showing video if the circumstances were such that it would not negatively impact the user experience.

In this case, the biggest constraint we were concerned about was load time. We used a JavaScript library to test the connection speed of the site visitor’s device, and swapped out the photo for the video only if that speed was a fast enough speed to allow the video to load and play smoothly.

Another challenge was insuring that the video subject (a moving robot) was front and center on screen on multiple devices, aspect ratios, portrait/landscape mode, etc. This turned into a bit of a game of chess, but by tailoring the scaling and placement differently across a number of breakpoints, we were able to keep the robots in view and active on screens of virtually every size and shape.

Continuous integration for rapid iteration

Manually cloning, deploying code and rekeying configuration to test every new feature on a site can be extremely time-consuming. By offloading this work to a Continuous Integration (CI) service, the development team can quickly identify deployment dependencies, improve code quality and eliminate regressions.

There are a number of services that provide tools to foster successful continuous integration. For the Boston Dynamics project, we chose to use probo.CI because it offers baked-in Drupal support, and related tools such as Drush, Stage File Proxy and Apache Solr; this allows for a streamlined development process, as it cuts down on infrastructure expense and time. Probo. CI was chosen also because of the dedicated QA environments that it offers for each individual feature of a website, allowing for the site features to be tried out and tested. The site is rebuilt whenever a tentative change made permanent (a commit) is pushed, enabling rapid iteration and the ability to incorporate feedback from the design team and stakeholders. This gave our developers the flexibility to try new solutions and to demo their work early and often, thus improving our feedback loops.

Results

We’re very pleased with the end result (and happily so is the client), but it certainly does underscore the complexity of doing this well. From bandwidth to screen size, to orientation shifts to scrolling, there are a lot of factors that come into play. While we may not be in a hurry to do this on another project, we do feel it was the right design decision in this case, and backed it up with a very unique and robust technical solution. Check out the site yourself at bostondynamics.com!

Want to learn more?

Getting a website optimized can be a feat all in itself, but keeping a website optimized as technology gets increasingly advanced is another. At Isovera, we like to keep our clients and their sites up to speed through out support and maintenance program.