Responses by Jordan Gilroy, digital designer.

Background: The new site for Studio X, an interior design firm based in Hong Kong and Singapore, came about as many studio sites do—it no longer reflected the quality of work Studio X produces for its clients, and the site became increasingly difficult to maintain with outdated code. That’s when I was approached to create a stand-out design that was built in a scalable and maintainable way, future-proofing the site for years to come.

Design core: The site has a strong editorial vibe but with added personality through cute microinteractions and eye-catching animations. I’ve been looking for a project to apply this design style to for a while now, and Studio X was the perfect fit.

Favorite details: The detail I’m most proud of is the navigation. It can be tricky to design something unconventional that’s instinctive to use, but I think I achieved that.

Special navigational features: I love the dynamic call to action (CTA) in the navigation, which changes during page transition depending on what page you’re on. On the homepage, the CTA is “Contact.” But if you visit a project page, the CTA updates to “All Projects.” It keeps you moving in the right direction.

Challenges: One of the biggest challenges was creating a project page template that could apply to projects of different shapes and sizes. So, in the end, I decided not to use a CMS template at all but to create a static page instead with a series of components that could be added, removed, or duplicated to create a bespoke structure for each project, meaning the pages were tailored around the project rather than the project being shoehorned into a template.

New lessons: There’s a lot of learning in every project I work on, particularly on the development side of things. With this project, it was the first time I had used barba.js; getting my head around that was challenging at times, but it was ultimately rewarding and plays a significant role in the overall feel of the site.

Technology: I used Webflow to build the site, injected with a lot of custom code using vanilla JavaScript to bring everything to life, from GSAP animations to barba.js page transitions. I also leveraged resources from Osmo and Made with GSAP to bring ideas to life more efficiently and effectively.