Bottle Filling Stations

Hey, Scott Austin here. And in this video, I'm going to walk through the store bill that I did for bottle filling stations. So bottle filling stations is a company that sells a bottle fillers, right? You'll see them in like gyms and schools and that kind of thing. And they're selling one manufacturers products LK. And the nice thing about that was Elkay has done a bunch of photo shoots. So you can see here we had from LK the manufacturer, the products that they're selling in this store, we had a whole bunch of lifestyle imagery that we could use and product photos for that matter that we could use. But the fact that LK had built out such a inventory and Oxy show it to you here. We put together a gallery of a lot of their photos. This gave us a deep, you know, pool of photo resources to use when building out the store. And it really makes a big difference as you'll see in a couple of different places in the store, having the ability to pull lifestyle images in all these different scenarios, indoor and outdoor in different types of environments was totally awesome. And it really made the site pop much more. And the other thing that was really nice in working with the store team here, I'll show you them. Ian and Dave is they really care about the customer service and their customers. So they wanted to really communicate a lot of information to the customers and most, you know, stores that I work with, want to do that, but these guys went above and beyond, and actually we're writing lots of new original copy which most store owners have a hard time with. They did a fabulous job. So are the site here and the service we're providing to customers is a lot deeper and richer than most normal stores, as you'll see, we're gonna walk through it here. So let's go to the homepage and talk about the shopping experience to start with. And before we actually talk about the shopping experience, you know, I was given this logo from bottle filling stations that already existed. So from that I pulled a color scheme, right? I pulled that blue, the gray and the plaque. And from that, you'll see that carried through out the site. And obviously blue for water makes absolute total sense, but there's a, I think a nice, really consistent color scheming throughout the store. And the orange there is, you know, obviously the opposite side of the color wheel of the blue. So we did that for contrast on buttons and on images once in a while. So we have a mega menus and here's a really good example of having that lifestyle photography made our mega menus. Just look a lot better than just, you know, white product photos, especially with this blue background to let people see where the mega menu exists. You know, it, it looks really nice, I think, and, and this like pops a lot more of that. It makes things a little more intuitive too, on the outdoor side of things there's freestanding and there's, wall-mounted, it's kind of obvious what your choices are there. So, you know, the first thing we did was allow the customers to shop by indoor and outdoor filters and parts and indoor and outdoor being very obvious decisions for the customers. If they click on indoor, we then take them to a list of collections page which allows them to before they start seeing products and, and, you know, let's break down, we'll make one more decision as a customer. Do you want combo? Do you want countertop? Do you want, well, do you want residential in all of the other different choices that they have? They don't know which one they want. They can always pick the all right, as they, you know, say, well, I want combo and a combo just, you know, is, Oh, bottle filler and a water fountain unit together. So we click on combo and then the customer starts seeing the products. And we used an app called a filter and search, and it gives us really good control over the filter experience. I I've used this app all the time and absolutely love it. So if customers are like, well, I want filtered ones, you know, they can click and just see the filtered ones. And well, I want filtered ones and ones that are hands free. So now they see, well, there's two choices that are filtered in hands-free. So it's really easy for them to filter on what's important for them and find the products that match those requirements. And this app is really powerful. We had to do a lot of tagging and augmenting the data in the product catalog, but once we did that, it worked really well. So let's say the customer is interested in this product right here. Let's going to the product page. This product actually has two color variants, so they can click and see the color. You know, you can see that the photo changes a little bit, the differences between those two colors is not that star. It's not like going from purple to green kind of thing, but giving the customer a feel for what those choices are. And you'll see, we have yeah. Icons for value props, and there's a bunch of different value props. This one happens to be filtered and chilled. And you know, the right icons will show up depending on which product you're on. And then we have tabs cause they have so much content I was talking about earlier, lots and lots of content to help you make an informed decision. So we bucketize that content into tabs, right? There's a, there's a description with lots of information. There, put a little grade background on these tabs to differentiate for the customer what's in a tab, right? Cause this is a short tab content here, the download one and where that review content cause the reviews at the bottom of after every tab, right? The reviews are there. So that light gray background on these tab content is meant to differentiate for the customer. What's the content that's appropriate to that tab. So tab one is the product description. Tab two is download. So it's, you know, different PDF files that you can download and read more information from the manufacturer. And some of them are from this there's the shipping policy. So if you want to understand more about the shipping, these are large products. So there's a lot of information to absorb around the ship. Okay. Installation. So this is, it helps the customer get the product installed regardless of where they are in the country, warranty information maintenance, how do you, you know, clean, how do you change out your filter and all that good stuff on these products? And then the last tab is what filter works for this and for the filtered water bottles, right? Or bottle you just want to filtered. So what is the filter that works? So, you know, some customers may go straight to the filter tab at the top and find the right filter for them, but they may not know which filter works for their water fountain. And that's why we add it in, you know, they can go back, you know, they already own this fountain. They can come to this page and then see, Oh, what filter do I need for it? And then see the filter. So it's just a quick way for them to get, to see the filter. And you can see this one here, we're doing different quantity breaks for different package sizes. You know, if you buy four of them, it's cheaper for each one. Then if you buy a single one, so we built the quantity breaks into various it's there. So let's go back to a water fountain and add that to the cart, show you what that experience looks like. Now, these aren't small purchases, right? So it's a school or a city park it's going to come in and they're going to buy 10 or, or 50 of these. It's going to be large purchases. So we don't do a lot of merchandising here, right? There's no upsells or cross sells in the cart. It's pretty straight forward. What's going on here. And then they go to the checkout experience and we've got that branded lots of color consistency from the consumer site into the checkout experience, you know, using the, the levers that Shopify gives us there. So back to the homepage, right? So talked about how customers are making decisions through the shopping experience. Like I want a combo, I want a countertop. I want an in wall. One of the problems that the customers have that are new to this experience is understanding what all these different terms mean. So the team built out buyer's guide that I absolutely love. And here it is right here. So on the buyer's guide, what we're doing is we're breaking down the shopping experience, just like we're doing on the shopping side and saying, Hey, the first decision you need to make is indoor and outdoor and anchors one other one like parts or something like that here, or, or residential. So that's a pretty easy decision for them to make. So we're trying to, the buyer's guide is have customers make those decisions just like are doing in that normal shopping experience, but we're giving them more information here. Now, obviously we don't get a lot of content about indoor and outdoor. But we put a bunch of content in about, so they understand what the residential products, what, what, what that means versus the indoor ones. Well, let's say I click on indoor, you know, just like I had, you know, here in the mega menu all of these different options, I'm showing those options here, but now I'm explaining, cleaning them more. Right? So there's more copy here about each of these different options of types of indoor bottle fillers. So that copy is meant to educate the customer and make them more informed. Now let's say they decide they want a combo while there's still even more options for them to understand. So, you know, at the top level, there's the original, and then there's the enhanced bottle fillers. And this explains the differences between those. And if they click on it, then they'll actually see the collection of those products, according to what they're looking at. And then below that, we also have some comparison tables. And then we talk about some of the popular features. And we use the same iconography here that we're using on the product pages and say, here's what Vandal resistant products means. Here's what buy levels are. And here's what high efficiency is. So giving the customer more information, like if they care about high efficiency, they can click on that, see products. And now they're looking at just high efficiency, indoor combo bottle fillers, right? So the buyer's guide is meant to educate the customer and help them make decisions along the shopping experience. So that's the shopping experience. And let's go down into the footer and show you some of the evergreen pages, cause there's some more great content there already showed you the about us page. They also talk about their service. So we differentiated in about the team page, the people and the service, right? And in the service side, you know, we, we talked about different parts of the value, add that these guys are providing to their customers especially with the free consultation and all the, all the dedicated support that they're giving them. That's a lot of the value that they're providing. I was also pretty happy that I made this little image from a stock photo and added their logo on the side of the truck. So I'm personally proud of myself for doing that. Cause it was, it's kind of silly. Most people are like, yeah, I can do that. Totally. I had never done the you know, skewing the image along the, whatever you call the, know the dimensions here and just picking and drag. And I forget what it's called in gimp. But I, I was so happy that I actually did that and got it to align properly to the truck. Other evergreen pages. And you know, it's in this turbo theme that we're using here, we get this ability to build out these rich pages. You've seen it everywhere. And the buyer's guide that we're talking about list of collection pages here on these evergreen pages, right? These pages are a lot more rich and in depth with content and video and photos than a normal theme allows you to do their customer page. One of the important things you're trying to stress here is, Hey, we are nationwide and you can see right with this little gift that, that jumped out at you. There actually it's a HTML five video not a gift. And you know, the point of this is, Hey, you know, we we've serviced customers and all the different States and no matter where you are, we can help you and then showing some of their top to your customers. So people understand the scale that this site is operating at. We have a review app. This is the output review app. So there's a review page. It started building out blog content, you know, more education that they're providing to their consumers and the galleries should you're ready. The buyers got me walked through. So in the contact us, you know, in a nice, simple page with a form here and a link to the FAQ, which has the accordion functionality that the turbo theme uses and there's lots of FAQ is here. So we bucketize them under different headings. And the information hub is a lot of videos that they have. So providing all that video content for people, some of this is educational. Some of it is, you know, how to do maintenance and that and that stuff. But there's, there's lots of videos here that they can, it can view. And then what we have is a bunch of forms for different types of scenarios, right? The first scenario is a bulk order form. So in this one, I actually just made this in HTML in the, in the liquid code, cause there's nothing fancy about this form, but there were a lot more fields to be collected than in the normal contact form. So I just added those in now, some of the other ones is installation request form. This one's actually made in, I believe it's the Hulk apps form builder because we had to add images and I just can't do that. Any normal liquid, you know, HTML form that I can build. So we added the app and do it that way. And the same thing on the service request, I believe we have the Hulk apps form because we're doing the add images and there's a maintenance page, which is, this is the content that powers the maintenance tab that showed up on the product page. And then the last one is just solution guide. So there's lots of different industries that this company is targeting. And what they did is they built out solution guides for a lot of those different industries. So what they can do is use these pages as landing pages. So if they're going to be sending out marketing materials to public schools, they can then have the land, you know, the link, a call to action, take that public school person to the public schools page where the content is more appropriate to their needs. And, you know, it explains to you the top product for public schools. And these are categories that public schools care about. Hands-Free high efficiency and Vandal resistant. So that's, you know, once again, that's this team going above and beyond and really understanding their customers and delivering them value and using the power of the turbo theme to present a whole bunch of different content, you know, copy a collection and a list of collections in an easy to consume way for these different personas that they have. They also have a chat app on, on their website, which, you know, most people do these days, which I absolutely love. We've got the branding of this one working pretty well within the site. And you can see on the footer even, you know, it's a blue footer, but if you look underneath, there's actually a photo and they actual nice thing about this photo is cause we centered it up perfectly. It was off offset before, but watch what happens when we go in and I'm just gonna do the responsive view of this now, right? And if I do responsive here and change the width, I just love the way that resizes so well and stays focused on that bottle filler. Right. Which is what this site's all about. So I like the way that ended up working. So that is the site redesign that we did for bottle filling stations. Thanks for watching.