Responses by Matt Pilkington, cofounder, Superrb.
Background: The Joonbyrd website is a digital flagship store designed to launch its innovative range of beauty and wellness products. It also forms the central hub for visitors to learn about the brand through a joy-infused immersive experience.
Larger picture: The site launch was Joonbyrd’s debut. Due to the industry profile of founder Dr. Alexis Granite and the disruptive spirit of the brand, it attracted a lot of PR interest right off the bat. There was a big press launch, as well as Joonbyrd-branded taxis driving around London delivering samples.
The website is Joonbyrd’s window to the world, both to position the brand as well as showcase its products and skincare expertise. Alexis has assembled an amazing team behind the brand who are working with us to roll out an ambitious roadmap of features over the coming months.
Design core: The brief for this project was to inject joy and fun into the beauty and wellness category, so the brand is a real melting pot of nostalgic and playful imagery, and the animations and transitions are designed to create an immersive experience for visitors. Diverging from the crowd ,we actively avoided using lifestyle photography in favor of psychedelic, slightly surreal imagery that makes shopping feel like a journey of discovery where you want to delve deeper and explore the site—a bit like Alice peering down the rabbit hole.
Favorite details: The way we were able to blend the immersive front end that combines video, animation and unusual transitions with a highly customizable back-end theme that enables the Joonbyrd team to manage all the day-to-day store operations themselves, with granular control over the configuration of each page and its specific color scheme.
Challenges: Balancing brand storytelling, whimsical maximalism and a solid e-commerce experience that would convert sales. We spent a lot of time mapping the user journey, wireframing and prototyping before developing the final design. Since launch, we have been rolling out a number of new features to maximize conversion rates and average-order value.
Time constraints: This was a bit of a dream project in many ways, and to have a client with a mindset of “rather right than rushed” was refreshing and gave us the space and time to finesse the build—which is probably one of the reasons I’m writing this interview today.
Alternate paths: Due to the visual complexity of the build and the attention given to every tiny detail, phases of releasing templates in small batches for client QA would have enabled us to pick up on some more macro issues such as scaling, margins and font sizes earlier in the build. This would have made it less work to make these sort of global style changes “in-build” rather than at the end when there were lots more templates to test.
New lessons: To deliver such a rich and flexible front end, we really expanded our knowledge of Shopify’s content management capabilities, particularly the use of video.
Navigation structure: As this is Joonbyrd’s brand debut, we wanted to keep the user experience focused on immersing visitors into the site. So, we opted for a burger navigation to keep the header clean. With an extensive roadmap of new products and features being added over the coming months, this style also enables us to expand the sitemap without needing to make fundamental changes to the navigation.
Special navigational features: We subtly integrated bundle and subscription upsells as part of the shopping journey and provided the ability to highlight featured products in blog articles. These gently guide visitors towards higher conversion goals.
Technology: The website is built using Shopify with a totally custom front-end theme. We worked hard to integrate as many of the features within the theme itself to reduce the site’s reliance on third-party apps, which we found slowed down the load speed considerably.
Special technical features: We chose the way we load content on the front end using fades and parallax to create a dreamlike, comforting experience to make visitors feel at home, as well as wanting to keep scrolling to delve deeper to explore the site. The product detail pages, like Moon Swim, are very rich with some technically complex features such as the key ingredients, charm cross-sells, joy factor and clinical-results carousel. When you throw in that the client team can pick all the colors on a page-by-page basis, this translated to the site needed a lot of testing and QA.