Responses by Steffen Christiansen, creative director, Jam3

Background: The site serves as the main promotional component in the announcement of Postmates’s new delivery rover: Serve. The main target audiences are users within the tech industry who work with robotics or have an interest in the field.

Highlights: The site is driven and designed around a narrative, telling Serve’s delivery story as it journeys from A to B. Each section highlights a different feature of the device, while all also tying the story together. The most crucial part was the collaboration between UI/UX and motion. The design doesn’t function if presented in a static state, and we conceptualized the entire page using motion from the very first sketch.

Challenges: The timeline. We had eight weeks to get the site live, but we wanted to do something more interactive and cohesive than your average product site. Our collaboration between design, motion and development was absolutely crucial.

Favorite details: The moment where Serve is seen in profile driving down the street. We were limited to using static imagery to keep loading times down, yet it was crucial that everything looked realistic. By using a wide image and utilized parallax, we could create an illustration of Serve moving down the street, while using static images. The key was to move the camera fast enough and away from the object.

Navigational structure: The client wanted a one-page scroll experience. So, we put our focus on working with that paradigm and gave it as much story as possible, while still presenting the necessary features. We also used the scroll indicator to help support our narrative by designing it as a delivery indicator, similar to when waiting for an Uber or food delivery.

Technical features: We used react-static for the framework and GSAP for the animation. As we wanted the animation to play through the scrolling, we tied the whole height of the browser to a timeline, and played them based on the window position. Since we also needed the smooth animations to have transparency, we used image sequences. We loaded one of every four frames to begin the site, and then subsequently loaded in the rest.

Anything new: Web browsers are empty interactive windows. If you think of a website as long static image, you miss out on the opportunity of making an engaging experience that fully utilizes the medium.

Alternative approach: Creating a variety of clay renders before even starting to storyboard would have helped us solidify some of the product’s best angles earlier.