Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week we are so excited, our sock drawers look gorgeous. We are here with Mike Hickerson and Ryan Cromwell to talk about Organized Living. Welcome!

Ryan:

Thanks!

Mike:

Yeah, thanks. Really happy to be here.

Ryan:

No doubt.

Ethan:

But before we dive in, a few words about our sponsor. I couldn’t be happier to have Gather Content back as a sponsor on the podcast. You see, Gather Content is a content collaboration platform. It helps teams plan, organize, and produce all their web content in one place. They provide structured templates and simple workflows to make collaboration and production easy without the shuffling around of Word documents and unnecessary emails. Centralizing the editorial process will make approval of content easy, so everyone knows what they’re responsible for and when they’re responsible for it. And what’s more, Gather Content has recently published a free online guide to Content Strategy for Website Projects, which they’ve written for all the people who want to make smarter, content-led decisions on their designs. So every responsive design, I believe, benefits from a content-first approach. But as Gather Content’s guide says, that doesn’t mean waiting until all the content is written. Instead, it means considering and thinking about content at every single stage of your project. And Gather Content’s guide can help you do just that. So whether you’re working in an agency on client websites or maybe you’re working on an in-house team, Gather Content’s guide should help you more effectively contribute to your digital projects. You can read it online for free at gathercontent.com/RWD, or check out Gather Content’s products at gathercontent.com.

Karen:

I am so excited you’re here. As a fan of an organized lifestyle—I just moved into a new house and organizing things, both for clarity and sanity. So, I would love it if maybe you could both just first introduce yourselves, tell us a little bit about what you do, maybe a little bit about your role on the Organized Living project. Mike, why don’t you go first?

Mike:

Yeah, sure thing. I’m the director of software development here at Organized Living. We’re a Cincinnati-based closet manufacturer, we’ve actually been in business for ninety-seven years, and it’s family-owned company. So, what we make are closet systems, adjustable storage, things that help people lead an organized life. And so I led the Organized Living team with the responsive web design that we did, and I lead a small team of developers, and I also help manage our relationships with any contractors or other teams that we’re working with.

Ryan:

Yeah, and I’m Ryan Cromwell, I’m the technical director here at Sparkbox. We worked with Organized Living to help put that responsive retrofit or responsive redesign together. My responsibility is to work with our project managers, our team members, and our clients to make sure that everything goes smoothly, that we’re able to get our projects put together and shipped over to them, and that they work really well.

Karen:

Well if looking at the site is any indication, I’d have to say it does go very well.

Ryan:

Thanks.

Mike:

Thank you.

Karen:

I’d be curious to know if you’ve had any conversations about using responsive design as a methodology or an approach. Were there questions or concerns about having one site that works across all devices?

Mike:

No, not really. We knew that we needed a responsive design, or I should say we knew that we needed something to work on mobile and tablets—currently about forty percent of our web traffic comes from mobile or tablets, and we knew that a lot of the professionals that we were trying to reach were on the road and were using phones a lot more often than desktop computers. In terms of a responsive site versus any others, I had really fallen in love with the whole idea of responsive sites, and it’s something that had been a dream of mine to be able to do a responsive site for Organized Living since I came here about three and a half years ago.

Ethan:

Well Mike, since you mentioned the phrase “on the road,” I’d love to hear a little bit more about how you started talking about mobile users at the beginning of the redesign, maybe in contrast to how you thought about desktop users. We talk to a number of retailers and publishers, some of them feel that when they’re planning responsive redesigns, they kind of treat everyone as needing effectively the same information, whereas some other folks sort of suggest that different devices need different content. Where did this redesign fall on that spectrum?

Mike:

Yeah, that’s a great question. So, we had a few different audiences that we were trying to reach. Our product tends to be a little bit more high-end and it often is being done in a remodel or a new home where they’re looking for a closet upgrade. And so we wanted to make sure to reach those home-buyers who were thinking about doing a closet upgrade, but we also wanted to reach home builders, people who ran apartment complexes, owner-developers of multi-family developments, and we also wanted to reach the dealers who sell our product. We don’t sell most of our product directly to consumers, most of it goes through our dealer network. And so we wanted to make sure that we had a consistent message to all of those different audiences no matter where they were looking at our site. We know that a lot of consumers and home-buyers think about closets while they’re at home, while they’re maybe sitting on the couch and looking on their phone or using their tablet. We also know that a lot of our sales force is out on the road and speaking at trade shows or meeting people in their offices, and sometimes their phone is the only device that they have. And, in fact, just the very week that we launched our website, our CEO was sharing a car with someone who was a potential customer, who was asking him about the company and wanted to find out more about us, and our CEO was able to pull out his phone and walk through the website, and it was the perfect experience, it was exactly what we were envisioning when we created the new site.

