Intro—Project Overview
Company
Trove Brands is an e-commerce group that owns and operates multiple e-commerce brands like Blender Bottle, Canoo, and Oath Nutrition as well as the award-winning brand Owala®.
Owala® is a leading water bottle e-commerce brand that is known for its innovation.
Objective
Integrate a 3rd party customizer into the Owala site that allows customers to personalize their water bottles.
My Contribution
As the Principal UX Designer I did all the research, design and project management for the development of the solution.
I partnered with the Digital Marketing Director, who coordinated with fulfillment companies and hired the third-party vendor.
Design Excellence
Matched Mobile Traffic Patterns
82% of Owala's traffic is on mobile devices. The third-party platform projected the customizer would only capture a third of that on mobile. At launch, customizer mobile traffic matched the site's overall mobile traffic, closing the gap entirely.
Site Performance
2x in Sales
Ten months after launch, the customizer had driven a 2x increase in sales. Customers loved to personalize their bottles, increasing the average cart total. Almost half of all sales included personalizations.
0—The Underlying Problem
As we kicked off the project, the vendor gave us wireframes of their customizer to style. As I reviewed them, I had some concerns.
Cognitive Load
Cluttered and unorganized editing functions cause users to have to think more.
Accessible Patterns
Small text and small buttons create small touch targets.
Limited Viewing Area
The small viewing area creates a challenge to be able to see the artwork effectively.
Responsive vs Adaptive
What works on a desktop does not work on a small mobile device.
The Crux
Framed as a User Preference
When the vendor was pressed on why this was not designed ‘mobile first’, they explained that their data showed that users typically switch from the mobile version to desktop to use the application.
“...users prefer to use the customizer on desktop over the mobile version...”
1—Reframing
Our traffic patterns for the Owala brand showed that customers predominantly used mobile devices to shop. If users had to switch from their mobile phones to a desktop it would negatively affect the adoption of this customizer.
82%
total traffic is on a mobile device
How might we...
design the mobile app so customers don’t have to switch to the desktop version?
2—Discovery
With a new objective set, we set off to figure out how we might improve the mobile experience. We started with a competitive audit to establish a benchmark and find our competitive edge, and identifying conventional patterns inspired new ideas.
Competitive Audit
How are our competitors solving this?
Owala wasn’t the only brand offering bottle customization. As I audited competing customizers, it was clear this was not an easy problem to solve.
The customizers also struggled with:
- Edit modal covering view area
- Lacked the editing flexibility
- Clunky workflows
Research & Inspiration
Conventional Mobile Patterns
A number of apps already handle complex editing on mobile and prove it can work well. Two examples stood out that I drew inspiration from, giving me confidence that we could build something that worked just as well.
Conventional mobile interaction patterns:
- Tool rails with horizontal scrolling
- Progressive disclosure for editing capabilities
- Direct manipulation editing
3—Explorations
As ideas emerged from sketching and prototyping, I worked to test and validate directions that would inform decision making and project direction.
Prototyping
Tested Early & Often
Stakeholders and marketing wanted to see the bottle in a tattoo parlor to match the campaign for the new customizer, so I prototyped the idea.
After testing it, here’s what I learned:
- The immersive experience keeps users engaged.
- Immersive experiences like the parlor shop made the experience feel like an amusement park.
- And more...
4—Trade-offs
One idea that proved to be truly intuitive was allowing users to directly manipulate the artwork, but it was unsupported. I tested an alternative option that kept the project on time.
Decision Point
Direct Manipulation vs. Slider Controls
Direct manipulation patterns were proving to be the most intuitive solution for editing designs for the bottle. Because the platform didn’t support it, I brought the team a decision: push out the launch to develop it, or launch on time with less intuitive patterns.
These are the things we considered:
- What is the cost of pushing launch?
- Is the alternative option intuitive enough for users?
- What other priorities would get pushed?
Shipping a good experience on time beat shipping a better one late.
5—Final Solution
Working through technical constraints and refining mobile patterns, I felt confident that this solution was going to be great. As we developed and tested the solution, the feedback was overwhelmingly positive.
Solution
The Right Patterns
What I’m proudest of here isn’t the metrics, it’s the diagnostic. The mobile gap wasn’t a user preference problem. It was a design problem that looked like a user preference problem. Reframing that, finding the right pattern language to solve it, and shipping it within three months is the kind of work that reminds me why I do this.
Performance metrics are a signal of a problem. They rarely explain user preference.
Conclusions—Outcomes
When we soft-launched the customizer, we knew we had achieved what we set out to do: users no longer switched from mobile to desktop to use it. Mobile traffic never tapered off. Success!
Design Excellence
Matched Mobile Traffic Patterns
82% of Owala's traffic is on mobile devices. The third-party platform projected the customizer would only capture a third of that on mobile. At launch, customizer mobile traffic matched the site's overall mobile traffic, closing the gap entirely.
Site Performance
2x in Sales
Ten months after launch, the customizer had driven a 2x increase in sales. Customers loved to personalize their bottles, increasing the average cart total. Almost half of all sales included personalizations.
Postscript—Unintentional Impact
Launch wasn’t the finish line. Staying forward deployed after release meant owning what came next: the customizer’s influence across the industry, and the edge cases that only surface in the real world.
Benchmarking
Setting the Standard
After a year of our customizer setting the standard for customizers, competing brands like Yeti and Stanley started to adopt similar patterns.
Customer Satisfaction
Moderation Problems
We built a word moderator to screen out inappropriate text on custom bottles. What we hadn’t anticipated was that certain flagged words overlap with surnames from other cultures. It wasn’t a large volume of users, but for those affected it was a frustrating and at times distressing experience, and complaints surfaced quickly.
It was a humbling reminder that content moderation decisions have real human impact, and that building an inclusive list requires more cultural consideration than a basic blocklist.
Performance Issues
File-Translation QA
During QA, I noticed that low-quality uploaded images weren’t rendering as expected in the final printed output. The issue turned out to be a file translation problem inside Spectrum’s pipeline: the image we were showing users as a digital proof wasn’t the same file being sent to the printer.
This was caught because I spent real time testing the experience as a user would, not just checking that buttons worked, but interrogating the actual output quality end to end. Catching it pre-launch avoided what would have been a significant return rate and a credibility hit for a brand that had positioned this as a premium product.
