Responses by Hello Monday.

Background: The purpose of the site is to highlight the amount of work that Hello Monday has done over the years and attract potential new partnerships while still bringing joy and smiles to the faces of creatives all over the world.

Design core: The site’s core feature is to get a quick overview, but with that in mind, have small surprising elements that make the experience joyful. How to grow up while still keeping our inner child was a core design challenge when doing our new site. The solution to this was to keep an almost editorial style throughout and then let the illustrations and development bring some of the quirkiness we also have, representing some of the different facets our company is known for.

Favorite details: We’re all very proud of how we managed to create a site that serves multiple purposes. From an aesthetic point of view, we love the minimalist look, but the feel being more personal shows the beautiful imperfections that make us who we are as an agency. A tiny Easter egg that we really like is the copy/paste e-mail at the bottom of the page and the animation that goes along with that. It’s a small detail, but we believe that putting extra effort into the smallest things leaves a bigger impression on people when they leave the site, and we’re totally OK that not everyone will find these treats. By the way, this is just one Easter egg, so go and find the rest yourself if you can!

Challenges: When doing your own site, there are a lot of opinions about how it should look. Believing that we were on the right track even when we had our doubts was by far the biggest challenge. Another was to balance the business aspect versus the creative aspect. We wanted something that felt professional and would answer questions that potential clients might have, while at the same time inspiring potential new employees and the general design industry with a visual feel.

New lessons: Since we’ve started, our portfolio has become so visually broad that we’ve gone from being very Nordic to making solutions for cultures all around the world.

Navigation structure: The thinking behind it was to have a simple structure that instantly gave the user an impression of who we are and what we do. We made sure that we put our work—the most important thing—first.

Even though our navigation itself is very simple, the placement of the navigation was quite untraditional. Normally, it’s very easy to find the navigation. We went with a direction where we quickly tell the user where the navigation is through animation, but after that, we actually hide it completely until users move their cursors towards the side of the page, bringing the navigation back into the screen. We decided to do this because we wanted to limit the UI elements on the screen to a bare minimum, fully submerging the user into our case studies.

Special navigation features: We wanted the navigation to feel like an organic sticky element that would take over the entire page no matter where users would interact with it. A small detail to note about the navigation is the way it opens and closes. We’ve developed it so that it never does it in the same way, making it feel truly unique and alive.

Technology: The front end is built with TypeScript as a single-page application. The back end is set up with Symfony and Contentful CMS. HTML was rendered with Twig. The site is hosted on Heroku with a StackPath CDN in front.

The hover effect on the case thumbnails is rendered in WebGL using PixiJS. Gooey page transitions are made with Paper.js.