{"id":133,"date":"2018-07-27T22:07:42","date_gmt":"2018-07-27T22:07:42","guid":{"rendered":"https:\/\/writemaps.com\/blog\/?p=133"},"modified":"2019-09-22T23:49:00","modified_gmt":"2019-09-22T23:49:00","slug":"perfect-information-architecture-e-commerce-store-allbirds-com-case-study","status":"publish","type":"post","link":"https:\/\/writemaps.com\/blog\/perfect-information-architecture-e-commerce-store-allbirds-com-case-study\/","title":{"rendered":"Perfect Information Architecture for Your E-commerce Store: Allbirds.com Case Study"},"content":{"rendered":"<p>So you\u2019re planning an e-commerce website, and you want it to be perfect. Simple and organised information architecture, with all your products organised into neat little categories. Just like the good folk at Allbirds.com who sell those woolly shoes that are all the rage in Silicon Valley.<\/p>\n<p>You want visitors to skip through your site and find exactly what they need. They fill up their carts and check out, paying you their spending money for your awesome products. Ideal.<\/p>\n<p>BUT&#8230; right now, you don\u2019t have a website. Yet.<\/p>\n<p>So what happens next? How can you turn your notes and ideas into a fully functioning e-commerce website?<\/p>\n<p>You\u2019re in the right place. Scroll along as we cover the basics of getting an e-commerce website created from woah to go, with an emphasis on planning and information architecture. Along the way, we\u2019ll also be reviewing Allbirds.com as a case study in e-commerce information architecture.<\/p>\n<hr \/>\n<h3>Overview:<\/h3>\n<ul>\n<li><a href=\"#your-outcomes\">Your Outcomes<\/a><\/li>\n<li><a href=\"#what-is-information-architecture\">What is Information Architecture?<\/a><\/li>\n<li><a href=\"#information-architecture-example\">Information Architecture Example: Allbirds.com<\/a><\/li>\n<li><a href=\"#where-do-landing-pages-fit\">Where do Landing Pages fit?<\/a><\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"your-outcomes\">Your Outcomes<\/h2>\n<p>Let\u2019s start with the goals. They\u2019re likely to be something like this:<\/p>\n<ul>\n<li>Your customers need to be able to find your products, so that they can buy them (yay, money!).<\/li>\n<li>They need to be able to answer their generic questions about shipping, sizing, returns, and so on, within 30 seconds (the age of the internet has vastly reduced our collective attention span).<\/li>\n<li>Your checkout flow needs to be dead simple. Get the right product in the cart, and get the heck out of there.<\/li>\n<li>Oh, and you\u2019ll be wanting SEO-friendly pages that will help attract organic traffic for your main keywords.<\/li>\n<\/ul>\n<p>How can you achieve all this with minimum effort? Our recommendation&#8230; Be like <a href=\"https:\/\/www.allbirds.com\/\" target=\"_blank\" rel=\"nofollower noopener\">Allbirds.com<\/a>. We\u2019ll jump into our case study below after explaining\u2026<\/p>\n<h2 id=\"what-is-information-architecture\">What is Information Architecture?<\/h2>\n<p>It sounds cumbersome, but it\u2019s actually quite simple.<\/p>\n<p>Information architecture is organising the content of your website in a logical, category-based flow of information. It\u2019s about creating a website that is friendly for users and optimized for SEO.<\/p>\n<p>Like many aspects of website creation and development, the whole point of information architecture harks back to user experience.<\/p>\n<h3>User-First Information Architecture<\/h3>\n<p>Make it easy for people to find what they want! That\u2019s it.<\/p>\n<p>Okay there\u2019s more if we dig deeper\u2026<\/p>\n<ul>\n<li>Who is your target market?<\/li>\n<li>What do they <strong>actually<\/strong> want? What is the value to them?<\/li>\n<li>Which words do they use to describe it and how do they talk about\/ categorise it?<\/li>\n<li>What action do they take that might lead them to arrive at your website?<\/li>\n<\/ul>\n<p>Talk to people. It\u2019s actually way more important than just planning by yourself. With these answers you\u2019ll have a clear direction for not just your marketing copy, but also how to organise the information architecture for your website.<\/p>\n<p>Once at your site, there are 3 main paths that people follow:<\/p>\n<ol>\n<li>They can scroll (put your most popular products\/categories on the home page)<\/li>\n<li>They can Search (make sure the basic search terms give good results)<\/li>\n<li>They can navigate via a Menu or Categories (use your customers&#8217; language, and user test!)<\/li>\n<\/ol>\n<p>You\u2019ll be wanting to map out an easy to follow route tor each of these main paths.<\/p>\n<p>Let\u2019s look at how the pros do it.<\/p>\n<h2 id=\"information-architecture-example\">Information Architecture Example: Allbirds.com<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-134 size-full\" src=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-e1532112897513.png\" alt=\"Information Architecture - Allbirds case study\" width=\"883\" height=\"679\" srcset=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-e1532112897513.png 883w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-e1532112897513-300x231.png 300w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-e1532112897513-768x591.png 768w\" sizes=\"(max-width: 883px) 100vw, 883px\" \/><\/p>\n<p>Allbirds are the Wool Runners taking over the world. We love them because they\u2019re made with New Zealand superfine merino wool, and co-founded by a New Zealander. Good country that =)<\/p>\n<p>Other than comfort and style (and did I mention ease of washing? That reminds me, I need to throw mine through the washing machine again&#8230;), there\u2019s another more topical reason we love Allbirds. They keep their information architecture simple.<\/p>\n<p>Their site can be divided into &#8216;Information Pages&#8217; and a list of &#8216;Products&#8217; sorted into &#8216;Categories&#8217; (or \u2018Collections\u2019 in Shopify).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-135 size-full\" src=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-2.png\" alt=\"Example sitemap of Allbirds information architecture\" width=\"827\" height=\"323\" srcset=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-2.png 827w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-2-300x117.png 300w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-2-768x300.png 768w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/p>\n<p>Take a quick peek at <a href=\"https:\/\/writemaps.com\/wmaps\/shareMap\/2lofa2b3snviwnr\">Allbirds\u2019 Information Architecture<\/a>.<\/p>\n<p><strong>Platform Tip:<\/strong> If you haven\u2019t chosen a platform for your store yet, I\u2019d highly recommend using either <a href=\"https:\/\/www.shopify.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Shopify<\/a> or <a href=\"https:\/\/www.squarespace.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Squarespace<\/a>. Sure there is a monthly cost, but you\u2019ll save time and money on design\/coding bills by buying a pixel-perfect theme, you\u2019ll have a perfectly optimised checkout, no headaches with integrating payment providers, and they provide a good base for SEO work (sitemaps, category\/landing pages, etc.). Just do it.<\/p>\n<h3>Product\/Category Pages<\/h3>\n<p>Using Allbirds as a guide, we\u2019ll put you in charge of listing your Products. You\u2019ve got this. You\u2019ll also need to group these under Category headings that make sense to your customers.<\/p>\n<p>When visiting Allbirds, you\u2019ll notice that they first categorise by gender, and only after that can you filter by product type. Other stores with a wider range of products will more likely offer the \u2018type of product\u2019 choice first. You\u2019ll have to do what suits your product range best.<\/p>\n<figure id=\"attachment_136\" aria-describedby=\"caption-attachment-136\" style=\"width: 632px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-136 size-full\" src=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-3.png\" alt=\"Information Architecture ecommerce - Allbirds example\" width=\"632\" height=\"280\" srcset=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-3.png 632w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-3-300x133.png 300w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><figcaption id=\"caption-attachment-136\" class=\"wp-caption-text\">Gender categorisation.<\/figcaption><\/figure>\n<figure id=\"attachment_137\" aria-describedby=\"caption-attachment-137\" style=\"width: 1399px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-137 size-full\" src=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-4.png\" alt=\"Information Architecture ecommerce - Allbirds products\" width=\"1399\" height=\"384\" srcset=\"https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-4.png 1399w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-4-300x82.png 300w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-4-768x211.png 768w, https:\/\/writemaps.com\/blog\/wp-content\/uploads\/2018\/07\/all-birds-4-1024x281.png 1024w\" sizes=\"(max-width: 1399px) 100vw, 1399px\" \/><figcaption id=\"caption-attachment-137\" class=\"wp-caption-text\">Filter by product type.<\/figcaption><\/figure>\n<h3><\/h3>\n<h3>Information Pages<\/h3>\n<p>So all that\u2019s left to decide is the Information Pages. Keep in mind that you want to launch sooner, and you can always add more later. We\u2019ve taken a look at Allbirds Information Pages, and come up with the following:<\/p>\n<p><strong>Enough to launch website:<\/strong><\/p>\n<ul>\n<li>Help:\n<ul>\n<li>Shipping<\/li>\n<li>Returns\/ Exchanges<\/li>\n<li>Sizing\/ Fit Guide<\/li>\n<li>FAQs<\/li>\n<\/ul>\n<\/li>\n<li>About Us<\/li>\n<li>Contact Us<\/li>\n<\/ul>\n<p><strong>Optional Extras:<\/strong><\/p>\n<ul>\n<li>Extra &#8216;About Us&#8217; Stories<\/li>\n<li>Product Care Info<\/li>\n<li>Physical Stores List\/ Map<\/li>\n<li>Gift Cards\/ Vouchers<\/li>\n<li>Guarantee<\/li>\n<li>Partnerships<\/li>\n<li>Press<\/li>\n<li>Careers<\/li>\n<\/ul>\n<p>There we go. Pick and choose your own Information Pages for launch, and start filling them with content!<\/p>\n<h2 id=\"where-do-landing-pages-fit\">Where do Landing Pages fit?<\/h2>\n<h3>Organic search:<\/h3>\n<p>When users are searching for products, they\u2019d rather see products than a word-heavy landing page. In e-commerce, category and product pages will often be used as \u2018landing pages\u2019.<\/p>\n<p>So for product-specific searches, grab a Shopify plug-in to ensure you are doing SEO well on these pages. \u2018On-page SEO\u2019 is all about having the target keyword or phrase in all the right places in the code and content.<\/p>\n<p>Your homepage can target 1-2 keywords, and for target keywords that are not specific products, you can also create extra information or blog pages.<\/p>\n<h3>Paid Acquisition (Ads) or Email Marketing Campaigns:<\/h3>\n<p>While you can direct Ad or Email click-throughs to your homepage or category\/ product pages, you could also make specific pages for:<\/p>\n<ul>\n<li>Bundle deals &#8211; combining several items for a discounted \u2018package price\u2019<\/li>\n<li>Competitions &#8211; e.g. spin-to-win<\/li>\n<li>Targeting general style keywords &#8211; e.g. \u2018comfy running shoes\u2019<\/li>\n<\/ul>\n<p><strong>Tip:<\/strong> When marketing a specific product, link straight to that product. No need to add extra steps. For non-specific ad\/ email campaigns, you can link straight to the homepage, but be sure to add a tracking code so you can measure the effectiveness of each campaign!<\/p>\n<h3>Landing Page URL:<\/h3>\n<p>While the Category and Product Pages will have a natural structure within Shopify or Squarespace, for other Landing Pages you just need URLs that contain keywords and have a structure that makes sense such as:<br \/>\nyourwebsite.com\/spin-to-win<br \/>\nyourwebsite.com\/runners\/comfy-running-shoes<\/p>\n<p>&nbsp;<\/p>\n<p>Enough reading, time to start doing!<\/p>\n<p>Don\u2019t get me wrong, creating content will still take time and effort (especially product images!), but you can quickly figure out your information architecture by looking at the examples of market leaders, like Allbirds.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So you\u2019re planning an e-commerce website, and you want it to be perfect. Simple and organised information architecture, with all your products organised into neat little categories. Just like the good folk at Allbirds.com who sell those woolly shoes that are all the rage in Silicon Valley. You want visitors to skip through your site &#8230;<\/p>\n","protected":false},"author":2,"featured_media":136,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/posts\/133"}],"collection":[{"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":24,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/posts\/133\/revisions\/252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/media\/136"}],"wp:attachment":[{"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/writemaps.com\/blog\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}