Camelbak Custom Print // CASE STUDY
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.
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.
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.
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.
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.
From an engineering standpoint, creating a snappy and highly performant application was an important goal, but so too was minimizing any potential discrepancies during handoff between the digital and physical realm. To ensure this experience was flawless for the consumer, we made precise technology choices that helped us meet this challenge and achieve continuous customer satisfaction and purchase.
React was an obvious candidate for this application. Custom Print is a highly interactive and stateful application and React excels at making it as painless as possible to create the complex user interfaces this application required.
We chose Next.js because it provided us the tooling to rapidly produce a functional UI and integrate with our surrounding code environment. The majority of the CamelBak website is built in a C# environment, but using the Next.js static HTML export feature we were able to run the custom print app as a standalone static app without the need for a Node server.
Customers needed to be able to drag, resize, and rotate designs. Using SVG to construct custom designs allowed us to perform these actions while maintaining scale and preventing a loss in resolution. It also minimized complexity when having to reconstruct a customer’s design from scratch based on state.
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.
Message received. We’ll be in touch as soon as possible.