Video Walkthrough of the Site
- Hey, Scott Austin here. And in this video, I'm going to walk you through the store redesign that we did at Jade Puma for neural balance. A neural balance was an existing business that was operating on Shopify. And we went in and rework their store design using the flex theme by out of the sandbox and brought their site up to improve conversion and better communicate their value proposition and reinforce their brand. So neuro balanced is a supplement for kids who are nervous and anxious to help keep them calmer and happier and that kind of stuff. And it's based on a science from medical professionals, which are shown down here a little bit. So it's a science-based supplement as opposed to some of those hokey ones out there. So this product has been really successful with its audience of, of, you know, basically they're selling to parents who are trying to help their kids cope with their anxieties and things like that. So what we did for that was design decide on this sunshine blue sky type of theme, right? So if you can lift the clouds inside your mind, it's going to be a clear, happier day. And what you can see, what we're doing for photography is we have parents and children interacting and you notice the thing is about to keep them calm so that our kids aren't, you know, flying off off of, you know, jungle gyms and then swings and that kind of stuff. They're just having a nice calm day with their parents outside in the sunshine. And the really nice thing about picking a theme like that across the whole store is it gives us predictability on banner images so that we can tuck the banner image under the header. And that's a really nice effect that I like doing, but it's really hard to do consistently across the whole store because you may use one dark photo and then another page use another light photo or a photo that has a mixture of light and dark darkness, so that you, you missed the con consistent contrast for that header, but because all of our product photography or all of our banner images are using, you know, this blue sky type mantra, it gave us that consistency that we need to do that. The banner underneath the header look that I really liked. So we were able to bring this, you know, this effect through much better than, than other stores and in the flex theme, one of the things I really enjoy about it is we have the ability, you know, on something like this, where we've got this little background color here, you can see it notice how that background color is almost, you don't notice it at all, except where it overlays the wing. And that's because on every single page we can set the color code for that background uniquely. So I did on every page, just go back to that home page is that background, color here is meant to map to, and that we don't have on that page. It looks like, but we can pick a different color code matching whatever blue we're using on a given page. So it's almost transparent to you unless it's actually helping with some contrasts, like it was over the hair and that kind of stuff. So let's walk through a little bit of the store design here, here on the homepage. You know, they have a couple different versions of their product. They have neuro balance and neural Brock cellular, and they also have some other products that are helpful for children with these same needs. But their main two products that they build a neuro balanced and neural Brock. So we put them front and center in the shopping experience and then the other products are up there. And because there's a lot of science behind this, and there's an education process for a lot of the parents, as they're looking at these products for the first time, we have a, how it works thing, which talks about the science behind the products and you'll have their patent did and some videos and all sorts of good stuff there. Right? normally that wouldn't put something like that on a page, but I think it's an important part of their shopping experiences, the research that people are doing beforehand, and then this other store locator, because they have a strong retail apparent retail presence across the country. So there's an app that we have in here that is showing the different stores that they're available. And of course you can search and find in that good stuff. So back to the homepage, you know, the key to come is, is there a major value proposition for their customers? And we picked this orange because, you know, we've got this blue from their logo and the orange is the the, the counter to that on the color wheel. And we're showing them different products. The other they're running the homepage, some testimonials and then some more, you know, proof on the medicine and science behind these things. And then we do the social proof of the customer reviews. And then we have consistently themed product seals. You notice what we're doing here if taking that blue and orange color scheme and muting it a little bit so that we see these on the product pages, they're not bright and dominating. They're just, you know, subtly reinforcing those value propositions and then an email sign up on the homepage. So let's dive into a product, let's go to neuro balanced capsules. And here you can see we've got those product seals they're right up next to the add to cart button, but they don't dominate. Right? The add to cart button is the strongest call to action here. And your eye is drawn to that. So it's clear what you're doing, but the products we have and these products seals, you know, have the little snippets that show up on hover which are kind of nice to, you know, get more information about them. And on the mobile phone, you just push it and you, you would see that tool tip show up. And then also because these products are consumables, the subscription makes a lot of sense for them. So you can sign up for a one-time purchase or you can sign up for a subscription and, you know, save every time you place an order there. And then we also have product tabs that are dependent on any given products. We're showing the product description information, some of the ingredients that are in these products, here's directions on how to use them. The Nutri nutrition panels that come right off the product packaging, and then information on shipping and delivery. And then we also have customer reviews and we're using judge me for customer reviews. They had no reviews in their store when we launched this, but you know, new reviews are coming in pretty frequently. And judge me customer views allows customers to upload their own photos. And you can see they're starting to do that here. So lots of good information on the product pages from the customers to reinforce the messages that are being given in the marketing materials, right? I think a customer is coming to your store more likely to, you know, rely on or trust the words that are being said by actual customers in the product reviews. Especially if they say the same things that the marketing materials are saying. So that, that is the, you know, the product experience can add anyone under the cart and in the cart, we just have some messaging here for, you know, Hey, during COVID, we're still up and running, so your orders look it out quickly, and then they can go off to the checkout experience, which is branded along the same lines of the branding of neural balance. Would that, that blue and red or what's going on there. So let's go back to the site, okay. Show you some of the evergreen pages here. So the first one is the about page. This is about the team members, right? So there's the medical professionals that form of the science behind it. There's the business people here. So you, you know, you can see all about them and a little bit of their story. And this is all done with the page details template in flex, which allows us, you know, you can see here, we can even have two texts, columns, or two columns of text on these pages instead of one big long one. So it's easier to read kind of photos and images and texts and maps and all sorts of good stuff. So there's a wholesale page for people that attrition in the wholesale business. They can have a form to fill out to start that process. And they also have a lot of content in their marketing strategy here. So here you can see, they've got a lot of blog articles where they're giving tips and advice and more information for parents, not just around the products, but just around how to, you know, help raise healthy, healthy children who, you know, don't succumb to anxiety and those sorts of things. So lots of blog articles there. And then we also have an education series. So they've, they've created some videos which get into, you know, the, the depth of some of the information. So, you know what, that was a little loud, sorry about that. You know, to me, video's a really great way to communicate lots of information to people. Texts articles are also fantastic, but not everybody reads and not everybody watches videos. So doing both right. You saw the blog articles, a lot of written texts, and here you see the, the videos. So there is, you know, depending on how you want to consume information or, you know, can you have noise going on right now, or are you on a subway or something and want to keep quiet? So you have different formats. That information comes in depending on your needs and situation. And they've also got, so, you know, there was texts in the blog, there was videos in education series, and then they've got audio in the, in their podcast. So they've got a podcast with a lot of similar types of information targeting towards parents who are raising these children with anxiety issues and stuff like that. So those are some of the evergreen pages and some of the content they've got, you know, just one last couple last pages here. This was a fun one. I ran out of blue backgrounds with parents in them. This is actually kind of a gray sky day. But I went into Photoshop and turn the gray clouds to blue. So we can have that consistent contrast going on there on that page. And then we got an FAQ, the according functionality that like so much inside of the flex theme. So let's go back to the homepage and show you what this looks like on the phone. I have to refresh the page. Yeah. So here in the flex theme, we can have different images for desktop and mobile. Now this happens to be the same original photo, but it's cropped in two different ways. And notice just to prove that point, I flipped this, this photo where the mother was on the right side before now she's on the left side. But we have the ability to have a different cropping and a different placement of the text. So on the desktop, we had a much wider, you know, cropping of this. And we had enough space over here that we put the text over the banner image, but here the people in the photo are front and center and I didn't want to put text over the people. So then I put the text below the banner image on this one. So that's the nice thing about the flex themes. We actually went it to two different photos up there, one for desktop, and one for mobile to optimize for both experiences and not just have to make compromises to get things, to work across both screens, put up different assets for Each screen. So That is the neural balance site that we built for them. Hopefully this was informational for you. Thanks for watching.
Responsive Views of the Homepage