Summary
My Role
Technical Consultant, Researcher, UX Designer, Front-end Developer
Tools
Tools
Shopify, Figma, Recharge Subscriptions, Liquid, HTML, CSS, JavaScript
Agency
Acorn Digital Strategy
Duration
12 weeks (November 2023)
Skills
Front-end Development, UX Design, Information Architecture
About
Throughout the project, our primary objective was to enhance user experience by refining navigation and collection filters, thereby streamlining product discovery and searchability.
My responsibilities included a comprehensive redesign of the homepage, optimizing the hierarchy of collections, within the navigation, and implementing intuitive product sorting filters.
By strategically merchandising products, we aimed to create a more engaging and conversion-driven browsing experience.
I collaborated closely with the client to iterate on the product page design, ensuring it met their specifications precisely. A key achievement was the successful integration of coffee subscriptions, and a starter subscription to enhance recurring revenue opportunities.
The Situation
The project presented several unique challenges as the client sought to migrate from Wix to Shopify while simultaneously enhancing user experience and implementing new design patterns to drive conversions and customer loyalty.
My primary focus was improving navigation and product findability, achieved by restructuring the site's menu and implementing intuitive filters. Introducing coffee subscriptions demanded the seamless integration of a subscription model while designing starter packages required careful consideration of product bundling strategies.
Redesigning the product page involved enhancing aesthetics, usability, and conversion rates, with the strategic integration of upsells, product reviews, and loyalty points to drive AOV and CRO.
Technical integrations such as product reviews, loyalty points, and a B2B signup form required thorough testing to ensure seamless functionality.
By leveraging UX design and front-end development expertise, I successfully delivered an end-to-end website build that exceeded the client's expectations, setting the stage for increased sales and customer satisfaction.
My primary focus was improving navigation and product findability, achieved by restructuring the site's menu and implementing intuitive filters. Introducing coffee subscriptions demanded the seamless integration of a subscription model while designing starter packages required careful consideration of product bundling strategies.
Redesigning the product page involved enhancing aesthetics, usability, and conversion rates, with the strategic integration of upsells, product reviews, and loyalty points to drive AOV and CRO.
Technical integrations such as product reviews, loyalty points, and a B2B signup form required thorough testing to ensure seamless functionality.
By leveraging UX design and front-end development expertise, I successfully delivered an end-to-end website build that exceeded the client's expectations, setting the stage for increased sales and customer satisfaction.
Research
To be able to give our users what they need, we knew that we must first empathize with them. By exhibiting compassion for their feelings, thoughts, behaviors, and needs, we were effectively able to identify our user's pain points and solve design problems that came up. During our research, we completed a series of user interviews, heuristic evaluation, and benchmarking to inform our design.
Competitor Analysis
By thoroughly analyzing and inspecting these aspects of website functionality and UX, we gained insights into the competitors' tech stack, strengths, and weaknesses and identified opportunities to differentiate the Jaspers Coffee website and improve the overall user experience. The goal was to ensure that the website migration also featured an updated tech stack and UI design patterns to set the merchant up for success against the direct competitors in the market.
A series of UI design patterns and 3rd party functionality were identified from the competitor's tech stack during the benchmarking session.
Define
I began by reviewing the current website structure by analyzing the product data and industry-standard labels relevant to the merchant's catalog.
Following a thorough review and client collaboration, I recommended a refined sitemap aimed at enhancing navigation, streamlining content organization, and elevating overall user experience. This proposal was tailored to align with the client's overarching objectives for improved navigation.
The primary focus was to optimize navigation ease and highlight the "Save 10% on Coffee" offer for increased visibility not only on the homepage but also within the navigation. The goal was to ensure an increase the likelihood of users engaging with the promotion as it can be visible globally throughout the site here.
Information Architecture Audit
Analyzing the information architecture of the website and its products helped us to understand how users access and navigate the products. By reviewing the layout, labeling, and product intformation, we were able to identify areas that need improvement. This process ensures that users can easily find the information they are looking for. By creating a clearer structure and improving ease of navigation, we aim to develop a more user-friendly sitemap that enhances the overall navigation experience of the website.
Based on the approved product audit mapping, we were able to align with the client and update the main navigation taxonomy for their e-commerce collections.
Wireframe and Revisions
I've made several enhancements to the product page to boost average order value (AOV) and streamline the user experience:
Product Subscriptions: Now, customers can easily subscribe to all coffee products, ensuring convenience and recurring revenue for the business.
Sticky Buy Button: To enhance user engagement and encourage more conversions, I've implemented a sticky buy button. This ensures that the call-to-action (CTA) to checkout is always visible to users as they browse the conversion page.
Custom Product Upsell Section: I've added a custom upsell section powered by metafields. This feature allows the client to assign recommended products and suggest complementary items, enhancing the overall shopping experience.
AI-Powered Upsells: Leveraging Shopify's standard AI product upsell section, our page now dynamically adapts to users' preferences and behavior in real-time. This advanced merchandising strategy strategically places upsells, maximizing opportunities for increased AOV.
Social Proof and Reviews: Customer reviews, ratings, and testimonials are now prominently showcased on the page. This not only builds trust and credibility but also helps users make informed purchasing decisions.
Mobile Optimization: The page has been optimized for mobile responsiveness, ensuring seamless navigation and usability on smaller screens. This prioritization of mobile experience enhances accessibility and encourages conversions across all devices.
Design
Taxonomy Implementation
Translating sitemap and UX requirements into refined website mockups, then seamlessly integrating them into the navigation during development.
Typography Guidelines
During the process of migrating and redesigning the outdated website, our main hurdle was the lack of a clear style guide.
By collaborating closely with the stakeholders, we utilized their two existing fonts to create updated UI guidelines. This ensured consistency across the website, revitalizing its visual appeal and reinforcing the brand's presence.
Our typography guidelines ensure consistency in fonts, spacing, and brand colors for a cohesive and recognizable design.
Color Guidelines
In the redesign process, I made strategic use of the existing brand colors to maintain consistency and reinforce brand identity.
Mockups
After creating a wireframe, new navigation labels, and a UI kit I began to build the UI for the project.
Launch
The Project
By refining navigation and enhancing product discoverability, we've laid the foundation for a seamless browsing experience through thoughtfully merchandising the site to improve ease of navigation and make products more easily findable.
The successful implementation of coffee subscriptions, starter packages, and redesigned product pages allows customers to easily sign up for recurring deliveries of their favorite products.
Through strategic integration of upsells, product reviews, and loyalty programs, we've not only enhanced conversion rates but also fostered long-term customer loyalty.
The technical integrations, rigorously tested and flawlessly executed, ensure a robust and reliable online platform.
The successful implementation of coffee subscriptions, starter packages, and redesigned product pages allows customers to easily sign up for recurring deliveries of their favorite products.
Through strategic integration of upsells, product reviews, and loyalty programs, we've not only enhanced conversion rates but also fostered long-term customer loyalty.
The technical integrations, rigorously tested and flawlessly executed, ensure a robust and reliable online platform.
