Component-based Design on Umbraco: A Case Study from ProWorks and Mold Inspection Sciences

[0:03] Jason Prothero: Welcome, and thanks for joining us for this presentation and case study. We're here to share how we used component-based design to help solve some complex problems and make the new Mold Inspection Sciences website project a success. I'm Jason Prothero, the President of ProWorks Corporation. We are a Gold Partner, and we've been using Umbraco since Umbraco version 4, around 2009. I typically help with the strategy, solution planning and architecture in the early stages of projects, to make sure they're a success and that they work for the marketing and content editors as well as the developers and IT teams within organizations. We're based in Corvallis, Oregon, home of Oregon State University. Go Beavs!

[0:52] Paul Sterling: Hi, I'm Paul Sterling. I started working with Umbraco back around 2006, in version 2. It was definitely a different kind of CMS at that time. Over the years, I created one of the first, but not one of the best, e-commerce packages for Umbraco, called Commerce for Umbraco. I co-authored the Umbraco User's Guide, around version 4, with Nik Wahlberg from Scandia. Then I worked at Modus Connect. I worked at Umbraco HQ for seven years, and I've even worked with ProWorks as one of their developers for about a year. I still work with them off and on whenever I can. This year I was named an Umbraco MVP for the eighth time, and right now I'm the CTO at Mold Inspection Sciences and Mold Inspection Sciences Texas.

[1:40] We think about Texas and then everything else, kind of like a lot of people do. I live up in Bellingham, Washington, the city of subdued excitement. It's also home base to Team Skrift, so if you know Janae, Kyle and Erica, they also call Bellingham home. What we do, real quick: we focus on science-based inspections for mold and similar contaminants in spaces where people live and work, and we help people understand the steps they need to take to return their spaces to a healthy state. Pretty much just what the name says. So when we started this project earlier this year, we approached ProWorks with some specific goals. There are more than are on this slide, but the one big one that overarched everything was that we had a very legacy structure in terms of domains.

[2:33] We had a domain for every market, essentially, like Mold Inspection San Diego and Mold Inspection San Francisco. What we wanted to do was move to one domain, which is a much more modern approach, where you have location pages rather than location domains. But of course that presented some specific challenges, as you can imagine. There were other goals too. We wanted to optimize our content structure, we wanted to optimize for SEO, and our editors were really challenged to create good content that looked consistent with the rest of our content. I'll talk about that in just a second. And generally, we just wanted to modernize the sites. So, some of the challenges. All the current sites, all 12 of them, were running on Umbraco version 7, and as you know, right around the time we're giving this talk, October and November 2023, Umbraco 7 has reached its end of life.

[3:28] So those needed to be migrated to a more modern version anyway. But it's not a super straightforward migration. Those sites were originally migrated from WordPress, so they had a lot of legacy baggage. Like I mentioned, the 12 different sites had a lot of different content structures, so there wasn't a consistent structure across the sites, and none of them were really optimized. So one of the first things ProWorks helped us do was figure out an optimized content structure that was going to be good for organic search, for SEO, and for making it easy for site visitors to find the content they were looking for. ProWorks also helped us define a redirect strategy, because we had all these different pages that were now going to resolve to a totally different kind of structure on a different domain.

[4:15] There was quite a complex set of redirects that came along with the project, and fortunately we're not going to talk about that today. And like every other project, right, we have a relatively small team and not an unlimited budget, so those were always challenges, along with who's going to do what. And finally, the editor challenges I mentioned were really about the editors not knowing which tools to use. We were using uComponents with version 7. It's a great way to get a site up and running quickly, but uComponents is a massive set of things you can use, and our editors didn't know which one was the best one to use. So we ended up with a lot of content that looked different from a lot of other content, and the editors weren't really excited about it, because they found it kind of cumbersome to create things in the grid layout structure. So those are our big challenges. Anyway, I'll let Jason talk about how we went through and solved those, and what the approach was.

