Building our New Website

A walk-through of how we went about ideating and creating our new website.

The old website

Our old website had become outdated. What’s more, it took engineering resources (luckily we have that in-house) to make changes and edits, which was a burden to the engineering team and a delay for the marketing team. Furthermore, we had come across additional pain points that brought us to the conclusion that we needed to do something different.

Our old website pain points:

  • Our value proposition no longer sounded unique in the marketplace.
  • We want the website to be built around the buyer’s journey, something that would be nearly impossible to do with the current version.
  • We need to display our work (case studies) in a simple and intuitive manner.
  • It didn’t work well with our new SEO strategy.
  • Our non technical stakeholders wanted to be able to make edits to the website without asking the engineers for help.
  • We want to be able to move quickly and go to market without delays.
  • Our engineering team didn’t want to have to dedicate random time to the website to make edits and updates.

Our task: Build a new website in a way that gives the marketing team full freedom to customize and make edits without engineering intervention. The difficulty was that we (the marketing team) already had very specific design requests in mind that didn’t exist in any out-of-the-box web builders. Wordpress (the old website) provides content management and how to display — but in a very opinionated way. It’s specific with a template which means you’re locked into what it provides. That just wouldn’t work for our needs.

The engineering team looked over the requirements we gave them and landed on using a headless CMS called strapi so they could built various (think many) custom components that satisfied all of the design mockups and potential future changes for the marketing team. That means having the freedom to create the UI we want with what we want, decoupling the content management and the UI that presents it. Now we can get to market quickly on anything new we want to build or add (which is important for us).

The new website: Ideation

We started with a Miro board, putting down concepts and inspiration from various websites or forms and adding notes or visuals where we wanted to do it differently. Not everything was clear from the start, and MOST pages were iterated over time.

Our old website was equally split between targeting our employer brand and our partner brand. Meaning, it spoke equally to people who wanted to work FOR Think-it and those who want to work WITH Think-it.

The first big change was that the new website would be build completely with the partner brand in mind — built around the buyer’s journey and needs.

We had previously staked out the buyer journey and understood what mattered most, and built the flow of the website towards our case studies. In essence, all roads lead to case studies (validate we’re the right team), and all case studies lead to the inbound form (reach out for a consultation).

Website journey map

Though many things changed during the process, two things were clear from the beginning; The case studies and the inbound form and flow. Interestingly, these two components were one of the drivers behind the whole website overhaul — they were missing and not something readily out-of-the-box in any website systems.

Essentially, these two components were the main driving factor behind building a new website.

Case Studies

With case studies, we wanted to make previously publicly unavailable information about our work and partners more easily discoverable and digestible. We had a pretty clear idea of how we wanted to display that information.

Early case study mockup

On the old website, this was the closest thing we had to a case study — it doesn’t really tell a potential partner anything relevant about our work.

Old website case study

The new website case studies page is built as a “choose-your-own-adventure” with relevant filters so potential partners can look at what is relevant to them (since we have 30+ case studies available). We felt this was important for the buyer journey — get people the relevant information they want as quickly and easily as possible. They can additionally remove the filter to simply show more case studies per line.

The inbound form

With the inbound form, we wanted to gain as much information about potential partners as possible before ever having a meeting (to make the meeting more productive). The flow was also pretty clear from the start.

Inbound form mockup

On the old website, the inbound form was a bit restrictive as far as the information people can put in. Additionally, it didn’t really tell our team much info to have a first conversation with them.

Old website inbound form

The new website has a clean form that is built as a “choose-your-own-adventure” so that we can segment and only ask questions that matter, and know from the start who should be the best point of contact for the inquiry. Basically a 'discovery call before the first discovery call'.

What we do

We'll highlight this section as it went through several iterations and is one of the most important sections on the website (after the case studies and inbound).

The old website broke up our offerings by engineering chapter. But in reality, most of our projects and partners are cross-chapter, rendering this sort of display irrelevant.

Old website navigation bar

So we approached our offerings by looking back — how could we categorize all of the work and projects we’ve previously done to simplify what we ACTUALLY do?

First iteration what we do page mockup

At first we simplified it by categorizing the partners into who they are: Early Stage, Growth Stage, or Enterprise. The issues with this is that 1) it still didn’t quite capture what we did in a clean way and 2) it did’t sound unique in the market, missing out on playing into what makes Think-it different.

We revisited it and re-categorized the potential partners by what they’re looking for; not who they are.

This got us to Product Innovation, Scaling Teams, and Data Sharing (our niche specialty).

Second iteration what we do page mockup

With that, our offerings became clearer for navigation for interested partners. But there was still an issue: We don't sound like Think-it, we sound like everyone else. We STILL didn’t lean into what makes Think-it so special; the why we exist. So going back to what makes Think-it unique, we revised product innovation to be what we actually do: Responsible Innovation. With this title and following copy, we better illustrate our position (backed by our work history) to relate to what matters to our ideal partner.

Summing up

Without going through how we came to the final version of every page, this is the same iterative approach we took across most pages of the website. We looked at a few guiding questions:

Buyer journey: How did this page fit into the buyer journey? What is most important to display in that part of the journey? Is there a better way to approach it?

Copy: Does it clearly and concisely articulate the information? Is it punchy? Is it authentic to Think-it? Does it sound different than the rest of the market?

Aesthetics: Is your eye drawn to where we want it? Do fonts (style and size) make the flow visually pleasing? Do the images and look/feel convey the message we want (outside of the copy)?

Its not a simple task to redesign an entire website. But we found it to be an essential move for better awareness, distinction, and clarity of who we are and what we do. Because our internal engineering team had clear requirements from the start, we were able to choose a platform that created the outcome we wanted--full creative freedom for the marketing team to build and go-to-market quickly without requiring engineering resources, and without large design restrictions.

Share this story