Johnstones BBQ - Transforming a 45-Year-Old Retailer's First Online Sale
responsive redesign
design system
ux/ui audit
e-commerce
Overview
Johnstones had been selling BBQ grills and parts in Vancouver since 1975. They had loyal in-store customers and deep product expertise. But they'd never received a single online order.
Their website existed, but it wasn't built to sell. It was an overwhelming catalog that replicated their warehouse organization online—three layers of nested navigation with 20+ brand categories, part types, and product lines all competing for attention. On mobile, the unresponsive mega-menu made even basic browsing nearly impossible.
The Business Challenge
Competitors offered streamlined e-commerce experiences while Johnstones was stuck with an informational site that couldn't convert browsers into buyers. In an increasingly digital market, this wasn't just a usability problem—it was threatening their business survival.
Understanding Why the Site Couldn't Convert
I conducted a UI/UX audit of the existing site to understand what was preventing conversions. The surface problem was "no shopping cart," but systematic analysis revealed deeper issues: navigation organized by warehouse logic rather than customer thinking, homepage hierarchy that competed with itself, and zero trust signals to build purchase confidence.
Every barrier I identified—confusing navigation, competing focal points, tiny images, missing trust signals—was a conversion leak. Fix one and you'd still lose customers at the next friction point. The solution required systematic thinking: rebuild the foundation to remove all barriers between customer intent and transaction completion.
3+ layer nested menu organized by brand → model → part type. Customers had to already know exact specifications before finding anything.
Old Navigation: The navigation was organized for staff, not customers.
Seven different sections fighting for attention: promotional banners, random product grids, "New Barbecues," "Fire Pits"—each with different visual treatments.
Nothing communicated: Do you ship? Where? What's your return policy? Sites that look outdated trigger "is this safe?" anxiety. Without visible trust signals, customers couldn't build confidence to enter payment information.
Old Homepage: No heirarchy and trust signal
Thumbnail images roughly 120x120 pixels—too small to build confidence. Customers making $500-$4,000 decisions based on passport-photo-sized images. Product info below was inconsistent: some showed prices, others didn't.
Category pages showed poor information hierarchy—filters, breadcrumbs, and product grids competed for attention with no clear scanning path.
Desktop-only layout completely broke on mobile—filters pushed to the bottom, navigation unusable, no responsive adaptation.
Product pages: Filter system and purchase flow was broken
Research and Strategy
After analyzing direct and indirect competitors (Home Depot, Canadian Tire, BBQGrills, BBQ Galore), I identified patterns that successful e-commerce sites shared: flattened navigation organized by product type, trust signals prominently displayed, large product imagery, and clear filtering systems. Failed sites buried critical information or forced users through complex paths.
This analysis revealed that successful e-commerce sites weren't just well-designed—they were systematically designed. Home Depot, Amazon, and BBQGalore all shared consistent component behaviors, predictable interactions, and cohesive visual language. This consistency wasn't accidental; it came from design systems.
Johnstones' problem wasn't just poor navigation or small images—it was the absence of a shared foundation. Every page felt different because nothing was connected. Fixing screens one by one wouldn't solve this; we needed to build infrastructure that made consistency automatic.
This insight shaped my recommendation: before redesigning screens, build the system that ensures every screen feels trustworthy and cohesive.
Building Trust Through Systematic Design
I recommended building a design system foundation first. For an e-commerce site needing to launch quickly, this might seem like overhead—why not just redesign screens and add a shopping cart? But Johnstones' problem wasn't just missing features. They had zero online sales because the site felt untrustworthy and inconsistent. Visual polish and systematic interactions don't come from ad-hoc screen designs—they come from shared foundations.
Building the component library first meant the entire site would launch with cohesive polish rather than becoming progressively more inconsistent as we added features under deadline pressure. This consistency is what builds the trust needed to convert that first skeptical customer. As a small team working in Shopify, Johnstones also needed to maintain and grow the site themselves. By building components directly in their Shopify environment with clear documentation, they will be able to add products and build pages independently—making the solution sustainable, not just a one-time fix.
Reusable components built with tokens: update one value, change the entire system
The Redesign: Removing Barriers Between Intent and Transaction
Working with the visual designer, I applied these insights to Johnstones' redesign, focusing on three conversion barriers: navigation structure, trust signals, and product information hierarchy. Rather than reinventing conventions, we adopted proven e-commerce patterns that aligned with customer mental models—flattened navigation by product type, progressive filtering, and consistent product page structures. The goal wasn't innovation for its own sake; it was removing barriers between intent and purchase.
Desktop: Some of the key pages showing improvements from the old site. View full site here
Three-layer navigation flattened to browse-by-product-type. Homepage reorganized from competing sections to clear hierarchy with trust signals. Product pages upgraded from tiny thumbnails to large imagery with visible pricing. Mobile experience rebuilt from unusable mega-menu to touch-optimized browsing. Each change removed barriers between customer intent and completed purchase.
Impact: First Online Sale Within One Week
Within seven days of launching the redesigned site, Johnstones received their first online order in the company's 45-year history.
That single transaction validated everything: the simplified navigation worked, the trust signals built confidence, the product pages provided enough information for customers to commit, and the checkout flow removed enough friction for someone to actually complete a purchase.
Reflection
This project reinforced why I care deeply about design systems work: when applied strategically, systems thinking removes barriers and enables businesses to compete in digital markets they couldn't access before. If I could do this again, I would have conducted lightweight user testing before the redesign to validate assumptions with real customers—the audit provided clear problems to solve, but observing actual user behavior would have strengthened my conviction in the solutions. The most satisfying outcome isn't the visual transformation—it's that Johnstones' team now maintains and grows the site independently, proving the system is genuinely usable, not just well-organized in Figma.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg"><path d="M 2.539 3.932 C 2.312 4.009 2.068 4.007 1.829 3.991 C 1.259 3.983 1.381 3.41 1.427 3.066 C 1.308 3.346 0.893 3.665 0.563 3.445 C 0.289 3.249 -0.001 2.578 0 2.268 C 0.005 2.176 0.02 2.072 0.104 2.009 C 0.288 1.905 0.529 1.883 0.742 1.865 C -0.125 1.762 0.068 1.559 0.277 0.96 C 0.362 0.689 0.609 0.642 0.874 0.555 C 1.216 0.446 1.319 0.759 1.404 0.982 C 1.2 0.273 1.175 0.032 2.106 0 C 2.479 0.024 2.492 0.261 2.466 0.531 C 2.451 0.712 2.437 0.895 2.395 1.073 C 2.543 0.807 2.762 0.518 3.107 0.449 C 3.248 0.436 3.345 0.543 3.421 0.633 C 3.508 0.736 3.589 0.843 3.646 0.961 C 3.746 1.174 3.952 1.478 3.814 1.704 C 3.738 1.796 3.305 1.821 3.162 1.842 C 3.412 1.894 3.806 1.987 3.958 2.179 C 4.069 2.399 3.935 2.711 3.839 2.923 C 3.742 3.097 3.613 3.465 3.326 3.373 C 3.033 3.263 2.769 3.077 2.602 2.834 C 2.662 3.034 2.728 3.233 2.761 3.438 C 2.804 3.628 2.789 3.869 2.539 3.932 Z" fill="rgb(147, 131, 213)" height="4px" id="fHIFz3tCQ" transform="translate(0 0)" width="4px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg"><path d="M 4.106 1.395 C 4.463 1.478 4.721 1.786 4.423 2.105 C 4.155 2.37 3.625 2.571 3.26 2.664 C 3.512 2.744 3.765 2.853 3.951 3.046 C 4.061 3.164 4.15 3.311 4.165 3.474 C 4.188 3.688 4.067 3.909 3.863 3.988 C 3.489 4.136 2.888 3.987 2.581 3.737 C 2.642 4.073 2.63 4.433 2.415 4.714 C 2.217 4.973 1.837 5.073 1.538 4.945 C 1.23 4.815 1.08 4.463 1.104 4.143 C 1.116 3.941 1.16 3.741 1.254 3.56 C 1.113 3.652 0.968 3.74 0.817 3.815 C 0.704 3.874 0.583 3.918 0.456 3.931 C 0.298 3.955 0.113 3.903 0.036 3.752 C -0.032 3.614 0.01 3.453 0.054 3.314 C 0.158 2.985 0.391 2.739 0.708 2.606 C 0.521 2.551 0.351 2.441 0.228 2.288 C 0.171 2.222 0.119 2.151 0.089 2.069 C 0.023 1.87 0.064 1.63 0.198 1.468 C 0.266 1.39 0.354 1.334 0.45 1.297 C 0.648 1.217 0.854 1.237 1.036 1.347 C 1.2 1.445 1.352 1.564 1.477 1.708 C 1.454 1.5 1.469 1.288 1.515 1.084 C 1.618 0.648 1.887 -0.052 2.437 0.003 C 2.851 0.07 2.972 0.553 2.976 0.913 C 2.978 1.16 2.912 1.404 2.809 1.627 C 3.193 1.402 3.667 1.287 4.106 1.395 Z" fill="rgb(244, 202, 136)" height="5.000545191557483px" id="LQzYyMB1U" transform="translate(0.15 0)" width="4.553342585242551px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 5 1" xmlns="http://www.w3.org/2000/svg"><path d="M 4.155 0.809 C 4.228 0.883 4.278 0.853 4.349 0.783 C 4.41 0.723 4.391 0.673 4.419 0.584 C 4.471 0.423 4.612 0.256 4.704 0.244 C 4.76 0.237 4.788 0.245 4.824 0.306 C 4.835 0.325 4.837 0.353 4.849 0.34 C 4.854 0.334 4.877 0.275 4.894 0.259 C 4.959 0.198 5.029 0.295 4.987 0.388 C 4.934 0.507 4.782 0.836 4.782 0.836 C 4.766 0.854 4.74 0.848 4.734 0.819 C 4.731 0.804 4.739 0.76 4.724 0.769 C 4.668 0.801 4.625 0.89 4.54 0.873 C 4.515 0.868 4.464 0.848 4.439 0.843 C 4.386 0.832 4.367 0.899 4.301 0.925 C 4.175 0.975 4.158 0.885 4.062 0.885 C 4.038 0.885 4.005 0.91 3.978 0.914 C 3.931 0.921 3.841 0.919 3.828 0.831 C 3.821 0.78 3.846 0.753 3.845 0.737 C 3.844 0.727 3.817 0.705 3.814 0.67 C 3.811 0.635 3.827 0.612 3.824 0.58 C 3.739 0.699 3.617 0.84 3.495 0.856 C 3.43 0.864 3.411 0.815 3.387 0.813 C 3.378 0.812 3.309 0.851 3.284 0.857 C 3.219 0.87 3.036 0.891 2.984 0.854 C 2.946 0.828 2.927 0.785 2.934 0.723 C 2.851 0.809 2.636 0.976 2.657 0.69 C 2.663 0.607 2.706 0.535 2.721 0.456 C 2.644 0.539 2.571 0.634 2.489 0.708 C 2.439 0.754 2.28 0.908 2.244 0.778 C 2.227 0.715 2.248 0.661 2.258 0.604 C 2.261 0.59 2.273 0.577 2.255 0.58 C 2.21 0.67 2.144 0.749 2.062 0.808 C 1.991 0.854 1.871 0.897 1.863 0.733 C 1.784 0.852 1.513 1.013 1.532 0.714 C 1.451 0.812 1.177 0.975 1.205 0.681 C 1.208 0.643 1.228 0.616 1.227 0.58 C 1.135 0.706 1.042 0.914 0.899 0.886 C 0.764 0.859 0.895 0.55 0.921 0.456 C 0.783 0.555 0.693 0.796 0.546 0.867 C 0.459 0.908 0.382 0.868 0.403 0.713 C 0.412 0.65 0.45 0.595 0.462 0.533 C 0.41 0.583 0.36 0.636 0.311 0.691 C 0.28 0.726 0.192 0.819 0.172 0.856 C 0.154 0.888 0.174 0.903 0.168 0.936 C 0.158 0.989 0.033 1.033 0.008 0.967 C -0.018 0.898 0.026 0.852 0.057 0.809 C 0.21 0.602 0.399 0.417 0.564 0.227 C 0.6 0.186 0.643 0.108 0.693 0.189 C 0.758 0.295 0.628 0.559 0.587 0.656 C 0.592 0.663 0.625 0.622 0.632 0.614 C 0.715 0.512 0.769 0.417 0.865 0.331 C 0.914 0.287 1.025 0.177 1.072 0.257 C 1.134 0.364 1.019 0.61 0.986 0.714 C 1.084 0.633 1.151 0.491 1.236 0.385 C 1.267 0.344 1.301 0.305 1.339 0.27 C 1.408 0.24 1.441 0.296 1.436 0.395 C 1.43 0.499 1.361 0.611 1.326 0.7 C 1.468 0.696 1.539 0.504 1.625 0.37 C 1.642 0.344 1.702 0.252 1.722 0.247 C 1.751 0.239 1.789 0.257 1.799 0.303 C 1.827 0.436 1.694 0.615 1.664 0.733 C 1.809 0.692 1.866 0.497 1.953 0.351 C 1.977 0.31 2.004 0.271 2.035 0.235 C 2.092 0.2 2.137 0.258 2.129 0.346 C 2.122 0.434 2.015 0.608 1.988 0.7 C 2.017 0.697 2.063 0.664 2.089 0.639 C 2.13 0.597 2.165 0.55 2.194 0.499 C 2.241 0.419 2.365 0.082 2.448 0.256 C 2.502 0.367 2.398 0.604 2.406 0.618 C 2.563 0.514 2.671 0.287 2.834 0.208 C 3.006 0.255 2.796 0.577 2.766 0.7 C 2.763 0.716 2.845 0.652 2.852 0.645 C 2.879 0.621 2.904 0.595 2.927 0.566 C 3.028 0.438 3.069 0.226 3.202 0.144 C 3.277 0.098 3.382 0.114 3.363 0.268 C 3.351 0.364 3.186 0.542 3.13 0.6 C 3.109 0.621 3.003 0.694 3.033 0.752 C 3.057 0.801 3.314 0.758 3.357 0.703 C 3.346 0.533 3.487 0.182 3.606 0.171 C 3.672 0.164 3.712 0.238 3.696 0.333 C 3.677 0.445 3.526 0.635 3.474 0.728 C 3.473 0.754 3.527 0.732 3.538 0.728 C 3.684 0.676 3.833 0.426 3.927 0.256 C 3.966 0.186 4.036 -0.049 4.112 0.009 C 4.205 0.08 4.05 0.284 4.033 0.375 C 4.105 0.333 4.201 0.253 4.274 0.342 C 4.379 0.47 4.251 0.746 4.155 0.809 Z M 4.725 0.406 C 4.671 0.365 4.508 0.594 4.52 0.688 C 4.523 0.713 4.536 0.721 4.557 0.721 C 4.658 0.721 4.786 0.452 4.725 0.406 Z M 4.201 0.473 C 4.161 0.426 3.902 0.625 3.924 0.723 C 3.939 0.792 4.047 0.718 4.088 0.685 C 4.141 0.641 4.242 0.521 4.201 0.473 Z" fill="rgb(224, 107, 65)" height="1.0004177752253507px" id="otr3hZ9iw" width="5px"/></svg>)