Responsive Web Design · UX/UI · Brand Experiences
Role: UI/UX Designer, Visual Designer
Designing for Trident was a chance to build a digital experience around color, flavor, and a playful brand personality. I wanted the site to make the range easy to explore while giving each product family room to express its own character.
The work shown here spans the original launch and a later refresh. Across both, I focused on a clear relationship between packaging, flavor imagery, navigation, and social content, with layouts that could carry the experience from desktop to mobile.
CHALLENGES
Trident’s range included many flavors and product families, each with its own packaging and visual cues. The challenge was to organize that variety without overwhelming visitors, while keeping product details and social content approachable across screen sizes.
GOALS
Make flavor easy to navigate: Use consistent content structures and clear product-family navigation to help visitors find their way through the range.
Express the brand through color: Use bold backgrounds, packaging, and flavor imagery to distinguish products within a recognizable system.
Connect products and community: Give social content a clear home alongside the product experience.
ACCOMPLISHMENTS
Designed across launch and refresh: Developed related approaches to product presentation, navigation, and brand storytelling as the experience evolved.
Organized a broad product range: Used repeatable layouts to balance individual flavor identities with a consistent browsing experience.
Carried the design across devices: Adapted product and social layouts for desktop and mobile while preserving the brand’s visual character.
REFRESH: A COHESIVE PRODUCT SYSTEM
For the second phase, I used a consistent blue framework to bring the product families together. Large packaging images and full-width flavor panels gave visitors a clear overview, while the navigation kept the wider range within reach.
TRIDENT SPLASH: COLOR & FLAVOR
Each Splash flavor received its own color field and prominent package image. Repeating the same arrangement for product names and short descriptions made the range easy to scan while letting orange, berry, and peppermint retain their individual character.
EXTENDING THE PRODUCT FAMILY
The same layout supported the broader Trident range. I let packaging, flavor imagery, and contrasting backgrounds carry the differences between products, while a familiar hierarchy kept the browsing experience consistent.
REFRESH: THE SOCIAL FEED
I organized the social content into a flexible card grid so campaign imagery, posts, and video moments could sit together. The shared blue framework connected the feed with the product pages, while the cards gave varied content a consistent structure.
ORIGINAL LAUNCH: FLAVOR-LED DISCOVERY
The first launch used larger fruit imagery and rich color changes to introduce the product families. A prominent campaign carousel established the brand story, followed by product panels that combined packaging, flavor descriptions, and direct links to more information.
ORIGINAL LAUNCH: BRAND & COMMUNITY
The original social page carried the warm flavor palette into a grid of posts and images. I kept the content cards consistent so the variety of fan moments could provide the energy, with familiar navigation and social links tying the page back to the wider site.
MOBILE PRODUCT & SOCIAL VIEWS
On mobile, I adapted the product and community content into a narrower flow with a compact menu. Packaging and flavor imagery remained prominent, while the product information and social cards followed the same hierarchy as the desktop experience.
Trident Layers Mobile Product Page
Trident Mobile Social Feed
Interested in working together?