Outside In
- UX/UI design
- Shopify development
Outside In is a curation of high-performance makeup and skincare. Clean, conscious formulations inspired by the world of nature and light, designed to illuminate, enhance, and transform the skin.
This new brand needed a Shopify site to coincide with its debut collection—and a digital presence that could compete with the biggest names in premium beauty.
The challenge
Launching into a saturated market with a brand still finding its look and feel, we needed to create something visually bold but quietly considered. Taking Outside In's new brand book and packaging as our creative cue, our goal was to create a seamless e-commerce experience that centred around a shade finder: an interactive tool that gave users the confidence to shop their perfect shade, entirely online.
Our approach
We translated the brand’s positioning into a digital direction rooted in photography, language, and texture—all shaped around the themes of light, reflection, and nature. Rather than following the familiar beauty brand playbook, we pushed towards something more editorial and fashion-driven. Bold, minimal, and impactful—a digital experience that would hold its own online and complement the physical stores Outside In planned to open post-launch.
Design
Clean lines and layouts
We explored a range of layout directions, each with a distinct character. Some introduced experimental UI elements that broke the main grid for a more editorial, fashion-forward edge. Others leaned into a line-based structure, where horizontal rules held the whole page together. We settled on the structured, grid-led layout—the strongest foundation for the visual language we were building.
Design
Grounded in glass
We introduced a glass effect—a direct echo of the brand's platform, Experience Light. Layered over editorial photography, it added depth and a sense of dimension completely native to the brand. Minimalist typography kept the experience grounded, while a clear grid system gave it structure. Our favourite detail: the floating CTA on the product page—unconventional enough to feel editorial, functional enough to disappear into the experience.
Motion
Calm by design
Every animation decision was made with restraint in mind. Rather than layering on movement, we let full-bleed imagery do the heavy lifting—smooth, calm animation primitives keeping every interaction consistent and considered. Subtle parallax, considered hover states, and quiet micro-interactions add just enough life without pulling focus from the product.
Shade finder
Shop every shade, confidently
We built a single product page housing every shade, with Shopify variant metafields centralising all variant-specific data and imagery. As users scroll through the full-screen shade carousel, the entire page updates—imagery, product details, and the active cart variant—all in one fluid motion. The add-to-cart module lives fixed on the page, quietly morphing into and out of the carousel controls as users scroll, before releasing once they near the footer.
For users who needed more guidance, we integrated a third-party shade-matching service directly into the page. A pop-up prompts them to reference shades from brands they already use, automatically selecting the right variant and updating the page—so by the time they hit add to cart, their shade is already there waiting.
Working with Series Eight was a pleasure. Their expertise and dedication to the project was so impactful. This site build was complex, yet Series Eight made it feel simple. The team was kind, attentive, and so passionate about what they do!
Director of Marketing, OUTSIDE IN
Recognition
- AWWWARDS
- Honourable Mention