Boston Dynamics: site performance, accessibility, and homepage optimization

Project Timeline

For the Boston Dynamics project, an aggressive deadline was presented giving the team a short span of time to create a new website. Isovera was able to meet this deadline by using highly collaborative and iterative workflows, allowing for projects to undergo multiple tracks of work simultaneously. By using an iterative approach in which design and development overlap and each stage of production receives a lot of feedback, Isovera was able to develop, design, and launch Boston Dynamic’s new site in less than 10 weeks.

Challenges and Solutions

Autoplay Video Without the Headaches
Auto-playing video in the background on a homepage is trendy, but extremely challenging from a UX perspective due to factors such as load time, varying screen sizes, and animation smoothness.
Isovera resolved the challenge of a autoplaying video homepage by taking an approach based on the concept of Progressive Enhancement; JavaScript library was used 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.
To address the issue of animation smoothness and varying screen sizes, Isovera tailored the scaling and placement differently across a number of breakpoints, and was able to keep the robots in view and active on screens of virtually every size and shape.

Pattern Lab
Isovera was tasked with an aggressive deadline for a new site launch, and needed to be able to produce sites quickly.
Using a style guide like Pattern Lab allowed Isovera 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.

Continuous Integration for Rapid Iteration
Manually cloning, deploying code and rekeying configuration to test every new feature on a site was extremely time-consuming.
By offloading this work to a Continuous Integration (CI) service, Isovera’s development team could quickly identify deployment dependencies, improve code quality, and eliminate regressions. For the Boston Dynamics project, Probo. CI was chosen 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 commit is pushed, enabling rapid iteration and the ability to incorporate feedback from the design team and stakeholders. This gave developers the flexibility to try new solutions and to demo work early and often, thus improving feedback loops.

Work Impact

As a result of the project’s focus on accessibility and performance, a number of benefits were seen. The site saw an increase in overall website traffic, mobile usage and access from a variety of devices and networks. The innovative use of homepage video showcasing Boston Dynamics’s lineup of robots gave the site a fresh new look, supporting their acquisition to new ownership.