Youth & Earth

Hey, Scott Austin, here in this video, I'm going to walk you through the store redesign that we did for youth and Earth. Youth and Earth is a company based in U.K. and they sell supplements in the United Kingdom and in Europe. They also have some sales in the United States, but they're mostly a European operation. And what prompted their redesign is they did a new design on their packaging. So their packaging, as you can see here, is really clean and it's got this strong taxonomy behind it on these blocks and the colors behind them kind of thing. So because they're doing a new packaging design, they wanted the store and the website to match the packaging. And before we did the redesign, here's the Internet time machine. This a this is broken on the top here, but here you can see the old packaging and a little bit of the old colors. It was a lot more organic and green and tans and a lot more white and black. With the orange is the highlight color. So the tone of the site changed quite drastically from the redesign, which is what they were going after. So let's go back to the site. So we started off with the Flex theme, which is my favorite theme for all stores. But this one we heavily, heavily customized the presentation. So what the store staff did is they went out and got a designer who made a figma mockup. So the designer was not thinking about how the flextime works, but was thinking about what the customer experience should be on the Web site. And that was our stake in the ground. We had to go out and map too, which was actually a lot of fun and, you know, a really deep development project for us because we're heavily customized almost every single section in the Flex theme and added a lot of our own new custom sections to make things work. And it gives this store an even more bespoke feeling, the flexing that you lots of flexibility, which is obviously a nice name, the Flex theme, but this store just shows how far you can go with doing custom coding and doing some really unique things which will walk you through here as we show you what we did. So, you know, starting up here, you know, we've got a mega menu going on, you know, normal stuff there. You know, here we have some custom buttons. So these aren't the buttons that are included in the flex theme. And, you know, the designers gave us all of the buttons to map to the taxonomy for the site. So in the packaging, they had already come up with a just drop into a product here they had already come up with in the packaging. These icons, right. You can see here, right, this little icon for a capsule. So they gave us those icons and we incorporate them into sites and now the site icons map to the packaging icons. We do have consistency in the brand and the consistency in the customer experience. So what they see in the website is familiar to them when they receive their package. So, you know, here's our first bar that was, you know, a custom section that we built. This one here is a promo bar that we put on all pages in the website because, you know, there's a lot of they're always doing promotions in this brand and really doing things to engage and get their customers to understand that the broad depth of what they're doing. So we gave them this bar up here and what happens is the text starts to go into why they add a fifth promotion to it. It'll start scrolling and on mobile it automatically scrolls. So it's showing one at a time across all four of the promotions. And then here in the home page editor slide show a little bit, you know, to have this iconography showing up on which one you're currently on. We built another slider down here for the as you know, seen in or you know, the media includes and then we spent a lot of time on the product grid on the the collection pages and we show that everywhere. So here for example there is a collection section on the homepage and we also do the same thing in pages or in product pages in a normal pages. So let me just show you the collection page because it's really nice and rich. The first thing we did is we used the Shopify three app for search and filter, and we use that because the catalog is less than 50 products. We didn't need a really robust and rich filter app. The free one from Shopify more than met our needs and actually works really nicely. So I can just say, I'm looking for things that are nutritional support and it'll filter down to that set of things and then you can see here in the in the the product grid, we have this hover effect, we call it the cards where you flip the card over and you can see, you know, the image, the information that comes in. You can see on the packaging here before I flip it over, it's got this gray color. You know, look at this one here. And some of those icons, which with Rovio, it's the same icons here that were on the packaging. So there's that once again, that consistency in what we're doing. But this way customers can look at this and understand some of the attributes about this product before digging into the product page. And a lot of people are doing repeat purchases in the store. So we have the add to CART functionality right on the collection page, which I don't do for a lot of stores unless they are doing heavy repeat purchases because you want to make sure that your customers educated in what they're doing because a lot of their customers are repeat customers, they know the products really well. So allowing them to add to the cart. Now there are times we don't add directly to the cart. So I can show you one of those right here, and that is when the product has product options. So let's go into a product with no product options. And here, you know, you can see there's no product options up here, but now we've got that iconography and the value props, you know, mapping to what's in the the, the packaging. Here you can see the card a little closer up. We have the ability to, you know, show only a limited amount of the description and then we can expand out if the customer wants to read more of it. We also integrated subscription. I think We're using bold for subscriptions and that allows, you know, and so we integrated that bold widget to look and feel just like the rest of the site. And what we're using. We have a custom theme called Ambit throughout the store. This is Ambit Bold and this is regular and all the apps we integrate it in. We got them using the themes and the colors of the brand or the fonts and the colors of the brand. And we've got some iconography in there, what I call product seals. Now this information here, ingredients, additional information delivery rewards. This is powered by Meadow Fields. The ingredients is a product level. Merrifield And the additional information is product level. Merrifield And it's more than one minute people. We have quite a few Merrifield on these. Also, the why we love this product information is driven by matter fields and then the why buy it from us. These color blocks which match the look and feel of the color blocks up here in the in the card. These are also product level meta fields. And you'll notice this, for example, this this green color matches the product, green color. So there's a color selector in the section that we've built for that. And in some of them, if they don't specify the product level, what that information is going to be, we've got some default overrides, you know, at the store level that'll show up. So there's no empty store scenario or empty room scenario. So if some information was missing and we bring in those scrolling images from the home page for the the brands and the awards that they've gotten. So that's a product page without product choices. Let's go back up a level and show your product page with product choices, and you'll see here the choices are the type. So we got the powder and the capsules. And if we switch to capsules, that actually takes us to a separate products or a naked, it's sublingual powder. If I click on capsules now, it takes me to capsules, I click back on powder. Now it takes me back to powder. And that way we can have different information about the different formats of the product on the product pages, and then they can pick the the pouch size that they're looking for for those. And then the rest of the information is very, very similar to the non option product page. So going back up a level to our our collection page here, you can see we have lots of products, you know, and they they did a really good job with really nice consistent product imagery across the whole store. So everything looks, you know, complete, consistent, holistic. I think it really shines when you bring all those assets together like that, because I had to shoot new photography for all of their products and create all the the icons and figure out all the colors and what they went through in the store staff and did all that work on making sure that it was a very complete and holistic feeling redesign. When we were done, there weren't any holes or legacy things lying around there. Now let's walk into a bundle and just show you a little bit of merchandizing we're doing on the product pages. So, you know, this bundle here is got this two products in it. I'm going to click on it and first scroll down. What you'll see is we have a constituent products section, so we have a better feel for this. Also and basically saying, hey, this bundle here contains these two products in case you just want one of those products. And then we also do the same thing on that product page of a product exist inside of a bundle. We also promote that bundle on that product page. If they're looking at this product, they might say, I didn't realize was available in this bundle. Let me go to that bundle and save some money like it shows right there so they can click on that bundle and and do that from there. So we were on the home page originally and I was showing you some of the sections we built. Scroll down a little bit, show you some more of the pages still loading up there. So we had gotten right about here. And then you can see here we've got a much more intricate color block that we had on the product page. This one is has a lot more control in it than the product page one does, where they can put images instead have outlines around round the sections, put angles in. There's all sorts of control to give them a lot of flexibility as they reuse this element across the store on different pages for different merchandizing opportunities that they're doing here. They're promoting a product and from a more products. And now we get another set of color blocks and these are, you know, done a little bit differently than these, right? These have numbers in them instead of, you know, icons and that kind of stuff. So like I said, lots of control in this custom section that we built to give the store staff the flexibility they need. And we talked about the trusted by Leaders brand scroller, and then here's their award scroller. Also, they've won lots of awards for all the different things that they've done. So they're highlighting a lot of those. We also show the awards in the product pages. If we can find a product with one of the awards on it, let's just drop into one and see if we get an award. You see, there's no award tab here, so if it has an award, it'll show up in the awards tabs. Maybe bestsellers will have an award in a name. There we go. Certificates in awards. Right. That that shows up. And then there's the award for that one. And there's also some lab reports if people want to get into the technical details of these products. And then we continue that new route, new rebranding that the store was doing into a lot of the Evergreen pages. Also, I'll just say one of those. Let's go to the Our mission page. And you can see here, you know, the heavy, heavy branding with these color blocks, the iconography from the packaging over and over again in their store. All right. So that is the store redesign that we did for Youth in Earth, a very heavy, customized version of the Flex theme. thanks for watching.