Gezeiten
Gezeiten is a cutting-edge scientific skincare brand, creating innovative products out of Germany by combining nature with the latest technology.
Website
gezeiten.com
Status
Completed 2024
Services:
- Website Design
- Website Development (custom Shopify)
- UX / UI Design
- Information Architecture
- 3D / CGI / Animation
Before
Drawing inspiration from the tides of the sea, Gezeiten’s formulas work with the body’s natural rhythms of protection and renewal, rooted in chronobiology and marine biotechnology. A counterpoint to overstimulation, the brand's visual aesthetic is calming, beautiful and otherworldly.
When the brand approached us to reimage their digital storefront experience, they had all the beautiful visuals but navigating the website was quite difficult. All the information was out on display with centered text, and due to the lack of typography hierarchy it was simply easier to look at the pretty pictures.
The challenge
Our challenge was to immerse the viewer into the marine-inspired world of Gezeiten, enticing them to explore the brand’s beautiful aesthetics and marvel at the award-winning product design of their hero cream “The vessel”, while structuring the information and purchase flow, offering many opportunities to educate the viewer through the extensive information and product science available, while enabling them to checkout with ease.
The Solution
We designed and built a completely custom and immersive shopify experience taking the viewer on a marine journey into the world of GEZEITEN while enabling them to effortlessly explore in 2 languages, shop in 4 currencies and go from browsing to shopping in 3 clicks.
To additionally differentiate by chrono-phase and visually educate the viewer about the natural rhythms of the skin, we created 3 custom gradients and scripted them with CSS so we can apply them as a background to any product transparent PNG and further animate smooth transitions between them without heavy JPGs weighing down the page. These gradients were further extended in the product photography.
The typography is simple, small and clean with large letter spacing and line heights to insert a sense of elegance, and large text sections are gently hidden in accordions with soft open/close animations.
Information Architecture
We avoided overwhelming mega-menus and paired back the navigation, tucked away in 3 sections to gently guide the viewer to the desired page. Menu and cart drawers were used both in mobile and desktop to unify the experience and offer the truncated navigation that mobile provides, on desktop.
The cart is clean and structured, offering unified opportunities to upsell by replacing single products with their bundled counterparts in a single click, and offering “complete the routine” options directly within the cart. Each product displays the corresponding chrono-phase and all thumbnail gradients are scripted. A custom-coded shopping dashboard with extended functionality, No apps used.
The Solution
We wanted to feature an interactive element high up on the home page introducing the viewer to the entire product range (as it’s quite small) and the concept of chronobiology which underpins the entire brand, and enable them to go from browsing to shopping in 2 clicks.
We created a custom horizontal carousel using transparent product PNGs stored in metafields, and CSS scripted gradients which elegantly transition in the background based on the chrono-phase of the product in view.
3D modeling and animation
We modeled the hero cream “vessel” in 3D. After many iterations we managed to perfectly texture the two different lines (Intensive Anti-aging and Liquid Skin) in both night and day. Using the gradients as a backdrop, we animated the open / close action including the refill pod, and connected them to a playful scroll-based animation on the PDP.