Jurlique
The Wishing Tree Campaign
Role:
UX Designer & Frontend Developer
Type:
Client project
Tools:
Figma, React, Three.js, Blender
Timeline:
1.5 month
Background
Jurlique sought to launch an interactive campaign that would engage customers and promote environmental awareness. The campaign needed to:
✔️ Encourage users to submit environmental pledges.
✔️ Allow users to view existing pledges.
✔️ Feature a central tree, symbolising a historic tree on Jurlique’s Adelaide farm.
✔️ Be visually engaging, mobile-friendly, and optimised for in-store display on a vertical TV monitor.
Research & Insights
User Needs & Usability Requirements:
✔️ Mobile-friendly - Ensured seamless pledge submission on mobile devices.
✔️ TV Display Optimisation - Ensured the design looked great on in-store TV screens.
✔️ Incentive-driven Participation - Users were more likely to submit a pledge if offered a small reward.
Visual Engagement:
✔️ 3D vs. 2D - Research showed that 3D interactive visuals engaged users more than static 2D designs, leading us to incorporate a 3D tree.
User Flow & Information Architecture
We designed a simple, intuitive flow to reduce friction and avoid drop-offs:
1. Landing Page - Displays an interactive 3D tree with pledges.
2. Pledge Submission Form - Users write their pledge by clicking on the huge CTA button on screen.
3. Optional Details - Users can provide contact details to receive a reward.
4. Pledge Confirmation - The pledge flies onto the tree, adding a new hanging card.
Design Process
Balancing Feasibility & Aesthetics:
Given budget and time constraints, we focused on creating an engaging experience without overcomplicating the 3D implementation:
✔️ 3D Tree - Used as the centrepiece, applying animation such as wind directly from the 3D file, rather than being fully interactive.
✔️ 2D Pledge Cards - Cards transitioned smoothly into the 3D space via animations.
✔️ Clear CTAs - Large call-to-action buttons guided users through the process.
Bringing the Concept to Life:
✔️ Wireframing & Sketches: - Explored how pledges should be visually represented.
✔️ Prototyping: - Tested interactions and layouts in Figma, followed by frontend prototyping with code to ensure smooth animations.
Collaboration & Feedback
Close collaboration between the design and development teams was key:
✔️ Continuous Feedback: - Developers provided input on technical feasibility.
✔️ Iterative Process - The design and dev teams worked in sync using Remix, Three.js, and Tailwind CSS to refine animations and interactions.
Development & Implementation
🔥 Key Technical & UX Considerations:
- Optimised 3D assets to balance performance with visual appeal.
- Randomised pledge display to keep the experience fresh and engaging.
Testing & Iteration
User Behaviour Insights & Improvements:
✔️ Background Music - Adjusted music to play only when the user interacted, as initial autoplay was distracting.
✔️ Animation Timing - Adjusted animation timing to synchronise 2D and 3D elements, ensuring a cohesive and seamless animation experience.
Results & Impact
✔️ Exceeded Expectations - More pledges were submitted than anticipated.
✔️ High Engagement - Users spent more time interacting with the tree and exploring others' pledges.
✔️ Client Satisfaction - Jurlique was so pleased with the campaign’s success that they invited us to handle their next digital initiative.
Challenges & Learnings
✔️ 3D Implementation - Integrating 3D animations smoothly required balancing performance with interactivity.
✔️ Frontend & UX Synergy - Close collaboration was essential for delivering a technically feasible yet visually rich experience.
✔️ Small UX Tweaks Matter - Minor adjustments, like animation timing and music interaction, significantly improved the user experience.
Final Thoughts
This project reinforced the importance of UX design, collaboration, and technical decisions in creating engaging, immersive experiences. It demonstrated that even with limited resources, thoughtful design can drive real impact.