Craft News

Nook’s New Craft Commerce Site is a Pure Delight

Aug 10, 2016 in Case Studies

Nook Sleep Systems recently launched a brand new website in partnership with Zaengle Corp and Never Not Prepared. Powered by Craft CMS and Craft Commerce, the site generated a 382% sales increase in the first 30 days post-launch!

Helenita Frounfelkner (Founder, Never Not Prepared) and Philip Zaengle (Founder and CTO, Zaengle Corp), were kind enough to sit down with us and chat about the site, in our first-ever attempt at a video case study. We tour the site from a visitor’s perspective, discuss the high value features like the Agolia search integration, and wrap up with a look at how Nook's team can manage the site themselves. (Background and transcripts are below.)

“We've seen an improvement in our SEO, our SEM, and we've seen a really big increase in sales, which exceeded everybody's expectations.”

Helenita Frounfelkner, Client PM, Nook Sleep Systems

Background

Jamie Cantalupo (President, Nook Sleep Systems) and her team took on the daunting task of making the best baby mattress possible. The result was the innovative and award-winning organic Pebble Pure baby mattress that comes in 11 beautiful colors and styles to match any nursery. The kicker is that the Pebble Pure is an all-in-one mattress that doesn’t require sheets. You can clean up any messes with only a cloth or paper towels. In short, the Pebble Pure makes life better for baby and parents.

Over the next eight years the Nook team did the hard work of turning a world class product into a “baby-first” company with a thriving and loyal community. They developed great B2B channels and connected with their customers in person at trade shows and events across the globe. Now they wanted to take the next step and serve their community online just as well as they serve them everywhere else.

In Nook’s early days they were sold “an enterprise commerce solution” built on Flash and Magento. Unfortunately, Nook found out the hard way that “enterprise” meant a terrible experience for their marketing team, a poor experience for their customers, and it turned out to be unexpectedly expensive. Magento was billed as a “free open source” solution but in the real world, getting dependable support and converting the Magento site to be mobile-friendly turned out to be a six-figure non-starter.

Fortunately, Nook’s internal culture champions innovation. They knew first-hand that building a world-class product starts with clear goals, a solid plan, and, most importantly, working with the right people. Nook Started by hiring one of the best, Never Not Prepared’s Helenita Frounfelkner. She listened closely to what they wanted to accomplish, understood the end goals, and knew exactly the right team for the job, Philip and his team at Zaengle Corp.

Read More

You can read more about how Nook Sleep’s new site was developed at:

Nook Hero Zaengle Corp

Image courtesy of Zaengle Corp.

Video Transcript

Leslie: Welcome to the very first video Craft case study. We are trying something new this time around with the case study. Please let us know if you enjoy this. You can email me directly and let me know at Leslie@Craftcms.com and that said, let's just get into it.

For our very first one we wanted to feature Craft Commerce and the work that Zaengle Corp. and Never Not Prepared did for Nook Sleep system. So on this case study we have Helenita from Never Not Prepared. Say "Hi," Helenita.

Helenita: Hello.

Leslie: And we have Phillip Zaengle, the founder of Zaengle Corp. Say "Hi," Mr. Phil.

Philip: Hey guys.

Leslie: So to set this up, Nook Sleep Systems is an international brand and if you've ever been shopping for a baby mattress, you've likely come across them. They have super high-quality products. They have some really innovative things that they do in the baby mattress world. And the baby mattress world is rife with people who tell lies all the time and Nook has established itself as a very honest brand, with a very loyal following and they're really great at business-to-business. They have a strong relationship with retailers, but they really wanted to get into a direct consumer solution through commerce and of course the website is critical to that. And from a technology perspective their old website was a combination of Flash and Magento. We don't want to spend too much time about why that's a bad idea, but if you've ever tried to build a commerce solution before, you know that they were in a bad starting spot.

Each of you has actually already written very thorough case studies on this project, so what we want to do here since we have the advantage of screen sharing and video is...we don't want to just talk about what's already been greatly written about. We're going to link to the case studies that Helenita has written and that Phil has written for Zaengle Corp., but here what I'd like to do is, Phil, have you walk us through the site from a user's perspective from when they first hit the site, all the way through a purchase, and we'll just talk about some of the major features that you guys did as part of the project and then we'll wrap it up from there. But I really wanted to start with a screen shot of the former site just to get this in perspective. So, Phil, what are we looking at here?

