Rethinking the content and design for the thoughtbot Website

This isn't the first time that I've been involved in the design of the thoughtbot marketing site but I think this one was the most meaningful. thoughtbot's CMO, Lindsey Christensen, had targeted the website as a place that we could make huge strides in capturing new leads for our sales team. Specifically, we pointed out that the site lacked a consistent tone and voice, that it didn't have long term direction established, the user experience and visual design was inconsistent. On top of those issues our site lacked a CMS, teammates needed to know HTML to make copy edits or changes to the site, which left our Marketing team powerless. Our team set out to tackle each of these issues.

Setting the stage

Lindsey, and Elaina Natario, a Designer in our Boston studio, started a document to capture all the problems that we were seeing both from an internal and external perspective. I added feedback along the way and guided the process as an advisor. I also helped give historical context for decisions that were mad in the past. They did a great job capturing some of the problems with the current site and establishing some main Jobs-to-be-Done for our Marketing team, our perspective clients, and out internal team.

Once they had completed the document, I ran a few Jobs-to-be-Done switch style interviews on some of our clients. It helped us test some of our assumptions about our work and how we were communicating to our clients, it gave us a good idea when and where the site was used on their buying timeline.

Establishing brand guidelines

Once we established a project brief, including problems we were trying to solve and the outcomes that we were expecting, our team identified that starting with stronger brand guides would be the best place to start the project. This would give Designers better rules to follow when designing for thoughtbot. Lloyd Bennett and Miles Johnson, Designers in our London Studio, started in on crafting a stronger brand for thoughtbot. With Lindsey and I sharing responsibility for signing off on the outcome. The work that they did established a solid foundation for the rest of the design work when thinking about the site.

Evaluating and working through content

In parallel to the work that the London Designers were doing Lindsey and I started to tackle the content on our site. Much of the content talked about ourselves in a way that didn't address the situation that our perspective clients were in and what outcomes that they were looking to achieve. We realized early on that we would need to go page by page and evaluate each individually. We started with our services pages and made our way through all of the critical pages.

Establishing a system of slices

I started to dig into some of the consistencies with the content that we were writing. From those consistencies I started to form an idea of what different components we would need across the entire site. Working closely with Tyson Gach, Design Director in our NYC Studio, we established an initial data model. With his deep knowledge of thoughtbot and Prismic (CMS we were using), Tyson also provided critical feedback on the design as it evolved. Behind the scenes Tyson lead an enormous effort to clean up the existing code which made it much easier for us to start to implement the new styles.

Integrating into Prismic

We decided that to get the new design out faster we would first focus on getting the content and static slice data structure in-place. This allowed us to iterate faster and make sure that the design and underlying structure was going to work across the site. Once we had the pages in place we started to merge our styles with a master Page type in Prismic.

In tandum, we refined our Content Audit to align with the slices that we had built out. This makes creating new pages really easy for our marketing team to do without ever having to understand the underlying concepts behind the code or design system.

Results