{"id":1236,"date":"2026-01-29T19:34:42","date_gmt":"2026-01-29T18:34:42","guid":{"rendered":"https:\/\/project.revolware.com\/case-studies\/?p=1236"},"modified":"2026-02-02T11:00:52","modified_gmt":"2026-02-02T10:00:52","slug":"joico","status":"publish","type":"post","link":"https:\/\/project.revolware.com\/case-studies\/joico\/","title":{"rendered":"JOICO e-shop UX enhancements"},"content":{"rendered":"\n

Joico<\/a><\/strong> is a premium hair care brand<\/strong> straight out of Los Angeles. They focus on the “Joy of Healthy Hair,” providing professional-grade products that stylists worldwide rely on for color and hair health. And while their products were top-tier, their Shopify store needed a serious UX polish<\/strong> to match that energy and convert casual browsers into loyal fans.<\/p>\n\n\n\n

Initial situation<\/h2>\n\n\n\n

The goal wasn’t just a facelift. It was a Conversion Rate Optimization (CRO)<\/strong> mission. The existing Shopify store had too much friction. Users were getting lost in menus, frustrated by “out of stock” items cluttering the view, and dropping off during the mobile experience. We needed to streamline the path to purchase<\/strong> and make their “Advice” chat feature actually visible.<\/p>\n\n\n\n

Scope of work and key areas<\/h2>\n\n\n\n
    \n
  1. Navigation & UX friction<\/strong>

    We focused on making the site feel natural to navigate. If a user has to think too hard, they bounce. What did we do?
    Hover vs. Click:<\/span> We swapped manual clicks for hover-over menus on product lines to speed up browsing.
    Visual Hierarchy:<\/span> Cleaned up the header icons (Search, Account, Cart) and introduced a “sticky menu” so the navigation follows the user as they scroll. We also added a clear “Home” hyperlink because, believe it or not, not everyone knows clicking a logo resets the page. We optimalized cookie banners view, so that it would not interfere with contact button.
    <\/li>\n\n\n\n
  2. Conversion & stock management<\/strong>

    Nothing kills a shopping mood like clicking a “Best Seller”<\/span> only to see it’s sold out. So by Smart Filtering, we reconfigured the “Most Popular”<\/span> section to automatically hide out-of-stock items or replace them with available alternatives. To boost conversions and campaing effectivity, we added “Add to Cart”<\/span> buttons directly under products in the grid view, cutting out unnecessary clicks. Also implemented a scrolling “Free Shipping over 50\u20ac”<\/span> bar to keep the incentive of this Joico campaign front and center. Availability date of sold-out products was also added, for users to know when their favourites will be in stock again.
    <\/li>\n\n\n\n
  3. Mobile-first optimization<\/strong>

    Since most traffic comes from phones, we treated mobile as the priority: the original logo was massive and hogged screen real estate, so we optimized the layout and exported a leaner, cleaner version. We also reordered the mobile footer to put the newsletter signup first, capturing leads more effectively. Specifically on mobile version, the cookie banner was literally burying the “Advice”<\/span> chat icon. We repositioned it and adjusted opacity so users could actually see they had support. We also implemented resizing of contact elements according customer device type.
    <\/li>\n\n\n\n
  4. The Checkout Funnel<\/strong>

    We wanted the cart to feel like a “3-step breeze”<\/span>, to support psychological 1-2-3 rule<\/span>, instead of more steps in the original cart. Alongside this, we used contrasting colors to separate button actions to clear directions for shoppers. To boost sales, we added “Certainty”<\/span> messaging (e.g., “Delivery in 2-4 days”<\/span>, “Easy returns”<\/span>) at the exact moment users usually get cold feet.<\/li>\n<\/ol>\n\n\n
    \n
    \"\"
    Preview of JOICO e-shop current homepage<\/em><\/figcaption><\/figure><\/div>\n\n\n

    And the Results?<\/h2>\n\n\n\n

    The data speaks for itself. By removing friction and emphasizing the brand’s professional identity, we saw a massive jump in engagement:<\/p>\n\n\n\n