Responses by ET Studio.
Background: The website serves as both the shop and the main informational hub for vitamin and supplement brand MOOOOR, enabling visitors to explore product benefits, ingredients and reasons to choose these products. Since there are no physical stores, the website is the primary and final touchpoint for customers.
Design core: The MOOOOR website is based on the central concept of the circle shape, which evokes the image of the pill. This shape becomes the thread that runs through the entire design from the interface to the animations, creating a visual, symbolic connection that communicates the purity and effectiveness of the products.
We designed the MOOOOR experience down to the finest detail, from brand identity to e-commerce development to packaging design. The website represents the final step in a cohesive journey, where every visual and interactive element was crafted to embody the brand’s philosophy.
The interface is built on a pure, natural and complete aesthetic with a carefully curated color palette, smooth transitions and stylistic choices that communicate a clear message. The use of organic textures and layered visuals reinforces the connection to nature and the authenticity of the product, making the website an extension of MOOOOR’s identity.
Favorite details: One detail we are most proud of is the real-time generative animation, which evolves as users explore the site. This reflects the organic essence of the project, ensuring that each interaction feels dynamic and unique. Additionally, the fluidity between sections and the way text and images gradually unfold creates a captivating rhythm that enhances engagement.
Challenges: The biggest challenge was bringing MOOOOR’s identity to life in digital form, seamlessly blending storytelling, design and functionality into a cohesive experience. We started with an abstract concept and translated it into a visual, interactive ecosystem that conveys the brand’s natural essence. The real challenge was striking the perfect balance between aesthetics and usability, ensuring an intuitive interface without compromising strong visual impact.
Another challenge we overcame was managing a large amount of text content, which was important for the brand’s marketing without making the user experience too heavy. We found the right balance, ensuring that the text didn’t interfere with the design or disrupt navigation while keeping the experience fluid and enjoyable for the user.
Time constraints: Time constraints were well-suited to the project. The initial phase was the most demanding, as we needed to precisely define the brand’s identity and narrative tone before moving on to digital design. Once this direction was established, the process unfolded smoothly through close collaboration between designers, developers and 3-D artists, following a shared, well-orchestrated approach.
New lessons: Throughout this process, we deepened our expertise in generative design techniques, advanced transitions, and the seamless integration of branding and digital experiences—all pushing the boundaries of interactivity within e-commerce.
Navigation structure: The navigation was designed to be fluid and immersive, guiding users through a seamless storytelling experience. There is no rigid structure—everything is built around smooth, dynamic transitions, which lead users from one section to another without disruption.
A distinctive feature is the nonlinear flow, enabling a more natural and free exploration. The interactive cursor and microanimations further enhance the sense of discovery, creating an engaging, sensory-driven experience that perfectly aligns with MOOOOR’s essence.
Technology: The MOOOOR website is built on Shopify but doesn’t use a standard theme. Instead, it leverages Hydrogen, Shopify’s official headless framework for React. This choice ensures complete creative freedom over animations, page transitions and the design system, while seamlessly integrating with Shopify’s analytics, cookie banner and content management features.
All editorial content is managed directly within Shopify via metaobjects, eliminating the need for an external CMS. For animations, we chose Framer Motion, thanks to its spring-based physics, delivering a dynamic and fluid experience—perfect for a vibrant, pill-inspired e-commerce!