Navigational Design Techniques in Online Retail

Your nav menu is creating "choice overload." Here's why 84% of users abandon sites with this one mistake. Most enterprise sites have way too many navigation options. The human brain can only process about 7 items at once. After that, we stop reading and start scanning. And when visitors scan, they miss what they need. A fascinating psychology principle called the "serial positioning effect" explains why: ↳ We remember what's first and last in a list, but struggle with everything in between. One of our clients at The Good had a "Shop" dropdown with dozens of options. Their primary product (responsible for 90% of sales) was buried in the middle. We restructured the navigation to surface core products first and last. Result? ~$1.4 million in additional annual revenue. Here's what you can do, today: ↳ Limit top-level navigation to 7 items maximum ↳ Put your most important items first and last ↳ Structure navigation around customer goals, not internal departments ↳ Test, measure, repeat When visitors can quickly find what they need, they buy more. Go figure 😅

𝗧𝗵𝗲 𝗠𝗶𝘀𝘀𝗶𝗻𝗴 𝗣𝗶𝗲𝗰𝗲 𝗶𝗻 𝗘𝗰𝗼𝗺 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻: 𝗖𝗼𝗻𝘁𝗲𝘅𝘁𝘂𝗮𝗹, 𝗜𝗻𝘁𝗲𝗻𝘁-𝗗𝗿𝗶𝘃𝗲𝗻 𝗢𝗻𝘄𝗮𝗿𝗱 𝗝𝗼𝘂𝗿𝗻𝗲𝘆𝘀 A lot of retailers think they’ve nailed navigation, but most of what’s out there is still just 𝗰𝗮𝘁𝗮𝗹𝗼𝗴𝘂𝗲-𝘀𝗽𝗲𝗮𝗸, 𝗻𝗼𝘁 𝘀𝗵𝗼𝗽𝗽𝗲𝗿-𝘀𝗽𝗲𝗮𝗸. Facet navigation is often a rigid, one-size-fits-all approach that makes customers 𝗱𝗼 𝗮𝗹𝗹 𝘁𝗵𝗲 𝘄𝗼𝗿𝗸—wading through endless options, filtering, and refining. It’s functional, sure, but it’s not 𝘴𝘮𝘢𝘳𝘵. Some retailers have started to get it and 𝗮𝘂𝗴𝗺𝗲𝗻𝘁 𝘁𝗵𝗲𝗶𝗿 𝗳𝗮𝗰𝗲𝘁𝘀 𝗮𝗻𝗱 𝗳𝗶𝗹𝘁𝗲𝗿𝘀 𝘁𝗼 𝗯𝗲 𝗶𝗻𝘁𝗲𝗻𝘁-𝗹𝗲𝗱. But only partially, take ASOS.com quick link strategy as an example for their ‘Tops’ PLP. What they’ve done is surfaced their most in-demand onwards journeys for this PLP, so far so good as that is hell of a lot of Tops. Now if the user was to engage with this navigational array such as the link to "T-shirts & Vests", you land on a page with 𝟮,𝟳𝟵𝟭 product choices in Tops! Great... but also, not great.  Now, you're left 𝗼𝘃𝗲𝗿𝘄𝗵𝗲𝗹𝗺𝗲𝗱 𝘄𝗶𝘁𝗵 𝗰𝗵𝗼𝗶𝗰𝗲 again and faced with a standard set of filters sorted alphabetically or by stock levels—none of which actually guide you towards 𝘄𝗵𝗮𝘁 𝘆𝗼𝘂 𝙧𝙚𝙖𝙡𝙡𝙮 𝘄𝗮𝗻𝘁. 👉 𝗧𝗵𝗲 𝗳𝗶𝘅? 𝗦𝗺𝗮𝗿𝘁𝗲𝗿, 𝗶𝗻𝘁𝗲𝗻𝘁-𝗱𝗿𝗶𝘃𝗲𝗻 𝗼𝗻𝘄𝗮𝗿𝗱 𝗹𝗶𝗻𝗸𝗶𝗻𝗴. Instead of dumping shoppers into a product-listing abyss, retailers should surface the most relevant facets upfront, based on: ✔️ 𝗪𝗵𝗮𝘁 𝘀𝗵𝗼𝗽𝗽𝗲𝗿𝘀 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗲𝘅𝗽𝗲𝗰𝘁 𝘁𝗼 𝘀𝗲𝗲 ✔️ 𝗖𝘂𝗿𝗿𝗲𝗻𝘁 𝘁𝗿𝗲𝗻𝗱𝘀 & 𝗱𝗲𝗺𝗮𝗻𝗱 ✔️ 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗮𝘃𝗮𝗶𝗹𝗮𝗯𝗶𝗹𝗶𝘁𝘆 𝗶𝗻 𝗿𝗲𝗮𝗹-𝘁𝗶𝗺𝗲 𝗪𝗵𝘆 𝗱𝗼𝗲𝘀 𝘁𝗵𝗶𝘀 𝗺𝗮𝘁𝘁𝗲𝗿? 1️⃣ It 𝗿𝗲𝗱𝘂𝗰𝗲𝘀 𝗳𝗿𝗶𝗰𝘁𝗶𝗼𝗻, making products easier to discover and buy. 2️⃣ It 𝗯𝗼𝗼𝘀𝘁𝘀 𝗰𝗼𝗻𝘃𝗲𝗿𝘀𝗶𝗼𝗻 𝗿𝗮𝘁𝗲𝘀 (CRO becomes a given). 3️⃣ It 𝘀𝘂𝗽𝗲𝗿𝗰𝗵𝗮𝗿𝗴𝗲𝘀 𝗦𝗘𝗢 - because search engines reward 𝗰𝗼𝗻𝘁𝗲𝘅𝘁𝘂𝗮𝗹, 𝘂𝘀𝗲𝗿-𝗳𝗿𝗶𝗲𝗻𝗱𝗹𝘆 𝗶𝗻𝘁𝗲𝗿𝗹𝗶𝗻𝗸𝗶𝗻𝗴 (that acutally get clicked), not keyword-stuffed footers nobody engages with. (dont get me started) Only a handful of retailers have figured out 𝗵𝗼𝘄 𝘁𝗼 𝗱𝗼 𝘁𝗵𝗶𝘀 𝗮𝘁 𝘀𝗰𝗮𝗹𝗲—those who have, are winning. The rest? They're stuck making customers work too hard. We built 𝗙𝗼𝘂𝗻𝗱𝗜𝘁! because enterprise retailers struggle to implement 𝘁𝗵𝗶𝘀 𝗹𝗲𝘃𝗲𝗹 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝘅𝘁𝘂𝗮𝗹 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻. But when they do? Game changer. Who's getting this right? Who's still making shoppers suffer? Let’s discuss. 🚀

