mäd.com v3.

We've launched the latest redesign of mäd.com, showcasing the latest trends in design and technology.

A year and a half ago, we launched mäd.com v2, which featured large beautiful images for each page.


It was a catch-all for everything we had on the web:

  • Our main information
  • Our Case Studies
  • Our News and Insights
  • Our Standard Operating Procedures

However, as Mäd grew quickly over the course of the last 18 months, we felt that it was a better long term bet to split these out into separate sites to better address our almost two-dozen contributors across our channels.

So we ended up creating three separate sites, each addressing one of our key needs.

  1. https://mäd.com - Our main information site, our business card to the world. There is information here on the company, our key case studies, our services, and also a landing page for careers. Powered by Webflow
  2. https://why.workwithmad.com - Our thought leadership site, showcasing our latest thinking and opinions on business, technology, and design.
  3. https://howto.workwithmad.com - Our Standard Operating Procedures, where we store all information in regards to how we do things, from coding standards to our hiring processes. Powered by Gitbook

Mäd.com - Using Webflow


We chose Webflow as our platform because it allowed our design team to work directly on the actual website, skipping out the developers - who are already busy enough with client work!

It allows us to make design changes and see these publised to the main site within seconds, and also allows our internal brand team to edit text via a great front-end editing feature.

We also created a handy style guide that allows us to spin up dedicated landing pages quickly, whether it's for a hiring campaign or an event.

It also abstracts away hosting as we host directly on Webflow, and this keeps our team productive, focussing on what actually matters for us.

Why #workwithmad - Using Ghost


We decided to use ghost.org to power our blog, where our team regularly publishes their thoughts and approach (it's what you're reading right now!).

We used the default "Casper" theme and made enough modifications to brand it Mäd, ensuring that we have beautiful typography, our colours, and lots and lots of hashtags.

This allows us to give our content writers a dedicated platform for writing, without them having to learn a complex CMS (Content Management System). Ghost also uses Markdown for writing, which makes our content higly exportable to other formats if we have other requirements in the future.

howto.workwithmad.com - Using Gitbook


We went with Gitbook because we fell in love with the beautiful interface, the great table of contents and discovery features, as well as built-in insights into which areas of the SOP the team were reading the most and found useful, and which areas needed improvement. The built-in connection to Github for version control is also quite neat.

What's Next?

We'll be publishing a significant amount of insights on Why #workwithmad, and also releasing several in-depth case studies of our successeses in the last year, showcasing how we think and what makes us tick.

Erika Valera

Erika Valera

Chief Culture Officer @ Mäd. A background in MarComms, recruitment, internal brand, and people matters allows her to find ways to make things work efficiently and aligned with the Mäd brand.

Read More
mäd.com v3.
Share this