Anh Vo
Brand Strategist
Table of Contents:
Project Overview
OSMOS is built around an unusual product proposition.
The Osmos Reset brings together a Peloid Mask, Mineral Soak and twenty-minute timer as one connected Protocol. Before a shopper can decide whether to buy it, they need to understand more than a conventional product page normally has to explain: what the system is, why the components belong together, where the mineral source fits into the story, how the Protocol is used and which purchase option makes sense.
That created the central ecommerce challenge.
The experience needed enough depth to make an unfamiliar product understandable without turning the store into a wall of explanation.
OSMOS already had its brand strategy and visual identity in place. UXphoria's role was to translate those foundations into the ecommerce experience through content strategy, information and purchase architecture, UX/UI design and Shopify development.
Platform: Shopify | New ecommerce launch
UXphoria scope: Shopify CRO and ecommerce UX, information and purchase architecture, homepage experience, product page optimization, product education, responsive and mobile UX, ecommerce content structure, Shopify development, premium digital art direction
Industry: DTC Wellness
The challenge: selling something shoppers do not already have a mental model for
Simple ecommerce products can rely on familiar category conventions.
OSMOS could not.
The shopper is introduced to a multi-part mineral Protocol, an origin story in Aragón, a defined twenty-minute usage window and several components that need to make sense both independently and as one system.
That creates several decisions before add-to-cart.
What exactly am I buying?
The shopper needs to understand that The Osmos Reset is not a single jar or bath product, but a protocol containing several coordinated components.
Why are these products presented together?
The experience needs to establish the role of the Peloid Mask, Mineral Soak and timer without forcing the visitor through technical detail immediately.
How does the brand's source story relate to the product?
OSMOS places substantial emphasis on origin, geology and the mineral source. That story needed to support product understanding rather than exist as disconnected brand storytelling.
How do I actually use it?
Twenty minutes is not incidental. The ritual and usage structure are fundamental parts of how OSMOS presents the product.
How should I buy it?
Subscription and one-time purchase introduce another decision layer before checkout.
The design problem was therefore not simply to make OSMOS look more premium.
It was to structure an unfamiliar proposition into a sequence a shopper could progressively understand.
Turning product education into a buying journey
Early content establishes what OSMOS is.
The next layers explain the source and the thinking behind the Protocol.
Product modules then make the individual components more tangible.
Purchase architecture appears once the shopper has enough context to understand what they are choosing.
Reassurance, usage guidance and FAQs continue supporting the decision deeper into the journey.
This matters for complex ecommerce products because adding information is easy.
Sequencing it is harder.
A shopper should not need to understand the entire science or brand story before knowing what the product is. At the same time, asking for a purchase before an unfamiliar proposition has been explained creates its own friction.
The experience therefore reveals information progressively instead of treating every message as equally important.
A homepage designed to build understanding before asking for commitment
The OSMOS homepage operates as more than a storefront.
It introduces the Protocol and gives the shopper a frame for understanding it.
The opening establishes the twenty-minute ritual quickly, before the experience expands into a more detailed story around the body, mineral source and product system.
From there, the journey moves through several layers.
Establishing the central idea
The hero gives the shopper an immediate product frame rather than starting with a broad lifestyle statement.
That first distinction is important.
Visitors need to know they have arrived at a specific product and protocol before they are asked to engage with the deeper narrative.
Making the source part of the product story
The Aragón source is given its own visual and narrative space.
Geological imagery, location context and the founder/source story turn provenance into something the shopper can see rather than a claim buried inside product copy.
The source story therefore supports differentiation while remaining connected to the commercial journey.
Explaining before expanding
Educational content is broken into visual modules rather than presented as one long technical explanation.
The page moves from a broad idea into progressively more specific information about the skin, source, product components and protocol.
This gives the shopper multiple points at which they can understand enough to continue without requiring every visitor to consume the same amount of detail.
Turning a protocol into products
Once the concept has been established, the store introduces the individual components and the complete protocol.
This transition is important because it turns an abstract system into something purchasable.
The visual hierarchy connects the products together without making them indistinguishable.
Reassurance closer to the decision
Guarantee information, user-facing proof, usage expectations and FAQs appear later in the journey, when questions are more likely to become barriers to purchase.
The intent was not to fill the first screen with trust badges.
It was to place reassurance where it becomes useful.
Product page optimization as decision architecture
The OSMOS PDP had the hardest job in the experience.
It needed to function as a product page, educational layer and purchase interface at the same time.
Instead of treating the PDP as a sequence of marketing sections, we structured it around the questions a shopper needs answered before committing.
This reflects UXphoria's approach to Shopify product page optimization: explanation, evidence, fit, risk and action work best when they form a coherent decision sequence.
Image alt: OSMOS Shopify product page showing product information, Protocol components and purchase options.
First-screen recognition
The upper product area establishes:
the product name
the Protocol components
product imagery
key usage context
what is included
purchase options
the next action
The shopper can therefore identify the offer before entering the deeper educational sections.
Making the complete protocol tangible
The PDP breaks the system into its main components:
Peloid Mask
Mineral Soak
Twenty-Minute Timer
Each is explained individually while remaining part of the same purchase.
This prevents the common bundle problem where several products are grouped together commercially but their relationship is never made clear.
Subscription without hiding the alternative
The purchase architecture separates recurring delivery from one-time purchase rather than making the relationship between the two ambiguous.
The shopper can understand that they are making a purchasing decision as well as a product decision.
For a more considered product, that clarity matters.
Subscription design should increase understanding before it attempts to increase commitment.
Moving deeper after the purchase choice is clear
The PDP does not stop once the buying controls are visible.
Further sections expand the OSMOS story through the source, protocol components, usage guidance and supporting education.
That gives high-consideration shoppers more information without forcing every visitor to process it before seeing the offer.
Designing trust without making the store feel clinical
OSMOS sits in a wellness category where explanation and trust matter, but overloading the interface with claims can quickly make the experience feel clinical or aggressive.
The visual system therefore carries part of the communication burden.
Dark product packaging sits against mineral, stone, water and skin textures.
Large editorial imagery gives the source and ritual physical presence.
Muted natural tones create a connection to geology without falling into conventional green wellness branding.
Product photography remains minimal and controlled.
The result is a store that can contain substantial product education while maintaining a restrained premium character.
This was an important constraint.
CRO does not require turning every section into a conversion widget.
For premium brands, clarity and persuasion have to work without destroying the perception that made the product desirable in the first place.
Designing the mobile journey rather than shrinking desktop
The mobile experience required a different rhythm.
On desktop, OSMOS can use wider compositions, simultaneous image and copy relationships and more generous editorial spacing.
On a phone, that same content becomes a long sequence of decisions.
The responsive experience therefore needed clearer compression.
We prioritised:
immediate product recognition
shorter first-screen explanations
clear separation between education modules
visible product and purchase information
scannable source storytelling
accessible product-component explanations
reassurance closer to the relevant decision
reduced competition between visual storytelling and action
The goal was to maintain the richness of the OSMOS story while making the small-screen journey easier to scan.
This is the distinction between responsive design and mobile Shopify CRO.
Responsive design makes a page fit.
Mobile CRO decides what needs to remain visible, what can be compressed and what must stay close to the buying decision.
One system across brand story, product education and commerce
One of the strongest parts of OSMOS is that the commercial experience does not feel separated from the brand story.
The source imagery, geological references, typography, dark product system, skin photography and ecommerce components all belong to the same visual world.
That consistency matters because the store has to perform several jobs simultaneously:
introduce an unfamiliar idea,
explain a product system,
maintain a premium perception,
and eventually ask for a purchase.
Rather than creating separate "brand" and "conversion" modes, the digital experience uses the same visual language across both.
UXphoria's role was to translate that product and brand context into an ecommerce system where storytelling could support the buying journey instead of interrupting it.
What shipped: a more structured digital product story
The proof here is the delivered ecommerce system.
OSMOS has a Shopify experience structured to carry a complex product story across the homepage, product page and responsive journey without reducing the proposition to a conventional wellness template.
The system gives the brand a clearer structure for:
introducing the Protocol
explaining its components
connecting the source story with product meaning
presenting recurring and one-time purchase options
supporting deeper product education
adapting a content-heavy experience to mobile
maintaining the existing premium visual identity throughout the buying journey
The strongest ecommerce experience is not always the shortest.
For a product like OSMOS, the better question was where each piece of information should arrive, and what the shopper needed to understand before the next decision.
See the Protocol in context
OSMOS is one example of UXphoria's broader approach to Shopify CRO for DTC brands.
We work across the connected buying journey, from first-screen clarity and product education to PDP decision architecture, mobile shopping behavior and purchase confidence.
When the main problem sits specifically on the product page, explore our product page optimization service.
When the friction is primarily happening on smaller screens, explore mobile Shopify CRO.
Need to make a complex Shopify product easier to buy?
If your product requires education, comparison or reassurance before shoppers feel ready to purchase, the answer is rarely to add more sections without a strategy.
UXphoria structures Shopify experiences around what buyers need to understand, trust and decide at each stage of the journey.
UXphoria designs and develops Shopify stores around those buying decisions, combining ecommerce CRO thinking with premium UX/UI and implementation.