Just finished a strategic session with an e-commerce client and it revealed some great insights. Particularly on their heatmaps. 90% of this client’s traffic is mobile. But users weren't scrolling past the first section. Why? Because homepage was designed for desktop users who don't exist. Simple mistake, but one we see all the time. Here's what the data showed: - The pop-up problem - 95% of interactions were people trying to close it, not convert - The scroll-depth disaster - Mobile users dropped off after barely one scroll - The women's category surprise - High click-through rate despite lower sales volume - The navigation nightmare - Users couldn't find what they wanted This is what we did: ➡️ Completely rethought the mobile experience. ➡️ Added anchor navigation that drives users deeper into the page. ➡️ Used psychological triggers like the Zeigarnik effect (Google it!) to create curiosity gaps. ➡️ Moved trust elements above the fold. ➡️Fixed the search functionality for ad traffic. This is why we did it: People don't scroll on mobile - they tap. So we gave them clear pathways to jump to relevant sections. When they anchor down to their desired content, they see everything they skipped. Curiosity drives them back up to explore. Result: Higher engagement, deeper page exploration, better conversions. It’s 4 weeks before this new design goes live. The lesson is simple… Desktop-first thinking kills your mobile conversions. 90% mobile traffic demands mobile-first strategy. Not mobile-friendly design. Mobile-first psychology. There’s a difference.

Last year a B2B client asked us why their beautiful, award‑winning site wasn’t converting. When we audited the analytics, we found users bouncing after 15 seconds and form fills at 0.7%. Their navigation mirrored their org chart, not their buyer’s path. So we did something radical: we cut their navigation from 50 pages down to 7. We rewrote the CTA like a real person would ask, and we removed three internal jargon pages entirely. The result? Form fills jumped to 1.4% (a 100% lift) within six weeks. More importantly, prospects told the sales team, “Your site actually speaks to us.” Here’s what I learned: clarity converts. A “comprehensive” website isn’t customer‑centric if it forces your buyers to play hide‑and‑seek. 🔹 Would you feel confident leaving your 70‑page PowerPoint on the table for a buyer to sift through? 🔹 Which page on your site causes the most friction, and why is it still there? Has anyone else has seen similar results from ruthless simplification? #UXDesign #DigitalStrategy #B2BMarketing #ConversionRate #WebExperience

Did you know 75% of smartphone interactions come down to just scrolling your thumb on a touch screen? This means people don’t want to need both hands to navigate a mobile site. They want everything to be a thumb tap away. If your site is a hassle to use on mobile, people just won’t use it. As you think about designing your site, consider what thumb-only navigation, or "Thumb Zones," might look like. “Thumb Zones” are where users are most comfortable and likely to take action on a mobile device. You can see this in the diagram below (courtesy of Branding Brand), and includes the following: → Primary CTAs (like "shop now") in the primary zone. → Essential information and secondary CTAs (like “learn more” instead of “shop now”) in the secondary zone. → Controls to change the mode or initiate different tasks (including search, privacy policies, and navigation menus) in the tertiary zone. This reduces friction by establishing a hierarchy, keeping the subconscious engaged and it maximizes the “tappability” of your content. Now think about your current post-click landing pages and checkouts, would you change anything?