Karen:

Let me ask about how you planned a project of this scope. I imagine it was kind of disorganized, chaotic. How do you think about scoping and budgeting a project where you’re working with an agency partner?

Mike:

Yeah, that’s a great question. We came into it without really know a whole lot, and we were looking for a partner who could really help guide us through the process, which is where Ryan and Sparkbox really came into play. We had kind of the basic vision for what we wanted to do, but we didn’t know how much it was going to cost while working with an agency, or even how much time we were going to need in order to implement it on our end. And so, part of the reason why we decided to go with Sparkbox was that they really led us through the process and we leaned on their experience in terms of how we would start a project like this and what the different phases of it would be.

Ryan:

Yeah, we had a lot of fun working with Organized Living. I would not say at all that they’re chaotic and disorganized by any stretch of the imagination. I hope we were able to bring a lot to the project as well. They came in with a lot of understanding around what it is that their different groups needed, the users in their case, from the dealer’s perspective and the consumer’s perspective, so that made our life a lot easier. They knew where they needed people to end up, and it helped out. We try to be pretty open even before we start to engage with a client, understanding where our estimates come from and how we arrive at those—we share those and open spreadsheets with them that kind of detail where we’re getting numbers from. From our perspective, that helps us build this trust so that we can have kind of a collaborative exploration of where we need to get to, so that when we get to the point where we’re having maybe a kickoff on a project, and we did one of those here at our office since they’re so close, we were able to bring them up here, we understood where they were coming from, we were able to be very open with each other on where we wanted to get to.

That led to putting things like a content priority guide together, trying to figure out what content needs to go where, how do we organize this stuff at the end of the day. We knew this particular project, with the visuals that they wanted to give to customers, whether it’s in a car or somebody sitting on their couch, that those visuals were going to be a big part of the public side, the customer-facing side of this website. So, we were able to figure out how all of that was going to work in a collaborative way with Michael’s team, and our PMs, and our content strategists and things like that, that made life that much easier when we did start to get into a build.

Ethan:

Ryan, let me follow up on that really quickly, because when we started talking to both you and Mike about Organized Living and the responsive redesign, one thing you both mentioned was how a real pattern-focused, modular design approach was a real benefit to working responsively. Can you talk a little bit more about that process and how you worked a pattern library into this?

Ryan:

Looking back before we engaged with Organized Living and Michael’s team, I don’t know if they anticipated a pattern library coming out of things, but it’s pretty much become our de facto way of working over the last few years. We build in the mindset of a pattern library in that we’re trying to break things down and understand how information is organized, where things are going to exist on the different viewports and things along that line, and when we build things out, the tooling that we use and the way that we think about breaking these sites down lends to a pattern library experience. Michael’s team was the one that ended up integrating what we build out as a pattern library into their system, and so we have this flow of decomposing a content priority guide, understanding the content and what’s become important using analytics and things along that line—we do that in a static world a lot of times, where we’re not going to be doing the integration, like in Organized Living’s case. And so we’ll build out this pattern library in a static world and work with their teams to integrate that as patterns become available. Now, we might do that page by page or template by template, but at the end of the day we have lots of little components, we’ll call them organisms and molecules if you’re familiar with atomic design, and hand those over to the integration teams. And Michael’s team did an amazing job, it’s one of the best implementations of a pattern library that we’ve seen, carrying that decomposition of a page into little tiny pieces into their CMS and their e-commerce system. Michael, I don’t know if you want to talk about how that worked out, but that was one of the best examples of an integration that we’ve seen so far, and it enabled quite a bit.

Mike:

Yeah, thanks Ryan, I really appreciate you saying that. What we did with the pattern library was we then tried to mirror that in building the modules that our CMS uses. So, one of the pain points that I had with our prior website was when our marketing team needed a new page, or when we wanted to adjust something on one of our existing pages, it was quite difficult to do that. Everything had been designed on the page level, and so if we wanted to change just one portion of the page, practically the entire page had to be redesigned and redeveloped. So, I wanted to build something that was modular that we would then be able to reuse the different parts. And so, the pattern library that Ryan’s team gave us then became the basis for our CMS modules. So, we built a number of different modules—like, for example, a simple one might just be a page title, and we took the portion of the pattern library that gave us a page title, and then turned that into a widget within our CMS so that whoever might be using that page title on a page could just drag and drop that title onto the page, edit the content as they needed. Then on the back-end the content contributor had the ability to choose the color, or maybe sometimes it has a subtitle, sometimes not, they could choose those configurations so that then it’s very simple to build new pages and modify them in the future.

Ryan:

