The Design Challenge:
• Redesign their B-C eCommerce website to be responsive, expand their online presence and brand, add to the size of the site with larger images and technical call-outs that feature their proprietary technical fabrics and details.
• Build and refine the UX for the checkout and purchasing, inspiring online buyer confidence and increasing online purchasing.
Role:
• Creative direction: Led the updated layout and direction, created responsive templates, style guides, testing, and refining processes to build and scale a catalog of images for the new format.
• Managed the output of the remote web team (photography, illustration, and development with daily scrums).
• Redesign their B-C eCommerce website to be responsive, expand their online presence and brand, add to the size of the site with larger images and technical call-outs that feature their proprietary technical fabrics and details.
• Build and refine the UX for the checkout and purchasing, inspiring online buyer confidence and increasing online purchasing.
Role:
• Creative direction: Led the updated layout and direction, created responsive templates, style guides, testing, and refining processes to build and scale a catalog of images for the new format.
• Managed the output of the remote web team (photography, illustration, and development with daily scrums).
Home Page - Banner Campaign
based on Active Lifestyle Photos in-motion:
based on Active Lifestyle Photos in-motion:
Banners are built with responsive scaling for desktop, tablet, and mobile, and easy updates to photos and text for seasonal updates.
Product Feature Page - Spyfire Collection:
First view / Primary User Experience:
• eCommerce Buy Now, and Large Image Views scale responsively to keep the buy now, size, and color variants in the first view.
• Visual Search Navigational Header
• eCommerce Buy Now, and Large Image Views scale responsively to keep the buy now, size, and color variants in the first view.
• Visual Search Navigational Header
Secondary View:
• A responsive, long, scrolling page by design.
• Technical fabrics and features are showcased as hero shots and callouts.
• Illustrative Technical Callouts "animate open" as page scrolls.
• A responsive, long, scrolling page by design.
• Technical fabrics and features are showcased as hero shots and callouts.
• Illustrative Technical Callouts "animate open" as page scrolls.
Infographics 3 part programmatic animation:
(85 created for featured products)
(85 created for featured products)
Web and Mobile Scrolling Animation and Call Outs:
As the user scrolls, the image animates apart to call out technical detail
(shrinking to responsive mobile)
As the user scrolls, the image animates apart to call out technical detail
(shrinking to responsive mobile)