Philip: So, this is the original Magento site that we replaced. You know...it's just a dated site. It's what happens with sites, especially if it was built five years ago. It's not going to be responsive and that was part of the challenge is, you know, coming up with something that really stuck with the Nook brand, was responsive, and things like the navigation were more clear and direct.

I'll switch over to the new site. I guess from here, I'll walk us through the typical, you know, shopping process, customer experience and then, Helenita, feel free to interject any comments/questions you have.

Helenita: Sure.

Philip: So, one of the main goals is, like we saw, the older site was darker. We really wanted the site to be light. We wanted it to be bright, we wanted it to be engaging, and we accomplished that by a lot of white space. Really, really bright colors. One of the probably most fun items we did was the search bar. Search is pretty standard, but we integrated a live search so you can see as I type here, it's going back and retrieving items right away, so if I was looking for a Pebble full mattress I can quickly get all the results for products, blogs, FAQs, pages...We want the actual product screen, so we'll click over here.

Helenita and the Nook team, they did an awesome photoshoot for the project so we got a lot of really great photography coming through. This product only has one variance so I'll just go ahead and add that to my cart. One of the things we just added recently actually was when you add something to your bag, as soon as you've added it you, you get the prompt to go ahead and check out. So if you were just -a lot of times, parents may only be looking for one product, so...instantly go to check out. Adjust your quantity...

One of the things we spent the most time on was probably the different product landing pages. So we have the mattresses are Nook's real- their specialty. This is the majority of their business currently. And so they got their own custom mattress page. We have quick views that allow you to kind of look through the different colors, add it to the bag right here if you want. Then we have more standardized landing pages for all the other product categories: baby, kids, you, and home. Again, great photography, big images, you can see all the different colors. You don't have to leave this page at all if you want to add an item to your product or if you want more details, you can just click view product details. But I think really streamlining that workflow- (Laughs) I'm talking like a developer here - streamlining that process for consumers so they can easily see all of the available items and add those items to their cart quickly. That was, I think, one of the largest wins we had on the project. Would you agree with that, Helenita?

Helenita: Yeah, absolutely. I think redoing their navigation...as you saw on the old site, there were two main navigation areas. It was shop or learn. There was no organization, there was no clear way of understanding where your content was so...really going in there and refining the brand helped to guide the content strategy so that we were telling the story. You know, you mentioned that mattresses are the bread and butter of Nook, but really that's how it started. And now we're a much larger lifestyle brand, and so the key in our new site was not only making it easy for customers to find our products, but telling them, "Hey guys, we're a lifestyle brand. You may have a baby, but like, you may also have a five year old that you missed the boat on getting one of our crib mattresses, but get a twin or get one of our loungers," or something else that really kind of helps tell our whole brand story in a clear, concise way that doesn't cause them to be frustrated when they're trying to start their shopping experience.

Leslie: That's one of the things that I really love about the work done on the site is like...here, on the Pebble pure crib mattress page, that you're showing us Phil, if you slowly scroll down, what you guys did was really tell the narrative of the entire product in a single page. So that you really have all the information that you need to make a purchase decision. But it's even more so than that. You've got the related products, you're also end capping with the brand, with the brand message and everything else in there.

What I'm wondering is, when you're actually building something like this with Commerce, and Craft, what are you thinking about from a developer's perspective with design? Is there...is there anything in particular that you're having to watch out for, or are you just going in it with kind of a free attitude?

Philip: Yeah, I think that's one of the reasons we really love Craft as a whole is because we don't assume too much about how the design has to look or how the code - the front-end code - has to be written. It can be really, really flexible, whereas when you're working with more complicated platforms, there's a lot more pain associated with lots of flexibility. So everything here was really - we did not even write code until this was designed. We had an idea of the flow, we knew what the funnels were going to look like. And from there we went in and started development so things like this little "add to bag" button, they may be difficult in some platforms, but in Craft Commerce, we are able to add that really quickly. So really, Craft -the Commerce platform has been incredibly (laughs) pleasurable to work with from a dev perspective where we're used to like pulling teeth to get some of this functionality work to work. Craft made our lives much easier.

Helenita: Yeah, I think the only thing I'll add to that is...part of the problem that I think anybody that's been in our industry experiences is the client making a seemingly simple request...and it does meet a very pertinent business need. We want to increase sales from our website. If, as a user, scrolling down the page, they lose that call to action, then we're potentially losing somebody as they scroll down and decide to move on. So, an important business need that came up was implementing that sticky nub up at the top where we were able to kind of have that ever-present call to action to get them to add to the cart. And so the fact that Craft Commerce made that so easy enabled Phillip and I to accomplish more of those business goals that were going to drive our 'why' that were going to increase customer satisfaction and a good user experience.

