The company and project:
Kühl is a premium outdoor clothing brand with a focus on technical fabrics and an active fit.
The have an enthusiastic following, a luxury asthetic met with functional technical fabrics that move and stretch. Their products offerings have expanded, and they wanted their online experience to be flexible and updated, to increase B-C sales.
The have an enthusiastic following, a luxury asthetic met with functional technical fabrics that move and stretch. Their products offerings have expanded, and they wanted their online experience to be flexible and updated, to increase B-C sales.
how:
• A refresh on the web design, updated look and expanded web site
• A responsive B-C website for web or mobile view and buying experience
• Product features: adding larger images and technical call-outs that feature their proprietary technical fabrics and details.
• A better online buying experience: Build and refine the UX for the checkout and purchasing, inspiring online buyer confidence and increasing online purchasing.
• A responsive B-C website for web or mobile view and buying experience
• Product features: adding larger images and technical call-outs that feature their proprietary technical fabrics and details.
• A better online buying experience: Build and refine the UX for the checkout and purchasing, inspiring online buyer confidence and increasing online purchasing.
My Role:
• Creative direction for the product redesign and launch:
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.
• Presented to the web director for feedback and iteration.
• Managed the output of the remote web team (photography and photo editing, illustration, and development with daily scrums).
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.
• Presented to the web director for feedback and iteration.
• Managed the output of the remote web team (photography and photo editing, illustration, and development with daily scrums).
The Process:
1- Home Page - Banner Campaign design
1- Home Page - Banner Campaign design
• Create a seasonal framework and aesthetic for featuring active lifestyle photos, with people in-motion.
• Banners are built with responsive scaling for desktop, tablet, and mobile.
Seasonal examples, featuring a product and lifestyle:
• Banners are built with responsive scaling for desktop, tablet, and mobile.
Seasonal examples, featuring a product and lifestyle:
2- DESIGN A FLEXIBLE Product Feature Page
FEATURING THEIR Spyfire JACKET Collection:
FEATURING THEIR Spyfire JACKET 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.
3- Infographic DESIGN SYSTEM: 3 part programmatic animation
• Designed a responsive web and mobile scrolling animation system on the product detail page:
As the user scrolls, the image "animates" and a reveals technical detail (infograph style), showcasing the craft and construction that is a brand differentiator.
As the user scrolls, the image "animates" and a reveals technical detail (infograph style), showcasing the craft and construction that is a brand differentiator.
• 85 animations were created for featured products
• Collaborators: in-house illustrator, front end developer, and web director