Yeah, this has been one of the most exciting things to see come out of Organized Living, is how they were able to extend both the pattern library and their original implementation that hits consumers and extend it to other areas, like the dealer net and the sales net, making some modifications. We use GitHub repos for all our pattern libraries, and I happened to look at the pattern library before we got on this call today, and I noticed that there were some changes that were within the last six days to the pattern library itself. And so they’re continuing to extend this pattern library and move it forward for the needs that they have, and taking that downstream into their content management system, and that long-lived or organic pattern library that continues to evolve as the organization evolves is kind of the holy grail of all of these things that we hope to see. As much as we try to work with our clients to take that to heart and move it forward in their organization, it’s not always the case that it’s able to become a reality. And here with Michael’s team, it really was; it’s super cool to watch.

Ethan:

Well, it’s super cool to hear about. I think that integrated evergreen pattern library is really, as you said, kind of the holy grail that a lot of organizations are really chasing right now. Ryan, if I could kind of drill in a little bit more on Sparkbox’s design process and how they approach pattern-focused design, because I’d really like to hear more about how you set up Organized Living for that kind of success. If you want to talk about how your visual designers think in patterns, or even some of the tooling you mentioned specifically around pattern libraries… Pretty much anything you used to make pattern-driven design easier, I’d love to hear more about.

Ryan:

I think, first and foremost, the biggest thing that we’re going to do is we’re going to try to get into the browser as soon as we feel like we have a comfort level of where the visual design is going to go. So it doesn’t mean that we don’t work in any visual design tool like a Photoshop or an Illustrator or a Sketch—those are a big part of our design process. Working with our content strategists to figure out what’s important, and then allowing Jeremy Loyd and our designers to turn that into a priority from a design perspective—so, which parts of the design need to be accentuated—they’ll do a lot of that in InVision with Sketch. We’ll go back and forth with our clients, kind of try to get an understanding of whether we’re heading in the right place from a visual perspective. We use things like Style Tiles and the like to kind of get an early visual indication of where we want to go, maybe like in a kickoff or something along that line. Just asking folks, “Do you feel more comfortable with this set of colors and fonts, or this one?” But then eventually that does get us to the point where we say, hey, it’s time to get into a browser, and we’ll have a static pattern library—and by static, I mean these are handlebars, HTML, CSS, and Sass that we’re able to compose into little tiny pieces and we can drill down into a visual by itself. So the page title that Michael gave an example of earlier, that’ll be an explicit pattern or partial HTML file with CSS and the like that’s inside of our static pattern library. We can view that, adjust it, see how it responds in different viewports and things along that line.

We have a front-end design apprenticeship here and I got to watch the way that Jeremy helps teach this idea of component or modular design, and he really had them taking a focus on individual pieces of smaller parts of a website and just iterating on those little pieces, and then composing those into larger designs, and iterating on those individual pieces. It’s pretty cool. Obviously going to a mobile viewport or a mobile-first perspective is a big part of this, and that’s where our content priority guides come in to help determine what’s got to go at the top and what can fall lower in the priority. But I think Jeremy’s ability to think in this modular mechanism is something he’s learned over the years and has really exemplified as time has gone on.

Karen:

Can I ask you to follow up a little bit more about the content management system integration? I have worked with many clients to try to explain the value of modular systems and thinking of creating their website or creating web pages as a system of components. A lot of content management systems really still think in pages, or it’s not particularly easy to move away from a page-based, template-based system into a truly componentized system. Can you talk about how you built this? Like, what is the platform? How does it work? What’s different in how the CMS thinks about the world?

Mike:

Yeah, sure thing. The CMS that we use is Sitefinity, and it already has been widget-based for several years. I’m not sure if that’s always been the way it’s been organized, but for several years it’s been based around widgets, and so you can build a page template and then you can drag and drop different components onto the page. About a year ago they released a new front-end framework for Sitefinity called Project Feather, which is a really great tool. It’s an open source framework specifically for Sitefinity, built by the Sitefinity team, and it was designed to bring in responsive frameworks like Bootstrap or Foundation so that people could use that for Sitefinity. One of the nice things about Project Feather is that you can then extend it and create your own frameworks. So we took Sparkbox’s pattern library that they had created for us and then used that as the basis for our own front-end system. Project Feather is an MVC framework, and so the model-view-controller method lets you separate the front-end from the site, the view, from the data patterns that you’re using. So, we were very easily able to take the pattern library and figure out what we needed to show in the view for each of our different widgets, and then figure out how do they need to call on the data that we were using in Sitefinity. And with Project Feather, we were able to tie directly into the content systems that Sitefinity was already giving to us. So, for example, with our blogs, there was already a whole blog system within Sitefinity, we could create a new view for that blog system based on the pattern library and then very easily just tie it into the content that was already there within Sitefinity.

Ethan:

