Responses by MOUTHWASH.

Background: We partnered with the team at online drugstore OEM to help design what the next step towards a future drugstore looks like. We directed our attention towards its website and focused on creating an experience that opens users up to multiple ways of experiencing care.

First and foremost, the site’s purpose is to sell products. While the primary function of the site was geared toward commerce, we entered the partnership with a shared understanding that care transcends simply buying a product. It is community, vulnerability, layered and textured, and can come in many shapes or sounds.

As such, we put a heavy emphasis on highlighting the personality of the brand through the digital experience. OEM has always been a community-forward initiative; both its founders are incredibly ingrained within the broader Los Angeles design community. Carving out space for journal updates from its team, community events like sound baths or dinners, and the occasional playlist come together to inform that personality, which can only be summed up as intentional and driven by care.

Through the site, our goal was to open up OEM to a larger audience outside of the design-oriented community that the brand has naturally built up over time. The site obviously has a distinct design language baked into it, so OEM’s original audience is never far away, but our main objective was to open up avenues of storytelling and product narrative to come in and play a larger role for the brand. Anyone can go to a corner drugstore and buy chapstick if they need it, but buying a lip balm from OEM feels different. Its formulas are more precise, ingredients are intentional and well-researched, and the packaging feels distinct and satisfying to hold. All these little details inform the care that goes into the product, and we wanted to open up those decisions to those who have a real desire to take care of themselves and others around them.

Design core: When we first started concepting the digital experience for OEM, we knew we wanted to explore how modularity can come in and influence the design of the site. Treating modules like windows, we wanted to define an experience that enabled users to peer into elements of the brand without having to be transported away. A portal into moments of care. A homepage you never really leave.

That core concept ultimately influenced how the site came to life and how we intended users to interact with it. As OEM is still in the early stages of its life, there’s so much for its audience to learn about and familiarize themselves with. We wanted to design an experience that fostered audience education without throwing them down rabbit holes they can’t get out of. Learning feels lightweight and second nature to the experience rather than something you have to go out of your way to pursue.

With modularity as a key feature of the site, it’s no surprise that the design elements are heavily UI inspired. We wanted to develop an experience that felt incredibly satisfying to navigate and soothing to explore, acting as a signal for where the brand is heading. You’ll notice the subtle use of gradients, a mixed-use of rounded and hard corners, and module overlays rather than page redirects.

While we could’ve just prioritized the shopping experience and focused on getting users from product to cart as quickly as possible, we believed that the transactional approach to OEM’s relationship with its audience would be more harmful than helpful in the long term. The site remains easily shoppable and is optimized as such, but it doesn’t allow that to come at the cost of worldbuilding or brand storytelling.

Favorite details: We find the microinteractions of the site to be some of the most exciting elements of what’s going on. Full-screen gradient takeovers for inactive users, logo animations on hover, breathing exercise modules and context-aware gradients that change based on time of day are all individual moments that really stand out and start to shape the personality of the OEM brand.

One of our favorite moments of the site comes on the shop page where we introduced a feeling-based filter for product search. The idea was inspired by doctor’s visits where you’ll constantly see emotion-based diagrams to help communicate how a patient might feel. We’ve never quite seen something like this done in this context, so it feels special to us. While being incredibly useful for finding products with specific-use cases, it also helps create a sense of relatability and empathy to those shopping. Being able to search for a product via ‘My body feels achy’ or ‘My skin feels dry’ is a deeply human moment for the brand to capture and be present for, so it was a real priority for us to work in to the shopping experience.

The content across the site is also something we were involved in and helped shape our work. Across the site you’ll find highly polished campaign photography, lo-fi UGC, futuristic renders, portraiture, and e-commerce product shots living together. While there’s a lot of room to go wrong in casting such a wide content-net, we find that the way these elements come together really shape the feeling behind the brand. It works because the content was produced at an exceptionally high level, and the experience doesn’t overrely on any one moment to capture that feeling of the brand. Rather, our approach is one that lets several moments wash over a user, giving them a lasting impression of what the brand is about.

Challenges: We mentioned earlier that our focus was on creating an experience that opens users up to multiple ways of experiencing care—be that an OEM product; a community event, such as a small organized dinner or a modular sound bath; or simply a curated ambient playlist for moments of meditation. When we were developing the site’s structure, we had a hard time understanding how those elements of care show up and in what capacity. Do they fall under one, larger category of care? Do we break them out individually? If so, is a playlist as important as someone looking for OEM’s menthol balm? Making sense of the role these various verticals of care play and figuring out how they can show up in support of the product—rather than in competition with—were two of the more challenging aspects of the site.

Because we opted for an approach rooted in modularity, the pieces quite literally fell into place. We choose to prioritize product not only because it’s the main function of the site to sell product, but we also believe the best way to experience the kind of care OEM is creating is by getting your hands on its formulas. Other elements help fill in the gaps, offering forms of care without necessarily needing to make a transaction. So, we were able to approach care from both angles.

You can feel this dynamic at play toward the bottom of the home screen or on the navigation menu overlay. The result is an experience that seemingly envelops users throughout their exploration, slowly wrapping them up in the various verticals of care that the new drugstore experience is all about.

Technology: The OEM site is built on Shopify as an e-commerce platform, using JavaScript, Tailwind, GSAP and CSS animations, and a reactive templating engine to make development faster and more efficient. At the beginning of this project, we weighed the pros and cons of headless versus native Shopify, and we ultimately felt that a native Shopify site was the right direction for the project. We felt that it could give us what we needed without overcomplicating the development stack.

We built a modular, grid-based component system using Shopify’s sections and blocks for the key storytelling pages to ensure OEM can evolve organically with the site, making sure to build with the future in mind. This modularity gives OEM the flexibility to quickly explore different layouts and combinations of storytelling, community and product moments.

We knew that in order for OEM’s site to feel as fluid and seamless as we envisioned, we’d have to spend extra time with the smallest details of the experience. In order for the site to feel the way it does we had to make sure that every image, video, microinteraction and page transition, among other elements, worked seamlessly in order to fully immerse people in the world of OEM. We used a mix of caching and prefetching strategies, responsive image optimization, GPU-optimized animations, and other micro-optimizations while building the site to make sure it was as performant as possible. We spent extra time with each interaction—constantly making minor tweaks to Bézier curves and experimenting with timing and speed—until everything felt right. It’s a constant balance of tweaking, experimenting, and making sure things feel smooth but still responsive and fast, and we’re really happy with where we landed.