[5:19] Jason Prothero: Great, thank you, Paul. Next, I'm going to walk through the goals, the challenges and our approach to the new Mold Inspection Sciences website. On a typical project, ProWorks does the strategy, the design, the discovery and the implementation: the whole thing for a new site build. For this project, we had an opportunity to collaborate with Paul and his team, because of his experience with Umbraco and our experience working with Paul. We've had some good experiences in the past, so we had a good level of trust to start the project that way and involve them more deeply.

[6:15] When Paul approached ProWorks about a site redesign, it was clear they needed help with the design and the content strategy, and things like that. We felt that the team needed a system they could use to build the content they needed. From some of our past engagements, it was clear they needed some flexibility to deal with SEO concerns and try some things out, because organic SEO is very important for them. They needed the ability to change and expand into the future, and not be too restricted by anything we built. We also knew Paul had the ability to manage sites, and we felt like we had a framework he could build on and extend as we went forward.

[7:05] So these goals here were our drivers and success metrics for the site build, which we defined early on. And then next, the approach. We always begin every project with a discovery phase, where we try to understand user stories and personas, work through the design process, and make sure everybody's on board, taking small steps toward what we're going to build. It was really important to nail down the design and content strategy up front, and set the stage for the implementation with the concept of components in mind. We always do that for a build these days, but it was especially important here, because we were going to be collaborating more on the implementation phase. That was partly due to some potential budget issues, but also because going forward, Paul may want to take the site in its own direction once it goes live, adding new features and other things they're going to need.

[8:07] From a collaboration perspective, DevOps, automated deployments and continuous integration are always very important for ProWorks. It's a big story. We chose to use Umbraco Cloud for the hosting and for the continuous integration and DevOps setup on this particular project. It's great for collaboration between teams. It gives us automated deployments, a repository for code, and the workflow to deploy between environments. It also helps with post-deploy maintenance, in that it can allow for automatic updates, either through a push button or even, potentially for minor updates, behind-the-scenes upgrades.

[8:56] And it minimizes the amount of maintenance that needs to be done on the Umbraco system specifically. That's helpful for Paul's team, because they're not a huge team, so honestly, the less maintenance they have to do the better. And then, component-based design. Component-based design is a methodology for building websites that enables content editors to construct pages from a library of components, or content blocks, which is the terminology Umbraco uses. Umbraco does make it easy to build these components. As you can see, the screenshot on the right is a sampling of some of the components Mold Inspection Sciences has in their particular implementation.

[9:46] It gives an idea of what the content editor sees as they're building or modifying pages, and the types of things they can add. Next, I'll walk through the benefits and how that works. There are a lot of goals when building a website. There are SEO goals, lead generation goals, performance goals and accessibility goals; there are tons of things. And frankly, as time goes on, new requirements are being added for sites, such as sustainability these days. That's another consideration. I don't think it's going to get any simpler any time soon, right? And components support all of these goals. Unfortunately, the content editor's experience, how they actually work with the site, is typically an afterthought for most builds.

[10:46] Except for us: we typically pull that into discovery, so it's very clear to the content editors what they're going to get once we implement the site, and they're on board with it before we even start implementing. We really focus on trying to make it easy for them, and our favorite way, the way we work now, is component-based design. We feel it's a very usable way to meet the needs of the website, and content editors just get it. It's simple, and they're able to have confidence and control over the content as they need. Most of the benefits listed here are about being able to modify content, reorganize it and create new content easily, without having to be a technical content editor or have any HTML or CSS experience.

[11:40] So we really feel like it extends the lifetime of a website and the web design, because it's flexible and can be modified in the future. Effectively, what we're giving the content editors and these teams is a custom set of components, like a site builder for their specific design. So it's very clear what each component does, and they're not trying to fit a generic set of components into a design that was decided upon. The design is implemented first, then the components are built from that design, so it's very specific to their design, and custom. Okay, so how does this work?

