Responses by Lukas Kmoth, product designer.

Background: The purpose of the new website was to elevate ThoughtLab’s rebrand with the ultimate goal of scaling the creative service agency and highlighting its best work. It also functions as a hub of exchange for portfolio pieces, blogs and company information. Overall, the new site showcases ThoughtLab’s design work in an immersive, innovative way with the goal to excite and attract new clients and top talent.

Design core: Two essential components elevate the site and help it bring a fresh experience to users as they browse through projects. First, a custom typeface built by Brijan Powell gives ThoughtLab a cutting-edge appeal. The heavy contrast on the page lets the typography breathe and guides users through the website’s different stages. Second, the page layouts and UX design built by me form an immersive experience throughout the site. The goal was to provide a second layer that functions as a way to navigate between pages and let visitors glimpse into projects. Animated by Diogo Louro, a responsive blob in the site’s background leads the user through projects, company information and blog posts.

Challenges: Louro’s responsive bubble or “blob” is a legacy carryover from the history of the ThoughtLab brand. One of the biggest challenges was having this element be consistent across the entire website while also not straying too far from the brand identity. Ultimately, this element makes a major impact on the site and speaks to the innovation at the heart of the design firm. While there were some obstacles in implementing the idea, it’s satisfying to honor ThoughtLab in a unique way.

Navigational features: Select navigational elements inhabit the interactive blob. It was a deliberate choice to make sure this core element formed part of the actual user navigation experience instead of just a neat trick.

Technology: To create the site, we used different programming technology for the back end and front end. For the back end, we used Prismic CMS and the static-site generator Eleventy. The front end is built with plain JavaScript with three.js and GSAP being the main dependencies.

Special technical features: We’d love to acknowledge the unique technical features of the interactive blob. For its development, we used ray marching to create the dynamic animation. The transparent look was achieved by re-creating certain text elements in WebGL. The real difficulty was syncing the animations between the DOM and WebGL elements, so we’re ultimately thrilled with how it turned out.