Walmart used AB testing as part of a complete homepage redesign. "𝘧𝘦𝘢𝘵𝘶𝘳𝘪𝘯𝘨 𝘢 𝘤𝘰𝘮𝘱𝘭𝘦𝘵𝘦 𝘳𝘦𝘥𝘦𝘴𝘪𝘨𝘯 𝘰𝘧 𝘵𝘩𝘦 𝘱𝘢𝘨𝘦 𝘭𝘢𝘺𝘰𝘶𝘵 𝘢𝘯𝘥 𝘴𝘵𝘳𝘢𝘵𝘦𝘨𝘪𝘤𝘢𝘭𝘭𝘺 𝘱𝘭𝘢𝘤𝘦𝘥 𝘱𝘳𝘰𝘥𝘶𝘤𝘵 𝘵𝘪𝘭𝘦𝘴. 𝘞𝘢𝘭𝘮𝘢𝘳𝘵’𝘴 𝘪𝘯-𝘩𝘰𝘶𝘴𝘦 𝘌𝘹𝘱𝘦𝘳𝘪𝘮𝘦𝘯𝘵𝘢𝘵𝘪𝘰𝘯 𝘗𝘭𝘢𝘵𝘧𝘰𝘳𝘮 𝘦𝘯𝘢𝘣𝘭𝘦𝘥 𝘵𝘩𝘦 𝘏𝘰𝘮𝘦𝘱𝘢𝘨𝘦 𝘗𝘳𝘰𝘥𝘶𝘤𝘵 𝘢𝘯𝘥 𝘈𝘯𝘢𝘭𝘺𝘵𝘪𝘤𝘴 𝘵𝘦𝘢𝘮𝘴 𝘵𝘰 𝘮𝘢𝘬𝘦 𝘢𝘯 𝘪𝘯𝘧𝘰𝘳𝘮𝘦𝘥 𝘥𝘦𝘤𝘪𝘴𝘪𝘰𝘯." The images below, taken from the fantastic Internet Archive, contrast: A) Their old "𝗵𝗲𝗿𝗼 𝗯𝗮𝗻𝗻𝗲𝗿" approach, cycling through one promotion at a time B) Their newer "𝗽𝗿𝗼𝗱𝘂𝗰𝘁 𝘁𝗶𝗹𝗲" approach, where a wider range of promotions surround a smaller cycling hero banner They implemented the tiled layout, suggesting that for Walmart this is the most profitable design. This aligns with my experience from AB testing - expanding users' awareness of your product range is one of the most profitable moves on most ecommerce homepages. This is especially true for retailers with: • Diverse ranges - as it's very easy for users to miss things • Strong brands - as preconceptions often lead users to missing things 𝗧𝘄𝗼 𝗴𝗿𝗲𝗮𝘁 𝘄𝗮𝘆𝘀 𝘁𝗼 𝗳𝗶𝗻𝗱 𝗼𝘂𝘁 𝘄𝗵𝗲𝘁𝗵𝗲𝗿 𝘆𝗼𝘂 𝘀𝗵𝗼𝘂𝗹𝗱 𝗔𝗕 𝘁𝗲𝘀𝘁 𝗮 𝘀𝗶𝗺𝗶𝗹𝗮𝗿 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵: 1) In user research, explore customers' awareness of your full range (I spoke to a customer last week, who regularly shopped for her partner but not for herself, simply because she was unaware of a website's full range) 2) If you have multiple channels, look for differences which suggest opportunities (e.g. If some categories sell significantly better in-store than online, it might be because they’re unmissable on store shelves but easily overlooked on your website.)

Your nav bar is not a library or a dump. It’s a money-maker. Yet most e-Com stores treat it like a junk drawer. Stuffed with random links nobody clicks. Result? Confused visitors. Lost sales. Here’s the fix: → Keep only the pages that bring revenue (Shop, Best Sellers, Discounts, Bundles, etc.) → Push the “nice-to-haves” (About, Contact, Policies) down to the footer. → Order links by importance, not by what looks symmetrical. → Keep it short (5-7 links max) Think of your nav bar like an airport sign. Clear, simple, directing people to where they want to arrive. Cause if your visitors are forced to hunt around just to find your product page… They won’t. Navigation isn’t just aesthethics. Navigation is conversion💲

Best advice for ecommerce UX design? Design like your customer is rushing through an airport. Fashion brands love cluttered homepages with hero videos, pop-ups, and 12 different CTAs competing for attention. Your customer sees: chaos chaos chaos WHERE'S THE PRODUCT chaos. What works better: Clear visual hierarchy. One primary action. Easy navigation. We recently worked with a fashion brand that had a beautiful site that converted terribly. We simplified the user flow. Removed visual clutter. Made the path to purchase obvious. Conversions jumped 28%. Smart people don't want to hunt for your product. They want to find what they need and buy it. In 30 seconds or less. Visual complexity is friction. Friction kills sales. Keep the experience super simple.