Wireframe to Website: Creating the New LessingFlynn.com

Seeing as you’re currently reading this article, I’m guessing you’ve noticed Lessing-Flynn has a new website.  After months of planning, development and testing, we launched the all-new LessingFlynn.com in late March, and we’ve got to say we’re pretty dang proud. Sure, there will be an adjustment period as we weed out the few remaining technical bugs (this happens with any new site), but in the meantime the LF digital team has been having a blast using the new site as a their virtual playground to incorporate all the latest technologies, trends and tools.

To give you a better idea of what we’ve done, let’s take a closer look at some of the major components that went into the new LessingFlynn.com.

Design

The final design of our website is the product of dozens of hours of careful planning, research and testing. Of course, we covered all the standards like responsive design, page speed optimization and SEO best practices. Pretty much every element on every page of the website was scrutinized to make sure it not only functioned properly, but it makes for a good user experience. When we were initially planning our structure there were three main capabilities that we made a priority to implement:

  • Navigation/Menu — We went through several iterations of our primary navigation menu before we settled on our current design. We tried hamburgers. We tried drop downs. We even tried sliders. But in the end, we thought the (semi-classic) navigation bar would work best to keep things simple while helping users find what they need quickly.
  • Forms — Forms can be tricky. How much information is enough? How many fields should you have? Where should they go? We did a lot of user experience research and there’s a ton of conflicting information out there. However, we leaned heavily on our own years of experience to stick to the tried-and-true “the simpler, the better” way of thinking. You’ll notice none of our forms are more than a handful of fields with the goal of increasing conversions and engagement.
  • Video — Video on the web is already big and if predictions prove to be true, it’s only going to get much, much bigger and more important in the years to come. That’s why we made it a focus of our new website, even adding our brand video front and center above the fold at the top of our homepage. In the coming months, expect to see even more video throughout our website. We have a pretty great video production team here at LF, so we want to be sure to continue showing off that amazing talent.

Technology

Let’s get down to the nuts and bolts — what did we use to build our new site and why? Great question. Let’s take a look at the technology behind the scenes, see how it helps and why we chose it:

  • WordPress — Over the nearly two decades the LF website has been around, it’s been built with and lived on a number of platforms and content management systems. The previous version of our website was built on a proprietary CMS. We weighed the pros and cons as well as costs but ended up going open-source with WordPress. Without going too in-depth, the decision ultimately came down to wanting ownership and control. Though proprietary systems are great in some cases, we wanted to ability to move our site and content around if necessary or perhaps even get in there and doing some coding ourselves if we feel the urge.
  • Plugins — Another bonus that comes with using WordPress as our CMS is the abundance of plugins available for use. For those unfamiliar, plugins are small, handy programs that perform very specific functions on your website. There are plugins for managing user roles, helping with SEO or even displaying a joke of the day. Needless to say, we didn’t incorporate that last one, but here are a few we do really love and would highly recommend: Wordfence, UpdraftPlus, WPRemote, Yoast SEO, Advance Custom Fields and Gravity Forms. We won’t go into the details on all of them here but would encourage you to look into them if you’re interested.

Integrations

We use quite a few tools and programs in our day-to-day marketing efforts. Luckily, many of them play nice with websites to help streamline our workflow and just generally make our lives easier. So, of course, we jumped at the opportunity to integrate them directly into our website.

  • MailChimp — Email is still a great marketing tool and email newsletters are an easy, efficient way to promote brand awareness and distribute your content. At LF we use MailChimp as our email campaign tool of choice. It’s already pretty easy to sign up for a mailing list through MailChimp, but we made it even easier by integrating it right into a simple signup form we can place anywhere on our site. No pain, no fuss, and plenty of happy newsletter subscribers. Shameless plug: be sure to sign up for our monthly e-newsletter (the sign up form can be found below)!
  • Disqus — Let’s face it, sometimes comment management can be sort of a mess. Between spam and trolls, opening your website up to public commenting can be risky. Publishing and commenting tool Disqus makes things a little less stressful by providing an easy way for would-be commenters to add their two cents while providing site managers with a way to hold commenters accountable and filter out spam. It also integrates with major social media platforms, provides publish tools and even offers up some handy analytics.

Data

The LF Digital Team is pretty big into numbers and data. Call us nerds, but when it comes to mining spreadsheets, charts and graphs for information, we couldn’t think of a better way to spend the day. That said, we made sure to include a couple of our favorite analytics tools into the site and have plans to keep adding more in the future.

  • Google Tag Manager — Let’s start with the big one. When it comes to analytics, few can match the Google powerhouse. If you don’t have some form of Google analytics tracking on your website, you’re missing out on a lot of very helpful, very valuable data. With the launch of our new site, we incorporated Google Tag Manager, which goes beyond Google Analytics by making it easy to track specific actions on your site or even add other tracking software.
  • HotJar — Which brings us to HotJar. We added it to the site through Google Tag Manager and now it’s helping by providing some incredibly useful user experience data. HotJar can track clicks and scrolling, record user interactions, analyze user funnels, track form engagement, poll users or even enlist the help of live volunteers for user experience tests. We’re not embarrassed to say we’ve already tackled a few user experience issues brought to light by HotJar.
  • Moz — Last but not least, we’re tracking our site with Moz. Moz is basically the go-to authority on all things search engine optimization. With it, we’re recording and analyzing traffic trends, keyword performance, page optimization and much more. What would otherwise take hours to research, Moz can help accrue and analyze in a matter of minutes. When you’re focused on your site’s SEO (and if you’re not, you should be), Moz is a great tool to help make things easier.

Putting It All Together

There’s plenty more that went into our website than we can list here. After all, nobody wants to read a 100-page dissertation on the origins and process of any new website. And frankly, I wouldn’t want to write that (my hands would probably cramp up pretty bad after page 20). But the above gives you a pretty broad idea of what went into creating our new site.

We’ll be sure to keep you updated here on the Ad Mavericks blog with any new tools, trends or tricks we integrate into our site. We’re also excited to start seeing the results of our hard work and planning. Whether that comes in the form of data, research or real-world case studies, we’re planning to share it all here. So stay tuned!

Do you have any website creation stories? Any cool tips or favorite tools? Let us know in the comments below!

Sign Up For Our Newsletter