Project Overview
The primary objective was to modernize the Shadrachs Coffee digital ecosystem by executing a comprehensive migration from their legacy platform on Wordpress to Shopify. This undertaking involved a complete site redesign focused on establishing a contemporary, user-centric visual identity while simultaneously integrating the robust, scalable e-commerce architecture necessary to support future business growth and improved operational efficiency.
Key Outcomes
• Visual menu system improved product discovery
• Mobile experience significantly simplified
• Navigation streamlined for better usability
• Platform migrated to scalable Shopify infrastructure
• Legacy QR codes and URLs preserved through redirect strategy
• Internal team gained easier content and product management tools
My Role
• Product & UX Design Lead
• Visual Design & Brand System
• Shopify Implementation
• Information Architecture
• Stakeholder communication (marketing and operations)
Problem
The legacy website created friction for both customers and internal stakeholders due to limited product visibility, weak mobile usability, and operational inefficiencies in managing subscriptions and customer data.
Customers struggled to browse the Shadrachs menu online because products were presented as a simple text-based list with little visual hierarchy or product identity. This made it difficult for users to quickly understand offerings or discover new items, limiting engagement and reducing the likelihood of product exploration. Migrating the platform to Shopify created an opportunity to redesign the menu experience with clearer visual organization, product imagery, and improved product discovery.
Internal stakeholders experienced operational friction when managing subscriptions and customer support requests due to limited reporting tools and fragmented customer data within the existing system. This made it difficult to quickly access customer information, track subscription activity, and resolve issues efficiently. Improving the platform infrastructure aimed to provide clearer reporting, centralized customer data, and improved visibility into subscription activity for daily operations.
Mobile users encountered usability issues caused by inconsistent layout patterns and poorly optimized interactive elements. Key actions such as submitting forms or navigating between pages were difficult to locate or reach on smaller screens, creating friction in the user journey. Addressing these issues required a mobile-first redesign focused on improving button visibility, interaction hierarchy, and overall touch accessibility.
Information Architecture
By focusing on reducing interface friction and improving visual hierarchy the redesign prioritized content and product visibility by removing persistent interface elements that previously limited usable screen space on mobile devices. This allowed users to focus on product discovery rather than interface navigation.
Navigation & Screen Real Estate
The legacy mobile experience prioritized a large, persistent “Menu” call-to-action positioned prominently near the bottom of the screen. While the intent was to make the menu easy to access, the placement competed with primary page content and significantly reduced the usable viewing area for users browsing the site.
This resulted in:
• Reduced content visibility
• Less space for promotional content and product discovery
• A visually crowded interface on smaller screens
The layout created unnecessary visual weight in the interface and limited the flexibility of the page structure.
Streamlined Navigation:
The redesigned Shopify implementation moved primary navigation into a standard mobile navigation drawer, allowing key actions such as the menu to remain easily accessible while freeing up valuable screen space for content.
This change allowed the interface to:
• Prioritize product imagery and content
• Improve visual hierarchy
• Increase the effective viewing area on mobile devices
• Create a more modern, scalable navigation structure
By reducing persistent interface elements, the new design gives the content room to breathe and improves overall usability.
From Text List to Visual Product Navigation
The previous menu experience presented drinks and products as a simple list of items with minimal visual distinction between categories.
While functional, this approach required users to read through multiple options before identifying what they were looking for.
The redesigned experience introduced a visual category-based menu system, allowing customers to quickly scan drink types using imagery and clear category labels.
Benefits include:
• Faster product recognition
• Reduced cognitive load for users browsing options
• Stronger product identity through imagery
• A more engaging browsing experience
This transformation shifts the menu from a functional list to a visual discovery experience.
UX Strategy
Visual Menu System
One of the primary UX improvements focused on transforming the drink menu from a text-heavy list into a visual browsing experience. The previous system required customers to read through multiple menu sections before identifying drink categories, which increased cognitive load and slowed product discovery.
The redesigned menu introduces a visual category system, allowing customers to quickly recognize drink types through imagery and clear labels. This shift prioritizes recognition over recall, enabling users to scan available options and navigate directly to product details with fewer interactions.
Product Discovery & Hierarchy
The redesign also focused on improving the hierarchy of product information across the site. High interest items such as signature drinks and coffee beans were surfaced more prominently to encourage exploration and reduce friction when navigating between categories.
By organizing content into clear product groupings, the experience better supports casual browsing while still allowing returning customers to quickly find familiar items.
Mobile-First Layout Decisions
Because the majority of traffic occurs on mobile devices, the UX strategy prioritized a mobile-first layout structure. Interactive elements such as buttons, navigation controls, and product cards were redesigned with improved touch targets and spacing to ensure accessibility across smaller screens.
Removing persistent interface elements and simplifying navigation allowed the interface to dedicate more screen space to product imagery and promotional content, improving both usability and visual clarity.
Shopify Migration Challenges
Subscription Migration
One of the primary challenges involved migrating existing coffee subscription customers from the legacy platform to Shopify’s subscription infrastructure.
Because subscription data could not be seamlessly transferred between systems, existing subscribers had to be contacted and guided through the process of re-establishing their subscriptions within the new platform. This required coordination between the website team and internal stakeholders to ensure a smooth transition without disrupting recurring orders.
Data & Platform Limitations
Migrating from a legacy WordPress environment to Shopify required reevaluating how product data, customer accounts, and site functionality would be structured within Shopify’s ecosystem.
Certain legacy features relied on plugins that did not have direct Shopify equivalents, requiring new workflows and third-party integrations to replicate essential functionality while maintaining site performance and reliability.
URL Structure & Redirect Strategy
Preserving search visibility and existing links required implementing a comprehensive redirect strategy. Legacy WordPress URLs followed a different structural format than Shopify’s page and product architecture.
Redirects were mapped and implemented to ensure that returning users and search engine traffic could reach the correct content without encountering broken links or navigation issues.
Legacy URL Preservation & QR Code Compatibility
One unique challenge during the migration involved preserving existing URLs that were already embedded in physical marketing materials. Across mobile drink trailers, advertisements, and printed collateral, QR codes directed customers to specific pages within the legacy website.
Because these QR codes were already deployed in the real world, replacing them was not a practical option. To prevent broken links and maintain a seamless customer experience, a redirect strategy was implemented to map legacy WordPress URLs to their corresponding Shopify pages.
This ensured that customers scanning existing QR codes would be automatically routed to the correct destination on the new site without interruption, allowing previously distributed marketing materials to remain functional after the migration.
Results and Impact
Improved Product Discoverability
Transforming the menu from a text-based list into a visual category system significantly improved how customers browse available drinks. The new layout allows users to quickly scan drink categories through imagery and clear labeling, reducing the effort required to locate specific items or explore new offerings.
Clearer Information Architecture
The redesigned navigation structure simplified how users move through the site. By consolidating navigation into a mobile-friendly menu and removing persistent interface elements, the redesign increased usable screen space and created a more balanced visual hierarchy. This allows customers to focus on content and product information rather than interface controls.
Mobile Experience Improvements
The new implementation prioritized mobile usability by improving touch targets, simplifying navigation patterns, and reducing visual clutter. Key actions such as viewing menu items, browsing products, and accessing location information are now easier to locate and interact with on smaller screens.
Operational Efficiency for Internal Teams
Migrating to Shopify provided the team with a more scalable and manageable platform for maintaining the site. Product listings, location updates, and customer data can now be managed through a centralized dashboard, reducing reliance on manual updates and improving day-to-day operational efficiency.
Seamless Platform Transition
Through careful redirect planning and URL mapping, the migration preserved compatibility with existing QR codes and marketing materials already deployed across physical locations and promotional campaigns. Customers scanning legacy QR codes are automatically routed to the correct pages on the new site, ensuring continuity between physical and digital experiences.
Stronger Brand Presentation
The redesign established a more cohesive digital brand presence through improved typography, imagery, and layout consistency. By shifting from a purely functional layout to a visually driven experience, the website better reflects the energy and identity of the Shadrachs brand.