Executive Summary
Nutcellars is a UK-based retail and e-commerce brand offering 100% Fairtrade macadamia nuts sourced from smallholder farmers in Malawi. Its range includes raw, chocolate-coated, caramelised and roasted salted macadamias, together with nut butters and chocolate spreads. The brand combines premium products with a meaningful mission: supporting farmers through Fairtrade premiums and encouraging sustainable farming practices.
Before this project, the digital experience did not reflect that story as one coherent brand. Products lived in Shopify, while the homepage, informational pages and blog content sat on a separate platform. Customers moved between disconnected experiences, navigation felt harder than it needed to be, and the client had to manage content in more than one place.
THE TRANSFORMATION
Inboundsys consolidated the fragmented presence into Shopify, redesigned four core page experiences using existing theme components, migrated 48 blog posts, strengthened on-page SEO, and created a responsive foundation designed to support discovery, trust and product exploration.
Project at a glance
Project / brand
Nutcellars
Client company recorded
Equinet Media
Website URL recorded
https://www.equinetmedia.com/
Industry and website type
Retail / e-commerce; e-commerce website
CMS and technology
Shopify; Shopify Liquid
Project type
Partial redesign
Scope delivered
Homepage, About page, Blog and Contact page; 48 blog posts developed/migrated
Duration and status
Less than one month; completed
Complexity
Low
Project owner
Inboundsys
The challenge: one brand, two disconnected experiences
The central challenge was structural, not cosmetic. Nutcellars’ products were already available in Shopify, but important brand and content journeys were hosted elsewhere. That separation weakened the path from awareness to purchase and made routine website management unnecessarily complicated.
| Area | What we implemented | Why it matters |
|---|---|---|
| Weak brand presentation | The website did not tell the Fairtrade and Malawi farmer story consistently. | A weaker emotional reason to choose the brand. |
| Poor user experience | Visitors crossed between platforms and page patterns. | More friction before product discovery or contact. |
| Difficult navigation | Commerce, information and articles were not part of one intuitive journey. | Users could lose context or abandon exploration. |
| Poor mobile experience | The fragmented structure and inconsistent presentation reduced ease of use on smaller screens. | Mobile visitors faced extra effort. |
| Difficult content management | The client maintained content across separate systems. | Slower updates and greater operational overhead. |
| Inconsistent branding | Typography, colors and component behavior lacked a single system. | Lower recognition and trust. |
| Accessibility limitations | Consistency and usability issues created avoidable barriers. | The experience was less inclusive. |
| Scalability limitations | Adding content across fragmented platforms was difficult to sustain. | Growth increased complexity instead of value. |
What the client wanted to achieve
Modernize the brand while keeping the Fairtrade mission and product quality central.
Improve user experience by creating a single, predictable journey from story to product.
Improve mobile usability with responsive layouts and touch-friendly navigation.
Make navigation clearer across the homepage, About, Blog, Contact and product journeys.
Build a scalable Shopify website the client could update without managing a separate platform.
Our approach: consolidate first, then optimize the journey
We used Shopify as the single source of truth for commerce, brand content and editorial publishing. This removed the underlying fragmentation while allowing the team to reuse proven Shopify theme components. Reuse was deliberate: it shortened delivery time, reduced unnecessary custom code and maintained familiar editing patterns inside the CMS.
| Phase | Work completed | Purpose |
|---|---|---|
| 1. Discover | Website audit, content audit and technical planning. | Mapped what existed, what needed migration and how content should fit Shopify. |
| 2. Align the brand | Brand alignment, typography and color system. | Created a consistent visual language for products, purpose and editorial content. |
| 3. Design the experience | UX, UI and responsive design for the four core page types. | Established clear hierarchy, navigation and reusable content patterns. |
| 4. Build in Shopify | Liquid implementation using existing theme components. | Delivered efficiently while limiting technical weight and maintenance risk. |
| 5. Migrate content | Moved the homepage, supporting pages and 48 blog posts. | Brought brand storytelling and SEO content beside the store. |
| 6. Validate and launch | Design, functional, responsive, browser and user-acceptance testing. | Protected quality across devices and real user journeys. |
How we built the website
A unified Shopify architecture
The redesigned experience brought the homepage, About page, Blog and Contact page into the same Shopify environment as the product catalogue. Customers could now move from the brand’s origin and Fairtrade commitments to relevant products without the visual or navigational interruption caused by switching platforms.
Reusable theme components
Rather than introduce a heavy custom framework for a low-complexity, fast-turnaround project, we worked with existing Shopify theme components. Each component was configured to support brand storytelling, clear content hierarchy and consistent spacing. This method reduced duplicate styling, preserved native Shopify editing and made future pages easier to assemble.
A scalable editorial engine
The migration of 48 blog posts was more than a content transfer. It established the blog inside the commerce platform, where educational content can attract search visitors, explain products and farming practices, and guide readers toward deeper exploration. Shopify’s CMS now gives the client one place to publish, edit and maintain content independently.
Responsive design: a consistent journey on every screen
Responsive design was included throughout UX and UI work, not treated as a final desktop-to-mobile conversion. Layouts were structured to adapt to available screen width while keeping essential content, navigation and product pathways easy to understand.
| Area | What we implemented | Why it matters |
|---|---|---|
| Navigation | Clearer information grouping and mobile-friendly interaction. | Visitors can move among story, blog, contact and products with less effort. |
| Content hierarchy | Headings, copy, imagery and calls to action adapt without losing priority. | The Fairtrade story remains readable and persuasive on smaller screens. |
| Reusable sections | Theme components stack predictably across breakpoints. | Consistent layouts reduce mobile defects and simplify future publishing. |
| Typography and color | A unified system maintains legibility and contrast. | Improves recognition, readability and accessibility. |
| Testing | Responsive and browser testing across representative journeys. | Confirms design intent and functionality beyond a single device. |
Performance optimization and Core Web Vitals readiness
The CSV does not include an audited before-and-after PageSpeed score or field Core Web Vitals report. Accordingly, this case study does not claim a numerical performance uplift. The performance outcome is grounded in the implemented architecture: consolidation into one Shopify storefront, reuse of existing theme components, a limited custom-development footprint, responsive design and structured testing.
These choices support the three Core Web Vitals areas that matter most to user experience: fast display of the main content (Largest Contentful Paint), responsive interaction (Interaction to Next Paint), and visual stability while the page loads (Cumulative Layout Shift).
| Performance area | Method adopted | Practical benefit |
|---|---|---|
| LCP readiness | Reduced platform hand-offs; focused page structure; reuse of an established Shopify theme. | A simpler rendering path helps primary content appear without unnecessary architectural overhead. |
| INP readiness | Limited custom functionality and reliance on proven native theme behavior. | Less avoidable scripting reduces the risk of sluggish taps and clicks. |
| CLS readiness | Responsive component patterns, consistent typography and predictable section layouts. | Stable content regions reduce disruptive movement during loading. |
| SEO efficiency | Meta titles and descriptions; 48 posts within the store domain and CMS. | Improves relevance signals and creates more searchable entry points. |
| Maintainable speed | One CMS and reusable components instead of parallel platforms. | Future updates are less likely to create inconsistent or duplicated technical patterns. |
PERFORMANCE PRINCIPLE
The best optimization was architectural simplicity: one Shopify environment, a controlled set of reusable components and no unnecessary rebuild of capabilities already supplied by the theme.
How the website is designed to generate leads and sales opportunities
For an e-commerce brand, conversion is not limited to a form submission. A productive website creates multiple steps toward revenue: attracting the right visitor, communicating value, reducing uncertainty, enabling product discovery and making contact straightforward. The unified Nutcellars experience strengthens that complete pathway.
| Funnel role | Website mechanism | Conversion contribution |
|---|---|---|
| Attract | 48 blog posts plus optimized meta titles and descriptions. | Creates organic-search entry points around products, Fairtrade and the brand story. |
| Engage | A cohesive homepage and About page explain the mission and sourcing story. | Builds emotional relevance and gives visitors a reason to continue. |
| Guide | Improved navigation connects editorial, informational and commerce content. | Reduces the steps and confusion between discovery and shopping. |
| Reassure | Consistent branding, responsive presentation and improved accessibility. | Signals professionalism and trust on desktop and mobile. |
| Convert | Products, content and Contact now sit in one managed experience. | Supports product exploration, purchase intent and direct enquiries. |
| Nurture | The blog provides an expandable library for future campaigns and education. | Keeps adding long-tail acquisition and engagement value over time. |
Testing and delivery
A consolidated build only creates value when the experience is dependable. The project therefore included review at design, functionality, responsive, browser and user-acceptance levels, followed by a structured delivery process.
Design review to confirm brand alignment, hierarchy and component consistency.
Functional testing of navigation, blog and core page interactions.
Responsive testing to verify layouts across screen sizes.
Browser testing to identify rendering or interaction inconsistencies.
User acceptance testing so the client could validate the completed experience.
Discovery, UI design, development, content migration, client review and launch.
Post-launch support to address issues after production release.
Results and business impact
The strongest result was consolidation. Nutcellars moved from a divided online presence to one cohesive Shopify store where customers can learn about the company’s Fairtrade mission, read useful content and explore products without losing context. The completed project modernized the brand image, improved the user experience and mobile journey, simplified content management, improved accessibility, supported e-commerce performance and created a scalable website foundation.
| Outcome | Business value |
|---|---|
| Unified customer experience | Products, brand pages and articles now form one continuous journey. |
| 48-post content asset | A substantial editorial library now supports SEO, education and future campaigns. |
| Simplified operations | Shopify CMS enables the client to manage core site content independently in one place. |
| Improved brand consistency | One typography, color and component system connects purpose with product. |
| Responsive reach | Customers receive a clearer, easier-to-use experience across screen sizes. |
| Scalable growth | Reusable theme components and a unified CMS make future expansion easier. |
Exact analytics, organic-traffic changes, lead/conversion changes and before-and-after performance scores were not supplied. The project outcomes are therefore reported qualitatively, based on the completed scope and verified implementation rather than estimated percentages.
Why this is a strong Inboundsys case study
This project shows how a focused Shopify engagement can create meaningful business value without unnecessary complexity. In less than one month, Inboundsys addressed the root problem fragmentation, then aligned brand, content, UX, responsiveness, SEO and maintainability around a single commerce platform. The team delivered four core page experiences and 48 blog posts using existing theme components, demonstrating a practical balance of speed, quality and scalability.
LONG-TERM VALUE
Nutcellars now owns a unified platform that can keep compounding value: every new article, campaign, story or product enhancement can be published within the same branded, searchable and conversion-oriented ecosystem.
Conclusion
Inboundsys unified Nutcellars’ brand, content and commerce in Shopify. Responsive design, 48 migrated blog posts, search metadata and reusable theme components now provide a scalable foundation that reduces friction, supports mobile users and connects the Fairtrade story directly to product exploration.
