Mindnow introduces a new branding and website
Mindnow has grown up. As the digital pioneers our team has become, it was time to get a new corporate identity that reflects our technological expertise – after all, we sell digital services. Intending to position ourselves as a product development powerhouse, we created our appearance from scratch and built a new website with a top-notch Headless CMS.
Challenging our appearance
Make values visible
In a survey in 2022, we asked our employees to describe Mindnow with 1 word. The most frequent responses were: agile, efficient, digital, creative, flexible, forward-thinking, professional, networked, self-organized, inquisitive, experienced, fast-moving, current, fun, holistic, and reliable.
As a Co-CEO, I felt proud about the values my team mentioned. At the same time, I had to confess that our appearance at that time didn’t reflect these values. Our logo didn’t differentiate us from our competitors, the requirements of our branding didn’t meet our standards, and our immense technological expertise wasn’t delivered well enough anymore. We were ahead of a mission.
We founded Mindnow AG in 2017 in Zurich as an agency for digital marketing. Over the years, the service offering grew and has become more focused on technology rather than marketing.
Unique skills for creating digital experiences
Mindnow is a digital product engine with a lot of horsepower. And that’s thanks to a team of extremely talented people we’re proud to call our employees. Together, we’re able to create digital experiences End2End. We research, identify, prototype, design, test, validate, build, and stand on our partners’ side until the product is launched and beyond. Agile and to the highest technological standards. It was time to showcase these abilities better.
Leverage the individuality of our people
We’re not just a company. What makes Mindnow, is our community of people who work together to craft amazing products. Each of our “Minds” has unique skills that add value. We don’t talk about individuality, we live it. We didn’t want to put a brand on top of ourselves. The goal of the rebrand was to leverage the individuality of each Mind and to create something bigger than the sum of its parts. Together with the graphic designer Kevin Benz, we’ve developed the concept of “Mindentity” as our new branding.
The Mindentity is a unique Mindnow logo created for each person who works at Mindnow. The goal was to reflect the individuality of each Mind by mirroring the initial letter of their first name with a set of elements.
Section by Raphaël Améaume
Mindentity – a unique logo for each Mind
Every logo consists of 8x8 cells on a 2D grid to form a letter. Within each logo, you can find 8 different shapes: full circle, half circle, quart circle, square, cross, and half cross. While shapes like the circle are simple bezier curves, the crosses add more complexity to the logos. The shapes take up to 2x2 cells and are randomly distributed within a determined area on the grid.
Deterministic randomness
All letters of the alphabet are represented in the code itself. The technique of deterministic randomness makes every generated letter unique. The result is that if two people with a first name starting with the same letter, e.g. Adam and Aleksandar, both have a logo with the letter A, but are formed by a completely different set of circles, squares, and crosses.
To make the logos even more unique, every Mind could choose their favorite color for generating their Mindentity. It’s always one solid main color along with linear gradients.
To help the design process, I wrote mathematical functions to round any kind of path and make the radius computation of the shapes dynamic. The Mindentity was developed entirely in Fragment, with sketches regularly deployed online. The design team could play with some parameters (radius, filling rules, colors...) and provide feedback quickly.
The result is a bunch of unique logos generated in either SVG or bitmap images drawn on a Canvas 2D. It’s a branding that is as unique as the individuals who make up Mindnow.
Find out more about Mindnow's generative visual identity on my personal website.
Section by Raphaël Améaume
Section by Kaja Fuchs
Junior Product OwnerDesign system with complex color system and sections
Atomic Design
Besides a new logo, the whole Mindnow design is based on a structure of components and sections. Using the Atomic Design Methodology, different elements build on each other, which leads to a high degree of reusability, uniformity, expandability, and handling.
Atomic Design is a design system method that is structured similarly to chemical elements. Accordingly, the atom is the smallest unit, several atoms form a molecule, which can be reassembled into larger units and organisms. The advantage of Atomic Design is that elements can be used multiple times and thus create a uniform image that can be flexibly modified.
Admittedly, our design is not 100 % “atomic”. But the basics are the same – many design elements of our website can be found on several subpages. But because we at Mindnow are not fans of “that's just how we do it and we need to stick to it forever”, we have improvised at some points and chosen only the best practices of the Atomic Design method that suit us.
Accessible, but elegant
In terms of colors, we could have made it easy for ourselves. A white background, a few shades of gray for the texts, and a special color for buttons and lines – and done! That would have been developed in no time at all. But we wouldn't be Mindnow if we hadn't set ourselves higher goals.
One of our top priorities was to make the website appear accessible, yet modern and elegant. Something we are particularly proud of is our color system. If you have already clicked through the site, you will have noticed that each page has its unique color.
Have you also noticed that purple is not always the same purple, yellow is not always the same yellow, and pink is not always the same pink? That the orange background on the first page is not the same color as the lines under the titles? Probably not! Don't worry, you are not color-blind, the differences are simply so subtle that your brain automatically classifies them as the same.
But why go to such great lengths if you perceive the colors to be the same anyway? If we had used the same color for all three cases (color is background, color is on dark background, color is on light background), certain elements would not be as legible as they should be or would have jumped out at you unpleasantly from the screen.
Section by Kaja Fuchs
Junior Product OwnerSection by Deanna Miceli
Junior Frontend DeveloperA new website with a Headless CMS
Transforming our detailed design system into a showcase of a website could have been a tall order. Luckily, our development team does have the technological expertise to fit the bill. We decided to switch to a Headless CMS because its flexibility and user-friendliness are unbeatable. With Storyblok, the CMS of our choice, our design came to life and it was a match made in heaven.
Modularity built with reusable bloks
Mindnow is known, among other things, for constantly trying out new tools. This was also the case with Storyblok. No one in our team had any experience with it, but as expected, everyone was eager to explore the possibilities. With Storyblok, the foundations of our design are modeled into individual components, or “bloks” as they are called in Storyblok. Bloks are then nested together to build more complex features. This gives us the modularity that we need to maintain our atomic design and keep true to our original goals of reusability, flexibility, and originality.
Routine acquired with Storyblok
A special feature of the Storyblok CMS is that it does not require any backend code. All the fields we need to create content can be easily prepared with Storyblok and then linked to the frontend. If you have no experience with it, this advantage also comes with its pitfalls: there are many ways to Rome and you have to find the simplest and most beautiful one in the first place. In one or two brainstorming sessions with the team, we have acquired a good routine for finding the best way quickly. We were also able to rely on the support of Storyblok, whose team was always on hand with good tips.
Section by Deanna Miceli
Junior Frontend DeveloperClear recommendation for Storyblok
We chose Storyblok primarily because, like Mindnow itself, it is a young company with great ideas and thinks the same way we do when it comes to digital product development. In addition, Storyblok blurs the boundaries between backend and frontend, which makes a big difference not only in handling but also in the further training of our developers.
Sound knowledge of React and NextJS is certainly helpful when building a site from scratch with Storyblok. But the most important thing is an open attitude towards new tools. Just do it – that's how we acquired a lot of expertise. Every hurdle we have overcome now helps us to build better products for our partners.
Dynamic puzzle pieces for full creativity
Above all, the creativity that Storyblok offers is great. Our new website has several expandable elements and a clear structure. The “bloks” of our Storyblok are reusable and dynamic in many ways – we can add, change, move, or delete anything we want.
Editing and publishing with Visual Editor
Unlike WordPress or Wagtail, Storblok allows content editors to create sections and components themselves and put everything together flexibly. On the one hand, this leaves room for creativity and, on the other, ensures that the design system's predefined rules are adhered to.
What also makes Storyblok unique is the visual editor in the frontend, where you can see in real-time how the edits look on the page. We’ve not regretted our decision so far and recommend Storyblok to our customers.
Incidentally, the recommendation is reciprocal: Mindnow has qualified as an official Storyblok partner thanks to the development of our website and the associated learnings.
Best SEO score we ever had
Building our website from the ground up also had a great impact on our SEO score. Our site has higher performance and accessibility than ever before. A relaunch is always a good opportunity to update all your metadata and properly redirect links. Top-notch technology paired with some editorial efforts resulted in a 100 % SEO score in Lighthouse and a higher ranking on Google.
A project that will never be finished
I was asked if I am satisfied with our new website. We are on the right track with our branding, design system, and Headless CMS. But of course, I'm not satisfied yet and probably never will be. We have many more ideas about what we can improve on the new Mindnow website and have a lot of fantastic designs on the table. I don't want to give too much away yet, but in principle, a project like this is never finished. Stay tuned!