[12:31] Here are a couple of screenshots. On the left you have the back office experience: these are the components, stacked on each other in a list, that compose the page. And on the right you'll see the homepage, and you can see how these components relate directly. There's a one-to-one relationship between each part of the page, as you go down it, and the components you see in the back office. These are just an overview of the descriptions of the components. They stack on each other like Lego bricks. You can move them, or reorder them to promote something up the page that's more important, or to try something out. You can disable them to hide them, or remove them completely, and you can copy and paste one component or an entire set of components from one page to another.

[13:24] So generally they're fairly easy to work with, even once they're set, and you can reuse them. In addition, we have a concept of reusable components: a library of preset components that a content editor can add to a page, which are effectively the same thing over and over again. So they don't have to keep copying it between pages or re-entering the content multiple times; there's one place they can edit it and have it change everywhere. When the content editor wants to edit something, or put in the initial content for a component, it's pretty simple. Just click on the component, the title there in the box, and a dialog comes out where they can edit the content for that component.

[14:12] So it's fairly structured, and specific to this component: there's a title, a subtitle and some links. This is the hero for the homepage, and it's an interesting example, because for most of the sites we've worked with, a hero doesn't have this sort of contact information in it. But this is specific to Mold Inspection Sciences. It was important for them to have a really clear way to contact them, in a really prominent area on the page. So this is a new addition to this particular hero component, different from any other client's, and specific to their design. That's where the custom components part comes in. It's very clear where to edit it, and you don't have to massage or wrangle a component that's not really meant to do it into what you want it to be. It's just how it is, and it just works.

[15:08] In addition, you can edit some basic design elements, so there's some customizability that can be built in. This could be things like themes for a component. In this case, the background color can be changed for the hero component, to vary it, or maybe to see if something performs better. You can also disable components, so they don't go away completely but hide for a while, and you can bring them back. Maybe it's a seasonal thing or a special event that you have regularly, so you don't want it removed forever. This is really customizable too, based on the component. Some components may have different settings you can use to customize the design, and give a little variation between the same component on different parts of the page, or on different pages, to get a really different feel.

[16:07] So in summary, we believe component-based design is the perfect balance between flexibility and control, for both content editors and the implementers. Content editors get control over their layout, and the flexibility to change their pages regularly and create new pages, perhaps from a combination of components that hasn't been thought of before. And generally they're happier and more confident about editing and building out the site, without being afraid they're going to break something. From the implementer's point of view, we have control over the rendering and the markup, so we set guardrails for the editors. They have some flexibility, but they're not going to fundamentally break the design, or the accessibility or mobile requirements, things like that.

[17:02] So all of those goals we have to ensure for a website and a design, we can control, while giving quite a bit of flexibility to the content editors, so they feel able to be creative with their content and their site. In addition, components can easily be added in the future if there are new requirements. And it provides a common language for the editors and the implementers to talk through what a component might look like. It's just a little bit easier to communicate in that common language.

[17:48] Paul Sterling: All right, so I'll just wrap it up here. The outcome was a really successful project, successful all around. The way ProWorks and Mold Inspection Sciences were able to work together on the project was great. The fact that we actually launched the sites is great, of course, and the fact that they met their goals is great. In fact, it was such a success, and so easy to justify to my CEO, that we already have a phase two on the books with ProWorks. It turns out everyone's really busy right now migrating off of version 7, but soon enough I hope that'll be done. Then we can work on some phase two stuff, which is fun, because that's the cool thing about components: you can just keep adding on when you want to, like Jason said.

[18:35] So it's live, which is great. In fact, we launched the first site, for what I call the non-Texas company, everything that's not Texas, in August. Since then we've seen a bump in our traffic and our conversions, which is how we measure our leads, and in general content editor happiness. They've been creating more and better content, in my totally subjective opinion, because it's just easier to do. They don't have to fight the system as much. I think our content editors actually think we built this new CMS just for them, because that's what it looks like: it's just got mold stuff in there. There's no other uComponents stuff that we don't use, which is great. And like I said, nothing bad about uComponents. It's a great solution, but it wasn't right for us.

