Product Page Redesign
The product pages on sisalcarpet.com were not highly usable. The layout ignored fundamental UX principles and did not feel like a modern e-commerce experience. All of which led to confusion and low conversion rates.
User Interviews (by others)
Using data from testing, session recordings and customer feedback, I identified core issues with the layout of the product pages. I then conducted competitive research and formed a plan to address customer needs through a more modern and familiar page design. All of which aligns to the UX roadmap goals of increasing online transactions without the help of customer service.
The updated design:
Gives the user a clear action to take - order samples or price & order a rug.
Brings key information above the fold and places less used information down the page.
Updates the visual aesthetic to match our modern, high-end products.
Creates a more familiar and user friendly e-commerce experience.
Top of the page after the redesign.
Top of the page before the redesign.
By addressing customer needs I have
increased the conversion rate across devices by 23%.
Key Mobile Updates
Old mobile experience:
Key information, like price and color options, are hidden in an accordion, labeled "details" or shown below the fold.
There is no clear call to action - the "Colors" heading doesn't tell people what to do next.
Actionable items, like browsing & ordering binding swatches, are very far down the page.
Updated mobile experience:
Key information is now above the fold (price & colors).
Addition of a share link - especially important for our interior designer clients who want to share the product with their clients.
Sample ordering is clearer with an improved header and easy access to border samples.
Updated UX writing based on customer interviews (ex. swatches are now samples and bindings are now borders). Button text now makes it clear that the customer can price and order a rug, previously it read "Price Your Rug".
Key Desktop Updates
Old desktop experience:
No call to action - it is not clear that customers can buy something on this page.
Similar to mobile, key information is not apparent. Price is buried in the large block of text and color options are below the fold.
The tab layout feels outdated and things like “Care” and “Installation” don't need to take up such valuable real estate.
Updated desktop experience:
Breadcrumbs help customers know where they are.
Clear calls to action have been added.
Detailed, less referenced information is hidden under an expandable menu (specifications, care, etc.)
Addition of the options to share & pin a product (especially important to interior designers who are shopping for clients).
Key information is now above the fold, like price and color options. Future release will include a more concise description with a bulleted list of features.
Explore the updated experience here.
More customers are making purchases.
Since the update:
Transactions +22.64% across devices (from previous year, in spite of the lower session and user rates, which are down 25%, on average).
Bounce rate down .95% across devices.
Increase in mobile/tablet usability (through mobile-first design)
mobile transactions +47.92% from previous period
tablet transactions +64.29% from previous period
(desktop also +32.91% from previous period)
I'm seeing fewer instances of confusion during session recordings.
Expected longterm outcomes:
Provide visual consistency across our sites - important for maintaining a consistent design system (internal goal) and building brand recognition and trust (external goal).
Provide a more intuitive and familiar shopping experience for our customers.
Help achieve the overarching UX goal of helping customers find what they need and place orders without needing help from customer service.