The Hauser brand has been proudly Canadian since 1949. In addition to providing their customers with unparalleled service and outstanding furniture, Hauser is a leader in the ecommerce space. As one of the earliest adopters of the Shopify platform, Hauser has been selling online since the early days of ecommerce.
Since Shopify first launched, the platform has evolved to offer enhanced features and capabilities. After helping Hauser to refine their product listings in a previous project, we set our sites on modernizing their Shopify setup. We collaborated with the Hauser leadership to upgrade to a brand new sectioned theme. With access to the full current range of Shopify capabilities, we built out additional custom elements to improve conversions and elevate the customer experience.
“Effective design of user interfaces combines stunning visuals and clear direction to draw in customers and help them navigate. With a sectioned Shopify theme, bold UI elements can be more refined than ever before.” — Aron Murch
To facilitate an accessible and consistent website, formalized brand guidelines were created. Updated typography was selected to reflect the brand's longstanding history. Cool shades of gray were selected to compliment the product photography and allow the images to pop.
Elements were created and customized across all pages of the website in a consistent visual style. Repeating subtle design motifs creates visual harmony to elevate the visual design of the website as a whole. Creating a consistent experience across all pages reassures visitors and provides them with a more comfortable browsing experience. Additionally, keeping the design elements subtle allows the product information and photography to stand out. The design complements the data rather than overshadowing it.
To utilize the full range of features available in a modern Shopify theme, the entire store was reviewed and modified. To complete the upgrade, typing, tagging, and variants were refined for all products, totaling over 8000 lines of database modifications. Additionally, the collections and menus were updated for improved information hierarchy and easier navigation. Even the static web pages were redesigned from the ground-up. Completing such a widespread set of changes on a live and active Shopify site was a delicate process that required intense planning and careful finesse. To safely and effectively complete the project, all work was completed in a temporary staging environment and carefully recreated on the live website prior to launch. A full launch plan was created and shared with the Hauser leadership to ensure that all parties were able to work collaboratively towards the successful launch of the updated website.
Upgrading to a sectioned Shopify theme unlocked new possibilities for creating web pages. With some custom additions to the theme's code, we were able to leverage the Shopify customizer to act as a visual page builder that would allow individual page customizations without an app-based solution. This saved Hauser from monthly app costs and empowered their internal design team to iterate on webpage content independently from our developers. Our collaborative approach utilized technology to minimize lock-in and allow Hauser's designers to focus on the design rather than the more intensive development.
To allow potential customers to more easily envision collections of furniture pieces, a custom "shop the look" element was created. The new element was designed as a customizable, repeatable homepage section that would allow Hauser staff to pair impactful lifestyle shots with lists of featured products to direct customers to view furniture pieces as part of a whole package. With the overall goal of increasing cart sizes, the shop the look functionality was paired with a product bundle app that would enable customers to purchase the entire "look" and receive a discount.
Recreating the in-store experience as closely as possible is the ultimate goal of any ecommerce project. While it's impossible to fully replicate the experience of interacting with a product in physical space through a digital platform, we aimed to replicate as much of the experience as possible through additional product-page content. With much of the product data already displayed as a result of past projects, we focused on highlighting the texture, colour, and quality of the custom Hauser fabrics and finishes. To achieve this goal, a visual colour picker was implemented to showcase fabric swatches. A custom hover effect was implemented to reveal a close-up fabric swatch and additional fabric features on mouse-over. On mobile, the mouse-over is replaced with a tap effect that allows the hover effect to function without the presence of a pointer.
With the growing importance of social sharing, a shareable wishlist app was integrated into the new theme. The wishlist features integrated social sharing links that allow customers to share their wishlists on social media and in emails. The wishlist integration appears on all product and collection pages without detracting from their visual presentation. To ensure the easiest sharing experience, the wishlist does not require a user account to function. This allows even casual browsers to build and share wishlists.
