Case Study Boston Dynamics: Increasing site performance, accessibility, and homepage optimization
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.
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 site wide. 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.
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.
This article was originally published on our Isovera Project page.
