Get in touch!

How might we drive demand for your business?

Camelbak Custom Print // CASE STUDY

Designing a Vertically Integrated Experience to Drive New Revenue

CamelBak, the worldwide leader in hydration, continuously reinvents how adventurers, athletes, and our nation’s military fuel performance. As a longtime partner of DS, CamelBak collaborated with us to consult, design and develop from the ground up, a new, vertically integrated, custom print bottle experience that could support a wide range of printing options for both B2B and direct-to-consumer audiences, with the aim of reducing complexity and lowering the cost of maintaining a third party platform.

THE CHALLENGE

CamelBak required an accelerated time-to-market launch in order to capitalize on new sales opportunities that would be unlocked by new SKU rollouts, as well as the ability for end consumers (a new segment for custom printing) to customize and print their own bottles. Previously this was only possible for B2B customers with larger minimum quantity orders, however, new printing technologies adopted by CamelBak would now allow for printing down to a single bottle. A key hurdle for DS to overcome was how to create an experience that would integrate end-to-end with these new printing technologies, as well as the existing e-commerce build, enabling purchase-to-print capabilities.

OUTCOME

Working closely together, we were able to design a fully customizable and flexible application that streamlined the purchase-to-print process, saving tens of thousands of dollars per new product rollout, as well as ongoing subscription costs over their previous closed-system platform. Our solution is ultimately much less expensive to maintain, while simultaneously offering more robust features and functionality. This would entail designing and developing a bottle customization engine, payment processing functionality, as well as automated export of print-ready prepress files, such as fonts and artwork generated on the fly from the online experience directly to the print facility. All done at speed, and with mobile support too.

Creating the Core of the Experience

After defining our key personas and respective user tasks, we defined primary and secondary user flow diagrams that would define the heart of the experience and allow us to optimize how each persona would flow throughout the app, from first steps to customization to payment, in a natural and easy to use manner. Through high fidelity wireframing, we defined and visualized every screen and interaction state needed for each piece of the application and how each component would ultimately interact with each other, frequently prototyping and testing throughout the process to uncover user experience issues and make improvements to the overall experience.

Creating a Flexible Design System and User Interface

Next, we implemented a design system that could effectively scale with the introduction of new products, new customizable graphics options, as well as new fonts and colors, as the experience would further be expanded upon in the future. We focused on making each aspect of the application as simple and intuitive as possible, with the help of clear and consistent iconography and an easy to understand navigation scheme. To improve conversion rates, a key objective was to design a minimal experience free of visual distraction with each customization option readily and easily accessible without the need for user scrolling or digging through endless menus. We implemented a single viewport experience that works across multiple device resolutions giving the user access to all necessary features and functionality.

Optimizing for an App-like On-the-go Experience

Finally, we extended CamelBak’s digital design language and crafted the necessary user interface components to set the foundation for building a fully responsive experience. For mobile users, a key user type as CamelBak desired the ability to captivate users on the move, we created a fully responsive app-like experience optimized for smaller screens, placing key navigation elements at the bottom of the screen creating a mobile use pattern that users would be familiar with. All customizable elements are accessible with a simple tap.

Thanks!

Message received. We’ll be in touch as soon as possible.

Let’s work together.

Related Work & Insights