Responses by Adam Luptak, technology director, Rally.

Background: The GlobeKit site is the primary destination for people to learn about Rally’s GlobeKit product. The target audience is anyone who might want to include a 3-D globe in an interactive product, from executives who might be excited at a high level about the possibilities, to designers and developers with specific questions about how GlobeKit could work for them.

Design core: The primary design element is obviously the globe, which we used to demonstrate the breadth of what GlobeKit can achieve. We built a layout and interaction framework that would support this visual diversity while giving users a sense of consistency. Ultimately, we paired six different globe visualizations with different background and text colors well suited to each one. A paginated long-scroll tells the story of GlobeKit while showing off what it can do.

Favorite details: First and foremost, we’re proud of the visual polish on each of the globes, delivering six distinct, beautiful globes. We’re proud of the background noise effect that helps visually separate each page of content while enticing users to scroll down the page. Another priority was handling the callouts on different globes in unique ways, using bounding and location-sensitive positioning techniques to create a dynamic experience that remains legible and usable. We’re very pleased with the animations in the interface, such as hovers and panel transitions. Finally, we’re proud that the site is as performant, usable and beautiful on mobile devices as it is on desktop.

Challenges: Creating an experience that balanced visual fidelity and usability with the constraints of load time and performance. We’re used to creating one globe per site with GlobeKit, and the challenge of creating six within a single site—and managing that experience—created some new hurdles for the team.

New lessons: As we approach the 1.0 release of GlobeKit, creating this website with many different globe treatments proved an invaluable dogfooding experience for the team, enabling us to think more deeply about how to take disparate features we’ve used in one-off custom globes and wrap them up into a cohesive package.

Navigation structure: We wanted to create a simple, single-page long scroll where users could quickly learn about the capabilities and value of GlobeKit. We used slide-out panels to provide more information, both a sort of FAQ style of providing more detail as well as expanding on our style and data approaches on each globe. We wanted to achieve the marketing objective of GlobeKit as simply as possible, enabling us to expand with more pages in the future.

Special features: Since the experience is primarily a long scroll, we used the menu to feature the different sections of that scroll, surfacing the different globe visuals and enabling users to quickly jump to different sections.

Technology: Front and center in this experience is GlobeKit, our proprietary globe visualization platform. GlobeKit is powered by Web Assembly and WebGL. The site was built in Gatsby, leveraging JSX, ES6 and SCSS.