I think working with some other CMS's that will, you know, those that will not be named (laughs) it's a little bit longer of a conversation, you know, it's a conversation between the developer and the project manager and then its like a whole budgetary conversation. If you want this, it's going to cost X, and then you're going to have to give something else up. It was really nice and refreshing to have a platform that we could work with like Craft Commerce that didn't cause us to have a lot of those, or any of those conversations with the client. And then our clients were a lot happier as a result because we weren't - they didn't feel like we were going back and trying to nickel and dime them, so to speak.

Leslie: Yeah, that is the type of feedback that we actually hear quite a bit and makes us happy because that's definitely the intent of Commerce is to actually make it a platform versus an out of the box solution there.

Phil, I also know that you guys did, like you showed off the live search...What are you actually doing behind the scenes to pull that off?

Philip: Oh, dear. (Laughs) Let's see if I can get this in under ten minutes. So this live search hooks into a service called Algolia. And Algolia is a service that takes care of - you can give it a whole bunch content and it index it in very specific ways, in ways that a developer can configure and then all we do is with some JavaScript, you know, start populating it based on keystrokes. It can do spelling correction for you, it can do a whole lot of things for you. But this was something that, you know, from a nerd perspective it's a lot of fun. We had a good time hooking this up to Algolia and then also just watching all the searches come through and the way people use it has been fun.

Leslie: What else did you want to show us about the site?

Philip: I think the main thing, the biggest thing that, aside from design, aside from the user experience, for us, it was really important that we create a system that the folks at Nook would actually use. And that's one of the things, you know, you can build a great complicated system that does everything, but to build a system that people actually use day in and day out is always a little bit of a challenge.

And so, one of my favorite things, and I know one of the things that really - that Helenita uses a lot and the rest of the content managers use at Nook is the live preview in Craft and the ability to change marketing pages or adjust landing pages or adjust the way products look right from the control panel is really quite revolutionary in terms of other content management systems. So, you know, Helenita can come in here and they can swap out photos, they can see how a new tagline might work just by adjusting it and then it refreshes over here. So that gives a lot of confidence to both the content manager and the client, and to me as a developer knowing that, you know, they can preview all their changes without saving them. So they're not going to save it and then refresh the site and then call me and tell me something is broken or something needs to be adjusted. It's all happening live for them and they can edit with confidence.

Leslie: Right, it's a real what you see is what you get instead of some WYSIWYG editor screwing up your code, you actually have a preview of how everything ends up on the actual live site.

Philip: Yep.

Helenita: Yeah, and from a business standpoint, that was something we failed to mention in the beginning. You know...the fact that it was so difficult to manage their content in the Magento control panel before, not only from the marketing pages and an educational perspective, but a product management perspective as well...there were different log ins, there were different places that they had to go. And the beauty of Craft, and Craft merging with - and Craft and using Craft Commerce. You can build a site on Craft but then not use Craft Commerce. The beauty of using both of them together is the fact that you don't have to log in to two different places. If I get an email from Nook management or Nook leadership and they say, "Hey, the image is broken," I'm already in there doing other stuff. I just go to that page, in the commerce section, I go to that product and then I update it, or I go to the entry page and I just update it and make sure it's working. Live, right then and there, and giving that piece of mind to Nook leadership...

I wish I could have recorded, kind of the sighs of relief when we did the training. I've been in this industry for a long time, but as a project manager I'm rarely actually doing stuff in any content management system. Other people are populating content and managing it and doing all that. I had a unique experience in this one because I actually did all the content population and I've - I'm now doing all their digital marketing and site management and so I'm in the site all the time. And I didn't - Phillip didn't really tell me but by like fifteen minutes, kind of a quick run down of how the back-end worked, and that was it. Every once in a while I would run into something strange and I'd just kinda ping him. But that, in and of itself, is like the biggest sigh of relief for anybody that's dealt with any kind of a headache of a content management system in the past. That in and of itself, it sells itself right there.

Leslie: Mm-hmm (affirmative).

Helenita: You can teach yourself.

Leslie: Yeah, that's a good point and that's feedback that we often get, but you actually put that in a business context which is very, very true...that providing a good user experience for your clients isn't just something that helps them when they're entering content in some emotional feely-good way, even though we hope that happens, there's actual real business value. If you have three or four good staff and they're all responsible and you just have to train on a single system and it all just is intuitive to them with low training cost then they can actually mange their own content like a CMS is supposed to be able to do for them in the first place.

