Sherpa Installation
Sherpa Installation
A full-scale retail installation for Sherpa Outdoors, blending interactive kiosks, motion-controlled 3D product displays, and dual-screen ordering systems. Designed to deliver an immersive in-store brand experience, this project merges physical space with digital interaction—featuring custom graphics, motion design, and product UI created in Illustrator, Photoshop, and After Effects.
Feb 3, 2025
CLIENT
School Project
CLIENT
School Project
CLIENT
School Project
Role
Designer/Developer
Role
Designer/Developer
Role
Designer/Developer
Project Overview
Project Overview
Project Overview
This full-scale retail installation for Sherpa Outdoors was designed to create an immersive, tech-forward in-store experience. The project merges physical interaction with digital storytelling through interactive kiosks, motion-controlled 3D product displays, and dual-screen ordering systems. Every visual asset—including motion graphics, interface layouts, product renders, and branding elements—was conceptualized and crafted using Illustrator, Photoshop, and After Effects.
The installation was divided into two primary experiences:
360° Bag Rotation App:
A motion sensor–powered, touch-free application allowing users to rotate a backpack and explore hot spots at specific angles.
Includes micro-interactions, detailed feature pop-ups, and an idle screensaver mode to attract in-store visitors.
All visual layers, background textures, interface layout, and motion graphics were fully designed by me.
Dual-Screen Ordering App:
A touchscreen catalog enabling users to browse product categories on one screen, with detailed product information, sizing, colors, and ordering options on the second.
Features animated transitions, category cards, product pages, and branded screensavers for an engaging boutique-style experience.
All visuals and motion elements were designed in Illustrator, Photoshop, and After Effects.
The project focused on UX/UI design, motion graphics, and product storytelling, creating a cohesive, high-performance retail environment. While coding was handled externally, I collaborated closely with the development team to ensure that all motion assets, animations, and visual designs were implemented seamlessly, delivering an interactive, visually engaging retail experience.
This full-scale retail installation for Sherpa Outdoors was designed to create an immersive, tech-forward in-store experience. The project merges physical interaction with digital storytelling through interactive kiosks, motion-controlled 3D product displays, and dual-screen ordering systems. Every visual asset—including motion graphics, interface layouts, product renders, and branding elements—was conceptualized and crafted using Illustrator, Photoshop, and After Effects.
The installation was divided into two primary experiences:
360° Bag Rotation App:
A motion sensor–powered, touch-free application allowing users to rotate a backpack and explore hot spots at specific angles.
Includes micro-interactions, detailed feature pop-ups, and an idle screensaver mode to attract in-store visitors.
All visual layers, background textures, interface layout, and motion graphics were fully designed by me.
Dual-Screen Ordering App:
A touchscreen catalog enabling users to browse product categories on one screen, with detailed product information, sizing, colors, and ordering options on the second.
Features animated transitions, category cards, product pages, and branded screensavers for an engaging boutique-style experience.
All visuals and motion elements were designed in Illustrator, Photoshop, and After Effects.
The project focused on UX/UI design, motion graphics, and product storytelling, creating a cohesive, high-performance retail environment. While coding was handled externally, I collaborated closely with the development team to ensure that all motion assets, animations, and visual designs were implemented seamlessly, delivering an interactive, visually engaging retail experience.
This full-scale retail installation for Sherpa Outdoors was designed to create an immersive, tech-forward in-store experience. The project merges physical interaction with digital storytelling through interactive kiosks, motion-controlled 3D product displays, and dual-screen ordering systems. Every visual asset—including motion graphics, interface layouts, product renders, and branding elements—was conceptualized and crafted using Illustrator, Photoshop, and After Effects.
The installation was divided into two primary experiences:
360° Bag Rotation App:
A motion sensor–powered, touch-free application allowing users to rotate a backpack and explore hot spots at specific angles.
Includes micro-interactions, detailed feature pop-ups, and an idle screensaver mode to attract in-store visitors.
All visual layers, background textures, interface layout, and motion graphics were fully designed by me.
Dual-Screen Ordering App:
A touchscreen catalog enabling users to browse product categories on one screen, with detailed product information, sizing, colors, and ordering options on the second.
Features animated transitions, category cards, product pages, and branded screensavers for an engaging boutique-style experience.
All visuals and motion elements were designed in Illustrator, Photoshop, and After Effects.
The project focused on UX/UI design, motion graphics, and product storytelling, creating a cohesive, high-performance retail environment. While coding was handled externally, I collaborated closely with the development team to ensure that all motion assets, animations, and visual designs were implemented seamlessly, delivering an interactive, visually engaging retail experience.
360 Rotating App
360 Rotating App
360 Rotating App
At the heart of the Sherpa Outdoors retail installation is the 360° Bag Rotation App, a motion sensor–powered, touch-free product viewer designed to engage users with interactive, multi-angle exploration. Users can rotate the backpack using hand gestures, stopping at specific points to reveal feature-specific micro-interactions and in-depth product details. This tactile experience was created to bring the bag to life in a flagship retail environment, blending motion design, product storytelling, and immersive UI.
Key Features & Visual Assets:
Screensaver Video: Activates during idle moments, serving as ambient branding and attracting attention in-store.
Stop Point Video: Highlights specific angles of the bag with interactive callouts for materials and compartments.
Details Page Video: Provides an in-depth look at functionality, design, and key features at each interaction point.
Shifting Mountains Video: Adds cinematic motion and context, enhancing the immersive storytelling experience.
All visuals—including 360° product renders, interface layouts, pop-up animations, background textures, and motion graphics—were designed in Illustrator, Photoshop, and After Effects. While the underlying rotation logic was implemented by the development team, every visual and interactive element was crafted to ensure a smooth, engaging, and cohesive user experience.
At the heart of the Sherpa Outdoors retail installation is the 360° Bag Rotation App, a motion sensor–powered, touch-free product viewer designed to engage users with interactive, multi-angle exploration. Users can rotate the backpack using hand gestures, stopping at specific points to reveal feature-specific micro-interactions and in-depth product details. This tactile experience was created to bring the bag to life in a flagship retail environment, blending motion design, product storytelling, and immersive UI.
Key Features & Visual Assets:
Screensaver Video: Activates during idle moments, serving as ambient branding and attracting attention in-store.
Stop Point Video: Highlights specific angles of the bag with interactive callouts for materials and compartments.
Details Page Video: Provides an in-depth look at functionality, design, and key features at each interaction point.
Shifting Mountains Video: Adds cinematic motion and context, enhancing the immersive storytelling experience.
All visuals—including 360° product renders, interface layouts, pop-up animations, background textures, and motion graphics—were designed in Illustrator, Photoshop, and After Effects. While the underlying rotation logic was implemented by the development team, every visual and interactive element was crafted to ensure a smooth, engaging, and cohesive user experience.
At the heart of the Sherpa Outdoors retail installation is the 360° Bag Rotation App, a motion sensor–powered, touch-free product viewer designed to engage users with interactive, multi-angle exploration. Users can rotate the backpack using hand gestures, stopping at specific points to reveal feature-specific micro-interactions and in-depth product details. This tactile experience was created to bring the bag to life in a flagship retail environment, blending motion design, product storytelling, and immersive UI.
Key Features & Visual Assets:
Screensaver Video: Activates during idle moments, serving as ambient branding and attracting attention in-store.
Stop Point Video: Highlights specific angles of the bag with interactive callouts for materials and compartments.
Details Page Video: Provides an in-depth look at functionality, design, and key features at each interaction point.
Shifting Mountains Video: Adds cinematic motion and context, enhancing the immersive storytelling experience.
All visuals—including 360° product renders, interface layouts, pop-up animations, background textures, and motion graphics—were designed in Illustrator, Photoshop, and After Effects. While the underlying rotation logic was implemented by the development team, every visual and interactive element was crafted to ensure a smooth, engaging, and cohesive user experience.
Catalogue App
Catalogue App
Catalogue App
The Dual-Screen Ordering App transforms the Sherpa Outdoors product line into an interactive, shoppable experience. Designed for high-end retail environments, the app allows users to browse product categories, explore detailed information, and simulate the ordering process across two screens. The first screen displays product categories, while the second provides expanded details, including sizing, available colors, materials, and key features. This setup replicates a boutique-style self-checkout experience while encouraging exploration and interaction.
Key Features & Visual Assets:
Screensaver Video: Engaging animation that plays during idle moments, keeping the display active and reinforcing brand identity.
Catalogue Screen Video: The primary browsing interface, featuring category cards, smooth navigation, and an organized layout for apparel and gear.
Product Details Screen Video: Provides detailed information for each product, including images, specifications, and interactive elements to simulate the ordering process.
All visuals—including UI layouts, motion transitions, category and product cards, and screensaver animations—were created in Illustrator, Photoshop, and After Effects. Each element was designed to maintain visual cohesion, brand consistency, and a smooth, intuitive user experience across the dual-screen setup.
The Dual-Screen Ordering App transforms the Sherpa Outdoors product line into an interactive, shoppable experience. Designed for high-end retail environments, the app allows users to browse product categories, explore detailed information, and simulate the ordering process across two screens. The first screen displays product categories, while the second provides expanded details, including sizing, available colors, materials, and key features. This setup replicates a boutique-style self-checkout experience while encouraging exploration and interaction.
Key Features & Visual Assets:
Screensaver Video: Engaging animation that plays during idle moments, keeping the display active and reinforcing brand identity.
Catalogue Screen Video: The primary browsing interface, featuring category cards, smooth navigation, and an organized layout for apparel and gear.
Product Details Screen Video: Provides detailed information for each product, including images, specifications, and interactive elements to simulate the ordering process.
All visuals—including UI layouts, motion transitions, category and product cards, and screensaver animations—were created in Illustrator, Photoshop, and After Effects. Each element was designed to maintain visual cohesion, brand consistency, and a smooth, intuitive user experience across the dual-screen setup.
The Dual-Screen Ordering App transforms the Sherpa Outdoors product line into an interactive, shoppable experience. Designed for high-end retail environments, the app allows users to browse product categories, explore detailed information, and simulate the ordering process across two screens. The first screen displays product categories, while the second provides expanded details, including sizing, available colors, materials, and key features. This setup replicates a boutique-style self-checkout experience while encouraging exploration and interaction.
Key Features & Visual Assets:
Screensaver Video: Engaging animation that plays during idle moments, keeping the display active and reinforcing brand identity.
Catalogue Screen Video: The primary browsing interface, featuring category cards, smooth navigation, and an organized layout for apparel and gear.
Product Details Screen Video: Provides detailed information for each product, including images, specifications, and interactive elements to simulate the ordering process.
All visuals—including UI layouts, motion transitions, category and product cards, and screensaver animations—were created in Illustrator, Photoshop, and After Effects. Each element was designed to maintain visual cohesion, brand consistency, and a smooth, intuitive user experience across the dual-screen setup.
Design Process
Design Process
Design Process
360° Rotating App
The 360° Rotating App was designed to create a tactile and immersive product experience. Every visual element, from the 360° backpack renders to interface layouts and background textures, was crafted with a strong focus on clarity, usability, and brand alignment.
Key Design Steps:
Asset Creation in Illustrator:
Designed detailed vector illustrations of the bag and its features.
Created interface elements, icons, and interactive hotspots for each rotation point.
Image Editing & Preparation in Photoshop:
Cleaned, trimmed, and color-corrected product renders for crisp, high-quality visuals.
Prepared layered assets for motion integration and consistent visual tone.
Motion Graphics in After Effects:
Animated the rotation loop, feature callouts, and idle screensaver sequences.
Integrated smooth transitions and camera movements to create a cinematic, tactile feel.
Interface Layout & Micro-Interactions:
Designed stop points, details pages, and “Shifting Mountains” sequences to guide user focus.
Ensured visual hierarchy, readability, and motion pacing aligned with the brand’s rugged, high-performance identity.
All design work prioritized cohesion between visuals, motion, and interactive storytelling, ensuring the final 360° experience was polished, engaging, and brand-consistent.
The Dual-Screen Ordering App
he Dual-Screen Ordering App focused on creating an elegant and intuitive retail catalog interface, where every visual component reinforced the Sherpa Outdoors identity.
Key Design Steps:
Illustrator for UI & Graphic Assets:
Created category cards, product cards, and layout grids.
Designed icons, buttons, and interface overlays to match the brand’s rugged aesthetic.
Photoshop for Image Editing:
Trimmed, retouched, and optimized product images for clarity and consistency.
Layered images and textures to simulate realistic depth and detail.
After Effects for Motion Design:
Produced animated transitions between screens, category cards, and product detail views.
Developed the screensaver and idle animations to maintain dynamic brand presence in-store.
Interface Design & Flow:
Structured the dual-screen layout for clear browsing, selection, and detailed product exploration.
Ensured typography, motion, and visual hierarchy guided the user seamlessly through the catalog.
This design process focused entirely on the visual and motion elements of the interactive catalog, emphasizing clarity, engagement, and brand consistency without touching the underlying coding or functionality.
360° Rotating App
The 360° Rotating App was designed to create a tactile and immersive product experience. Every visual element, from the 360° backpack renders to interface layouts and background textures, was crafted with a strong focus on clarity, usability, and brand alignment.
Key Design Steps:
Asset Creation in Illustrator:
Designed detailed vector illustrations of the bag and its features.
Created interface elements, icons, and interactive hotspots for each rotation point.
Image Editing & Preparation in Photoshop:
Cleaned, trimmed, and color-corrected product renders for crisp, high-quality visuals.
Prepared layered assets for motion integration and consistent visual tone.
Motion Graphics in After Effects:
Animated the rotation loop, feature callouts, and idle screensaver sequences.
Integrated smooth transitions and camera movements to create a cinematic, tactile feel.
Interface Layout & Micro-Interactions:
Designed stop points, details pages, and “Shifting Mountains” sequences to guide user focus.
Ensured visual hierarchy, readability, and motion pacing aligned with the brand’s rugged, high-performance identity.
All design work prioritized cohesion between visuals, motion, and interactive storytelling, ensuring the final 360° experience was polished, engaging, and brand-consistent.
The Dual-Screen Ordering App
he Dual-Screen Ordering App focused on creating an elegant and intuitive retail catalog interface, where every visual component reinforced the Sherpa Outdoors identity.
Key Design Steps:
Illustrator for UI & Graphic Assets:
Created category cards, product cards, and layout grids.
Designed icons, buttons, and interface overlays to match the brand’s rugged aesthetic.
Photoshop for Image Editing:
Trimmed, retouched, and optimized product images for clarity and consistency.
Layered images and textures to simulate realistic depth and detail.
After Effects for Motion Design:
Produced animated transitions between screens, category cards, and product detail views.
Developed the screensaver and idle animations to maintain dynamic brand presence in-store.
Interface Design & Flow:
Structured the dual-screen layout for clear browsing, selection, and detailed product exploration.
Ensured typography, motion, and visual hierarchy guided the user seamlessly through the catalog.
This design process focused entirely on the visual and motion elements of the interactive catalog, emphasizing clarity, engagement, and brand consistency without touching the underlying coding or functionality.
360° Rotating App
The 360° Rotating App was designed to create a tactile and immersive product experience. Every visual element, from the 360° backpack renders to interface layouts and background textures, was crafted with a strong focus on clarity, usability, and brand alignment.
Key Design Steps:
Asset Creation in Illustrator:
Designed detailed vector illustrations of the bag and its features.
Created interface elements, icons, and interactive hotspots for each rotation point.
Image Editing & Preparation in Photoshop:
Cleaned, trimmed, and color-corrected product renders for crisp, high-quality visuals.
Prepared layered assets for motion integration and consistent visual tone.
Motion Graphics in After Effects:
Animated the rotation loop, feature callouts, and idle screensaver sequences.
Integrated smooth transitions and camera movements to create a cinematic, tactile feel.
Interface Layout & Micro-Interactions:
Designed stop points, details pages, and “Shifting Mountains” sequences to guide user focus.
Ensured visual hierarchy, readability, and motion pacing aligned with the brand’s rugged, high-performance identity.
All design work prioritized cohesion between visuals, motion, and interactive storytelling, ensuring the final 360° experience was polished, engaging, and brand-consistent.
The Dual-Screen Ordering App
he Dual-Screen Ordering App focused on creating an elegant and intuitive retail catalog interface, where every visual component reinforced the Sherpa Outdoors identity.
Key Design Steps:
Illustrator for UI & Graphic Assets:
Created category cards, product cards, and layout grids.
Designed icons, buttons, and interface overlays to match the brand’s rugged aesthetic.
Photoshop for Image Editing:
Trimmed, retouched, and optimized product images for clarity and consistency.
Layered images and textures to simulate realistic depth and detail.
After Effects for Motion Design:
Produced animated transitions between screens, category cards, and product detail views.
Developed the screensaver and idle animations to maintain dynamic brand presence in-store.
Interface Design & Flow:
Structured the dual-screen layout for clear browsing, selection, and detailed product exploration.
Ensured typography, motion, and visual hierarchy guided the user seamlessly through the catalog.
This design process focused entirely on the visual and motion elements of the interactive catalog, emphasizing clarity, engagement, and brand consistency without touching the underlying coding or functionality.
Development
Development
Development
The web development for both the 360° Rotating App and the Dual-Screen Catalogue App was built upon a pre-existing code base provided by my professor, Wade Clark. While the main structure, core logic, and interactive framework were developed and remain the intellectual property of Wade Clark, I customized the projects to reflect the Sherpa Outdoors brand and desired functionality.
Key Development Contributions:
360° Rotating App:
Adjusted rotation angles, hot spot placements, and interaction points.
Implemented custom colors, typography, and UI layouts designed in Illustrator.
Integrated motion graphics and screensaver loops created in After Effects.
Dual-Screen Catalogue App:
Updated category and product information, including sizes, colors, and materials.
Applied brand-specific styling, including color palette, iconography, and typography.
Integrated screensaver and animated transitions from After Effects to enhance interactivity.
All development work focused on customizing and adapting the existing framework to suit Sherpa Outdoors’ brand identity and interactive retail requirements, ensuring seamless visual cohesion and functional reliability while maintaining the original code ownership with Wade Clark.
Given Below are 3 Marketing Videos that where integrated into the Retail Setup.
The web development for both the 360° Rotating App and the Dual-Screen Catalogue App was built upon a pre-existing code base provided by my professor, Wade Clark. While the main structure, core logic, and interactive framework were developed and remain the intellectual property of Wade Clark, I customized the projects to reflect the Sherpa Outdoors brand and desired functionality.
Key Development Contributions:
360° Rotating App:
Adjusted rotation angles, hot spot placements, and interaction points.
Implemented custom colors, typography, and UI layouts designed in Illustrator.
Integrated motion graphics and screensaver loops created in After Effects.
Dual-Screen Catalogue App:
Updated category and product information, including sizes, colors, and materials.
Applied brand-specific styling, including color palette, iconography, and typography.
Integrated screensaver and animated transitions from After Effects to enhance interactivity.
All development work focused on customizing and adapting the existing framework to suit Sherpa Outdoors’ brand identity and interactive retail requirements, ensuring seamless visual cohesion and functional reliability while maintaining the original code ownership with Wade Clark.
Given Below are 3 Marketing Videos that where integrated into the Retail Setup.
The web development for both the 360° Rotating App and the Dual-Screen Catalogue App was built upon a pre-existing code base provided by my professor, Wade Clark. While the main structure, core logic, and interactive framework were developed and remain the intellectual property of Wade Clark, I customized the projects to reflect the Sherpa Outdoors brand and desired functionality.
Key Development Contributions:
360° Rotating App:
Adjusted rotation angles, hot spot placements, and interaction points.
Implemented custom colors, typography, and UI layouts designed in Illustrator.
Integrated motion graphics and screensaver loops created in After Effects.
Dual-Screen Catalogue App:
Updated category and product information, including sizes, colors, and materials.
Applied brand-specific styling, including color palette, iconography, and typography.
Integrated screensaver and animated transitions from After Effects to enhance interactivity.
All development work focused on customizing and adapting the existing framework to suit Sherpa Outdoors’ brand identity and interactive retail requirements, ensuring seamless visual cohesion and functional reliability while maintaining the original code ownership with Wade Clark.
Given Below are 3 Marketing Videos that where integrated into the Retail Setup.
