Full disclosure: All work talked about in this article was done while I was under the employment of SmartBug Media. I do not claim any ownership of this work, I just wrote the code.
Service Fusion was one of my clients while I still worked at SmartBug, and they ended up being a really influential client on how we did business. Service Fusion builds software for small to midsize service contractor companies, and like all of our clients they wanted to increase their engagement with their audience. I'm not sure who proposed the idea in the first place, but somewhere along the lines I got pulled in to make an interactive infographic.
Now, don't get me wrong, I've built interactive pages before, but normally it was with the mindset of there being interactive aspects on mostly standard page. Furthermore, this was 2022, and I needed to figure out how to make all of the elements of an interactive page editable by people who weren't developers.
Ultimately, we decided to go with two different routes for interactive pages and see how they went. The first was meant to focus heavily on the interactivity part and the pretty factor. We wanted this to feel like a nicely designed PDF with as much interaction as possible. Thus, the Roadmap Infographic was created, a short page that features different benefits about Service Fusion, where you can hover over each feature to get more information.
Figure 2: Roadmap Infographic
Following the Roadmap Infographic, we decided to tone it down a bit in terms of interactivity, in favor of making a more re-usable interactive experience. While all of the features were editable in the Roadmap Infographic, it was definitely a bit too specific of a design to keep using over and over again. Instead, I built the Service Fusion VS Infographic, a much simpler design that would still keep interactivity at it's focus, and could accommodate a lot of flexibility for types of content.
Figure 3: Service Fusion VS Infographic
Now there are a lot of great things about the Service Fusion VS Infographic from a design perspective, but I'm here to talk about what's so great about the code I wrote. On the surface, I have to admit I'm very proud of how well I pulled together the structure of this page and matched the design, I think it's gorgeous. Beyond that though, if you look deeper into the content you'll start to notice that this page gets more and more complex. Particularly, in the FAQ section, you'll notice that not a single dropdown is laid out the same way, but everything works. Keep in mind, I had to figure out a dynamic system to generate these FAQs, while leaving them completely editable for non-developers. I don't work for SmartBug now, and I built this code with the idea that literally anyone could edit or recreate this page with minimal effort.
Having seen these two pages, what I gained from this, and what I hope people reading gain from this, is that you don't have to compromise functionality to create a beautiful and engaging experience. With both of these projects, I started diving further into how to create these engaging experiences without needing a computer science degree to use it. Furthermore, the return value on such a page is immense. Being both interactive and enjoyable to look at means that users stay on the page longer, they learn more about your brand, and they want to engage with it further.