Helenita: Right, and they don't have to spend money outsourcing it to somebody that's going to charge them $100 an hour to make an update on their site. So financially they're saving money and, from a time-management standpoint, if you're the president of a company and you're having to update content on the site, when you really want to be selling... like, that in and of itself makes it worthwhile that you can go in there and just make a quick edit, five minutes move on with your day and it's not a, let me know go in, email this person try to explain where it was on the site that it was broken, where I think they need to fix it, have them do it, write it back to me, have me go in and check it. I mean, that takes up so much more time that just being able to do it yourself.

Leslie: Right, right. So we're running a little bit short on time and this is the type of thing that we can all talk about at great length, but what I want to make sure that we hit is...what has been the result for Nook since launch? Uh, Phil, why don't you --

Philip: (Laughs) I was going to defer that to Helenita.

Helenita: (Laughs) I can speak from the business standpoint and their kind of...their takeaway, on what feedback they've gotten and um, Phillip if you want to talk from more of a technical standpoint and kind of increasing users or any kind of analytics, then feel free. I think- who do you want to start, Leslie?

Leslie: Let's start with you, Helenita.

Helenita: Okay. From a business standpoint, I mean, we've definitely seen an increase in traffic. We've seen an improvement in our SEO, our SEM, we've seen a really big increase in sales, which I think, you know, our first month sales exceeded everybody's expectations. And, that was kind of the purpose of it. That was the primary business goal was increase sales. And so I think that has been the biggest success factor from a separate business standpoint from what we were just talking - like similar to what we were just speaking about.

The ease of use, and updating, and troubleshooting, and the ability to just quickly fix something that might be an issue, you know...There are always things that come up in any business, especially on the web. It's constantly changing and there are, as much as you try to figure out every single edge case scenario, you sometimes can't. And so however much testing you do, something always falls through the cracks. That is inevitable. That is life, that happens. And the fact that when - and to have maybe been like, less than a handful, maybe less than what I can count on one hand, of like, things that have come up...or where maybe we might be losing sales, but we don't know...That has been resolved so quickly not only because of the prompt response time from Zaengle Corp, but because of the ease in which we can troubleshoot, and fix, and QA, and deploy any fix.

On top of that, if there has been any items where Phillip's team wasn't able to fix it because it was something that Craft needed to deploy, something that Craft needed to fix...you guys are doing updates so often that we don't have to worry about waiting for a year or waiting for six months for, you know, this issue to be fixed. You guys are on top of it, they're updating things on a biweekly basis I think you guys do?

Leslie: Yeah, sometimes when that's necessary. But yeah -

Helenita: Right. And so it's been resolving things that our team hasn't been able to and that's such an awesome thing to depend on. And to know we don't have to worry and we don't have to kind of pull out all the stops, or call in a favor (laughs), you know? We know what's going to happen.

Philip: All right, I feel like Helenita just took all my answers. (Laughs).

Helenita: (Laughs)

Philip: I mean, I think the most rewarding thing for us is that we...as soon as the project launched, we weren't off the project and were continuing to iterate, add features to the site, kind of streamline process in terms of both on the business side and also on the user side, making sure that we're meeting the needs of everyone who is using the site. So that's always the most rewarding, when you can set a high benchmark in terms of performance and then continue to improve that and have ways of measuring that, that's the most fun for us.

Leslie: And we really appreciate the kind comments about the responsiveness of the commerce updates, because that's always something that we really do take feedback and issues seriously and try to get solutions out there. Actual real things you can update your sites with on a very fast turnaround time.

All right, I think that's a good stopping point for this first attempt at a video case study. Helentita, and Phil, thank you both for being brave enough to be the first ones to give it a try with us. And for everyone listening to this, please let us know if this was valuable to you. You can contact me directly at leslie@craftcms.com or hit us up on Twitter @CraftCMS and if you would love - and if you need a project manager, I can highly recommend that you work with Helenita, she is truly one of the best PM's I've ever worked with. You can find her at nevernotprepared.com. And Zaengle Corp., their team does amazing work. You can find Phil and his team over at zaengle.com.

Helenita, Phil, is there anything else you want to let people know about?

Helenita: Um...Your check is in the mail. (Laughs).

Leslie: (Laughs) Right. That works. If only that's how it worked.

Helenita: (Laughs) No, I'm happy to be a guinea pig. I hope that this has been helpful for people and I hope it continues to, you know, to work and you get to see more of these for other clients and other case studies.

Philip: Yep.

Leslie: All right, that'll do it for this time. Thank you so much for listening.