I’d love to hear a little bit more if the responsive redesign made changes to the way in which you would show the design to other members of the organization. How did you actually conduct design reviews with folks at Organized Living?

Mike:

Yeah, that’s a really great question. So, I’ll come at that from a slightly different way. Part of the process with Sparkbox was doing UX wireframes for the different pages. And so we used those in a lot of our meetings at Organized Living to talk about what was going to be on the different pages. Then our marketing teams and sales teams could actually gather around the wireframe, pretend that they were looking at a specific page, such as a bedrooms page that was going to show people what a nice organized bedroom closet they could have, and then use that wireframe to talk through the design. And then as the components for the design started to come together, we were then able to do the same thing with the designs that Sparkbox was giving to us, and be able to use that and talk about the page and what content we might be able to put on there. And then because we knew it was going to be modular, we were also able to have conversations about the page as a whole to say, “Well, we want a hero image here, but instead of moving into some information boxes, let’s have three additional images to show people some different viewpoints,” and we could talk about kind of the layout of the page as a whole using the design components that Sparkbox was giving us.

Karen:

Let me ask how you measure or evaluate the success of this pattern library and responsive redesign. For retailers, there’s obviously some very clear metrics around success. Does any of that change or do you look at your data differently now that the site is responsive?

Mike:

We do. I’d say before we went through this process, we were focused on very basic statistics, like page views, number of visitors. We didn’t have a very clear idea about what we wanted people to be doing on our website. Part of the process with Sparkbox was actually talking about what the goals of the website should be and how we should be driving people to take action. We wound up with three basic goals: we wanted to inspire people with beautiful images, we wanted to educate them about the importance of storage and organization, and then we wanted them to take action by contacting one of our local dealers or by working with a professional to install Organized Living. And so that’s given us a very clear funnel where we can see are people taking action, are people getting to the pages that we want them to get to and doing what we want them to do. So, one example is that for professionals, we want them to contact us because we wanted to start that relationship and be able to start finding out a little bit more about what they were looking for. And so we’ve been able to see very clearly a sharp increase in the number of professionals who are contacting us through the website, and we see that as a really clear win and also as a metric to try to continue to improve, to say, “Can we get more people to contact us? What’s happening with those leads that we’re getting from the website? Are those turning into ongoing customer relationships for us?”

Ryan:

It’s been a lot of fun watching Organized Living take these early kickoff objectives and goals that we had and carry those through, and to see them starting to carry that into the dealer net side, the sales net side, the different aspects of their website, the different audiences of their website, and really grow that forward. It’s been a lot of fun to watch their team evolve; it’s been pretty cool.

Mike:

It’s been great working with Sparkbox, and I feel like our game has really been taken to a new level in terms of thinking about patterns and designs.

Ethan:

Well in terms of taking things to another level, I’d love to hear if either of you have any advice that you’d like to share with our audience about maybe one or two lessons you’ve learned from the responsive redesign of Organized Living. Ryan, do you want to go first?

Ryan:

One of the things I think that we’ve learned as much as anyone from this effort with Organized Living is that these pattern libraries, even from some of the smaller organizations, medium and larger organizations, is they can be a true asset to your organization long-term. That objective of having a pattern library that can live long and help evolve your web presence and really change your approach to how you evaluate your web presence from a strategic perspective has been awesome, and I hope that everyone looks at these pattern libraries and the ability to redesign their website as something that they can carry forward for a long-term gain as much as a short-term redesign.

Mike:

Yeah, I would agree with that completely. Learning about pattern libraries from Sparkbox has been a terrific adventure for my development team. We’ve been talking about, in the coming year, where else we might want to implement pattern libraries and some of our other websites and other assets. And I’d also say one of the key things in this whole process is learning to understand our users and the goals that we wanted them to have, what we actually wanted people to do on the website, because it repeatedly shaped the decisions that we made about the design, about the page layout, about even just the number of pages in some cases, knowing that we wanted people to go in a certain direction and had very clear goals for them, and it enabled us to really shape the content, the design, the images that we used. It was a great experience and a really great discipline as well, because more than once it came up that people were saying, “Well, don’t we need a page for X?” and we could say, “Well, no, actually we don’t need that page because that’s not part of the pathway that we’re trying to take people on, so we can just leave that page off,” and then that made it a little bit less complicated to build and to write content for.

Karen:

Well this has been such a great story, I almost hate to let you guys go. But we are at the end of our time here, so Ryan, Mike, let me just say thank you for taking a few minutes out of your day to share this story with us. I really appreciate it.

Ryan:

No doubt, it’s been a lot of fun.

Mike:

Thank you. It’s been a pleasure to speak with you and we’re really excited to have this opportunity. Thanks.

Ryan:

Thank you.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every episode at responsivewebdesign.com.

Thanks so much for listening, and we’ll be back next week.