Tropi is a beverage brand website redesign focused on creating a more modern, engaging, and emotionally appealing digital experience. The project reimagines the existing Tropi Juice website to better reflect the brand’s playful character while improving visual hierarchy, interaction quality, and overall user engagement. The main focus of the redesign was to enhance the user experience through motion design, microinteractions, and expressive visuals that make browsing the website feel lively and enjoyable.
Role:
Web Designer
Industry:
Food & Beverage
Type:
Redesign concept
Challenges
Outdated Visual Style: The existing website lacked a modern visual language and did not fully communicate the brand’s vibrant and playful identity.
User Engagement: The original experience felt static, with limited interaction and feedback, making the browsing experience less memorable and emotionally engaging.
Visual Hierarchy & Readability: Content needed clearer structure and spacing to guide users through the page while maintaining a light and energetic brand feel.
Responsive Experience: Ensuring the redesigned layout and interactions work smoothly across both desktop and mobile devices.
My Approach
Discovery Phase
Website Analysis: Reviewed the existing Tropi Juice website to identify usability issues, visual inconsistencies, and missed opportunities for interaction and storytelling.
Brand Exploration: Analyzed Tropi’s visual identity, color palette, tone of voice, and product imagery to understand how the brand could be expressed more clearly and playfully through design.
Experience Goals: Defined key goals for the redesign — creating a joyful, modern experience that encourages exploration and builds a positive emotional connection with the brand.
Design and Interaction Development
UI Redesign: Redesigned the page layout with improved visual hierarchy, spacing, and typography to make content easier to scan while keeping the interface visually rich and expressive.
Motion & Microinteractions: Introduced animations and microinteractions to bring the interface to life — including hover effects, transitions, animated sections, and playful motion accents that enhance user feedback and engagement.
Visual Storytelling: Used bold colors, curved shapes, and dynamic layouts to reflect the brand’s energy and create a sense of movement throughout the page.
Responsive Design: Adapted the layout and interactions for mobile screens to ensure a consistent and enjoyable experience across devices.
Testing and Iteration
Interaction Review: Reviewed key interactions, animations, and transitions across the page to ensure they feel smooth, purposeful, and enhance the overall user experience rather than distract from content.
Usability Check: Evaluated navigation flow, readability, and content structure to confirm that users can easily explore products, brand values, and calls to action without confusion.
Iteration & Refinement: Refined motion timing, hover states, and microinteractions based on visual balance and user experience principles to achieve a more polished and cohesive final result.
Results
The final redesign presents Tropi as a fresh, modern, and joyful brand. The use of animation and microinteractions adds personality to the interface and creates a more engaging and memorable browsing experience.
This project demonstrates my ability to redesign existing products, improve visual communication, and use motion design thoughtfully to enhance user experience rather than distract from it.
Future Plans
The concept can be expanded with more interactive storytelling elements, scroll-based animations, and enhanced product discovery features to further strengthen brand engagement.
Conclusion
This redesign showcases my approach to creating emotionally engaging digital experiences through UI/UX design, animation, and microinteractions. By rethinking the existing Tropi Juice website, I focused on transforming a static interface into a lively, modern, and user-centered brand experience.
