Backcountry Recreation
Full Site Redesign
Backcountry Recreation, a Canadian retailer specializing in luxury hot tubs and saunas, came to our agency with a makeshift website that was not performing well. As sellers of big-ticket items, we identified the need for the client to establish a legimately trustworthy online presence, so we fully redesigned their site for the Shopify platform with a clean and professional look in order to enhance user experience and drive conversions.
Homepage
I led the design of an enhanced homepage aimed at improving user engagement and conversion rates. The goal was to create a sophisticated and user-friendly experience that showcases their premium offerings and reflects their high-quality brand. Key features included:
Sticky Navigation Header: integrates essential elements like the client's logo, dropdown items for parent categories, links to auxiliary pages like FAQ, About Us, Contact Us), and best-practice e-commerce icons like search, account, cart.
Hero Banner: features a high-quality aspirational lifestyle image with a prominent "Shop Now" call to action.
Affirm Banner: provides information on financing options to lower user anxiety during purchasing experience
Category Section: repeats parent categories (hot tubs, saunas, geodesic dome tents for glamping, and cold plunge tubs) for easy access to product listing pages for respective categories
Informative Section: highlights company values with brief, impactful statements
Video Section: embeds a YouTube video to leverage existing client content
Customer Stories and Social Media Section: serves as social proof to build trust and encourage engagement
Featured Product Carousel: display a representative sample of products offered by client with direct links to product detail pages
Footer: offers additional navigation to helpful site page
Product Listing Page
The product listing page design for Backcountry Recreation features a clean interface showcasing the client's luxury outdoor products. Key features of the design include:
Product Cards: each card features a high-resolution thumbnail image of the product, accompanied by clear pricing, customer review ratings, and informative badges. Badges highlight key information such as “Sale” and “In Stock and Ready to Ship Now,” which is especially important for this particular client since a long lead time is to be expected with the type of product they sell.
Filtering and Sorting Tools: highly visible and easily navigable filtering and sorting tools found above the product card grid help users easily refine their search based on vital product attributes.
Product Details Page
When it came to the product details page, we realized the importance of this step of the user journey and the threat of the user abandoning the site if the details were not laid out intuitively and in a visually appealing way. Key features of the product details page include:
Buy Section: positioned prominently at the top as expected by users, this section delivers essential product details such as the title, SKU, and price, along with options for customizable add-ons.
Image Gallery: allows customers to view the product from multiple angles and in context of their environment with large, high quality images and expandable thumbnails to view additional images.
Additional Details: includes helpful details below-the-fold such as additional images and content, dimensions, and specifications, ensuring users have all the necessary data to make a decisive purchase.
Cross-Sell Carousel: encourages users to explore alternative products and/or complementary products to the product they are viewing.
Mega Menu
Finally, the redesigned mega menu for Backcountry Recreation significantly enhances navigation and is tailored custom for both the desktop and mobile experience, addressing previous usability challenges. Key features of the desktop menu include:
Full-width dropdown: captures user attention moreso than previous site navigation, which was just simple dropdowns containing unstyled text links. The client's previous menu also had no visual indication of which categories were hoverable, which was solved here with dropdown arrow vectors. simpleattention with its expansive layout. It features a prominent, clickable image that directs users to the main category page, along with a “Shop All” link for broader exploration. The menu is organized with a clear hierarchy and taxonomy, making it easy for users to navigate through main categories and subcategories.
Clear hierarchy and taxonomy of subcategories: provides a clear distinction between shoppable links, parent categories, subcategories, and auxiliary links
Multiple links to main category page: aside from the subcategories, the user is also able to navigate to the main parent category page with the "shop all" call to action button or by clicking the image link, which also helps make the full-width dropdown more balanced and visually appealing
Meanwhile the mobile-specific menu design utilizes a combination of tiered flyout menus and expandable sub-subcategory accordions to provide a more efficient and intuitive mobile experience, improving upon the client's previous mobile menu which was difficult to find and use.