[19:23] And like Jason mentioned, we ran out of money before all the components were done on the project. I don't know which project that doesn't happen on. But by following the patterns ProWorks had established for the way the components were built, and having already done the design up front, I was able to finish the couple of components that didn't fit into the project budget. So the project was complete, which is super nice. Not only that, I really enjoyed it, because it's kind of cool. Umbraco, for lack of a better word, makes it easy to develop components. It's a nice system if you understand how to do it. I think the one thing that might be missing on the Umbraco side right now is more prescriptive guidance on how you actually create those things, because you do have to connect a lot of dots to figure it out.

[20:19] But I had a pattern to follow, so for me it was not hard. We restructured our content into a more optimized structure, and optimized the way the pages are actually rendered, so it's nice, clean markup. That's another thing the components allow you to do: you have total control over the output. We've bumped our search rankings up dramatically. I don't know how everyone else measures it, but we measure it using Semrush, which has a position tracking tool, and we've seen our position keep increasing relative to our competitors. So that's great, right? It's a super small market. Mold inspection is not something you really care about unless you have mold, so it's a finite number of people. It's just not that big of a market.

[21:09] And like I said, just to close this slide off, we are looking forward to a phase two, and likely even a phase three. That will change a little of what some of the components do, but mostly it's adding new components, because now we see the capabilities we have to create engaging, interactive content. Anyway, massive success all around. Kudos to ProWorks for really knocking this one out of the park. I've heard more kudos from this one project than I think I had in the five years before it combined, so we'll say that. And then, for some numbers, just to give you the proof. This is about the first 30 days of the non-Texas site.

[21:55] We saw almost a 300% increase in our users and our traffic, and almost a 400% increase in our conversions. That's really good, because what we're measuring is our organic search conversions: essentially, people who find us and contact us. That's a lead for us, so that's a nice number. We just get that for free, I would say. We don't pay anything extra to be in organic search; it's just that the site is better structured, so that's pretty cool. We had one day, you can see that one little blip there, where reCAPTCHA was off for some reason on one of the forms, so that day we got a lot of leads. And then, interestingly, just two weeks ago we launched the Texas version of the site, and that one's an even more drastic difference: over a 500% increase in users and traffic, and over a 400% increase in events.

[22:51] We measure conversions in Texas differently, using a different tool, not Google Analytics, but we've also seen about a 400% increase in conversions there, and that continues as the site becomes established. A lot of that's just the fact that we can create good content, and don't have a site that's poorly structured for SEO purposes. And then finally, more on the actual site structure side. The before site was the older version 7 site. It wasn't the worst site out on the web, but it definitely wasn't where we wanted it to be. One of the success metrics we talked about with ProWorks initially was targeting a score of 90 or better across PageSpeed Insights, and you can see we definitely nailed it.

[23:45] And this is before all the optimizations were in place. At one point we were near 100 across all four of the main categories, so we nailed that success metric. I've personally never worked on a real, live website that's near 100 for PageSpeed Insights. You can do it on a sample site, but this one actually did it, which was super cool, and I'm positive that also helps our search ranking. It's a little bit lower than this in reality, because we've added some other scripts: some analytics, some ad tracking and some web chat kinds of things. Of course, all of that does bring it down a little bit. But if we look at the baseline, which is just the site, it's a significant improvement. Not that that necessarily has anything to do with components, but we don't end up polluting our site with a lot of unnecessary code, we'll put it that way. So that was it. Like I said, huge success. Kudos to ProWorks, and I'm looking forward to phase two with them soon, I hope. That's all I have.

[24:58] Jason Prothero: Great results. Thanks for sharing that. Paul Sterling: Thanks for doing the work. It was a great project, and a lot of fun. Jason Prothero: Okay, well, thank you, everybody. If you'd like to speak with ProWorks to learn more about component-based design and how it can help you, please contact us at proworks.com, where you can read a little bit more about us as well. Paul Sterling: Again, thanks, Jason. And if any of you need mold inspection, you know where to find us.