Revamping Moon Juice’s Website
Moon Juice, a wellness company that aims for mental and physically wellbeing through adaptogenic mushrooms and Herbs. As Senior UI/UX Product Designer my goal for revamping Moon Juice was to modernize the brand digital space and to enhance its online presence and digital marketing strategies. This includes redesigning the company's website to provide a seamless and user-friendly experience, as well as optimizing its website to reach a wider audience.
Process involved:
Competitive Analysis, User Flows, Wire Framing, User Research, Visual Design, High-Def Mocks, Art Direction
Design goals (high-level):
Improve mobile web usability. Instantly recognizable user path. Turn visitors into customers: Navigation and Homepage product discoverability. Templatization of product pages. Introducing new features: Sticky add to cart CTA, Image and product gallery/carousels and hover states for text and image.
Design & Productivity Tools:
Sketch, Zeplin, Invision and Notion
Introduction / Scope:
One aspect of the revamping process was to conduct thorough market research and gather feedback from consumers. This helped identify trends and preferences, allowing to better meet the needs of its target audience.
The emphasis during this process was on prioritizing certain elements within the design system. Foremost among these priorities were aspects related to product listings, including the design of product cards, strategically placed calls-to-action (CTAs), and the incorporation of product images, titles, prices, and future ratings. The design system also focused on providing versatile grid and list views of products, along with intuitive filters and sorting options to enhance user navigation.
Navigation and product pages were given paramount importance. The header mega menu navigation was designed to include a feature promotion slot for increased visibility. Search functionality was enriched with filters to facilitate seamless exploration. Product pages were revamped to include detailed product descriptions, additional images highlighting specifications and other variants, ensuring a comprehensive presentation.
Of utmost significance was the redesign of the shopping cart slider, allowing users to conveniently view and modify items in the cart. Essential to the growth of the business was converting new with one-time purchasers to subscribers. Streamlined with a prominent upsell button, ensuring a smooth transition from product selection to final purchase.
A well-structured design system can ensure consistency, usability, and a cohesive visual identity across all aspects of the e-commerce website. This not only improves the user experience but also facilitates easier maintenance and updates to the platform.
Background
Moon Juice aims to increase first time purchase subscribers.
High Level Design Goal:
Sprinkle Subscription CTA where MJ’s users spent time the most on the site. Introduce a subscribe button alongside the one-time purchase CTA on product listings. And introduce a upsell moment to convert one-time purchasers to subscribers in the side cart.
Iterative Design & A/B Testing:
The A/B testing on Call-to-Action (CTA) buttons, comparing their placement either on hover or below image thumbnails, to determine which approach performed better with Moon Juice users in terms of user engagement and conversion rates.
The effectiveness of a fixed (sticky) CTA buttons on mobile performances was high with both variations compared to the initial test with no CTA. Considering the context of the page (homepage and shop pages) plus, the specific goals (defaulting subscription on all pages) the variant with the CTA buttons consistently positioned below the image thumbnail was untimely the right choice for MJ. Offering a more static and predictable interface. Emphasizing clarity and straightforwardness versus the dynamic and interactive experience of a hover state CTA that encourages more clicks as users explore the content.
A/B Testing For Mega Nav and Shop Page (With Category Filters) Coming Soon.
A/B Testing For Mega Nav and Shop Page (With Category Filters) Coming Soon.