Mindnow mit neuem Branding und neuer Website
Mindnow ist erwachsen geworden. Als die digitalen Pioniere, zu denen unser Team geworden ist, war es an der Zeit, sich eine neue Corporate Identity zuzulegen, die unsere technologische Kompetenz widerspiegelt – schliesslich verkaufen wir digitale Services. In der Absicht, uns als Product Development Powerhouse zu positionieren, haben wir unser Erscheinungsbild von Grund auf neu gestaltet und eine neue Website mit einem erstklassigen Headless CMS erstellt.
Unser Erscheinungsbild in Frage gestellt
Werte sichtbar machen
In einer Umfrage im Jahr 2022 haben wir unsere Mitarbeitenden gebeten, Mindnow mit einem Wort zu beschreiben. Die häufigsten Antworten waren: agil, effizient, digital, kreativ, flexibel, vorausschauend, professionell, vernetzt, selbstorganisiert, neugierig, erfahren, schnelllebig, aktuell, spassig, ganzheitlich und zuverlässig.
Als Co-CEO war ich stolz auf die von meinem Team genannten Werte. Gleichzeitig musste ich zugeben, dass unser damaliges Erscheinungsbild diese Werte nicht widerspiegelte. Unser Logo unterschied uns nicht von unserem Mitbewerb, die Anforderungen an unser Branding entsprachen nicht unseren Standards und unser immenses technologisches Fachwissen wurde nicht mehr gut genug vermittelt. Wir hatten eine Mission vor uns.
Wir haben die Mindnow AG im Jahr 2017 in Zürich als Agentur für digitales Marketing gegründet. Im Laufe der Jahre wuchs das Dienstleistungsangebot und konzentrierte sich mehr auf Technologie als auf Marketing.
Einzigartige Fähigkeiten zur Schaffung digitaler Erlebnisse
Mindnow ist ein digitaler Produktmotor mit einer Menge Pferdestärken. Und das verdanken wir einem Team extrem talentierter Menschen, die wir mit Stolz als unsere Mitarbeitenden bezeichnen können. Gemeinsam sind wir in der Lage, digitale Erlebnisse End2End zu entwickeln. Wir recherchieren, identifizieren, prototypisieren, entwerfen, testen, validieren, bauen und stehen unseren Partnern zur Seite, bis das Produkt auf den Markt kommt und darüber hinaus. Agil und nach den höchsten technologischen Standards. Es war an der Zeit, diese Fähigkeiten besser zur Geltung zu bringen.
Die Individualität unserere Minds is unsere Stärke
Wir sind nicht nur ein Unternehmen. Was Mindnow ausmacht, ist unsere Gemeinschaft von Menschen, die zusammenarbeiten, um erstaunliche Produkte zu entwickeln. Jedes unserer “Minds” hat einzigartige Fähigkeiten, die einen Mehrwert schaffen. Wir reden nicht über Individualität, wir leben sie. Wir wollten uns keine Marke aufsetzen. Das Ziel des Rebrandings war es, die Individualität jedes Minds zu nutzen und etwas zu schaffen, das grösser ist als die Summe seiner Teile. Zusammen mit dem Grafikdesigner Kevin Benz haben wir das Konzept der “Mindentity” als unser neues Branding entwickelt.
Die Mindentity ist ein einzigartiges Mindnow Logo, das für jede Person bei Mindnow geschaffen wurde. Das Ziel war es, die Individualität jedes Minds widerzuspiegeln, indem der Anfangsbuchstabe seines Vornamens mit einer Reihe von Elementen gespiegelt wird.
Einblicke von Raphaël Améaume
Mindentity – jeder Persönlichkeit ihr eigenes Logo
Jedes Logo besteht aus 8x8 Zellen auf einem 2D-Grid, um einen Buchstaben zu bilden. In jedem Logo finden Sie 8 verschiedene Formen: Vollkreis, Halbkreis, Viertelkreis, Quadrat, Kreuz und halbes Kreuz. Während Formen wie der Kreis einfache Bezierkurven sind, verleihen die Kreuze den Logos mehr Komplexität. Die Formen nehmen bis zu 2x2 Zellen ein und werden zufällig in einem bestimmten Bereich des Rasters verteilt.
Deterministische Zufälligkeit
Alle Buchstaben des Alphabets sind im Code selbst enthalten. Die Technik der deterministischen Zufälligkeit macht jeden generierten Buchstaben einzigartig. Das Ergebnis ist, dass zwei Personen mit einem Vornamen, der mit demselben Buchstaben beginnt, z. B. Adam und Aleksandar, beide ein Logo mit dem Buchstaben A haben, das aber aus einer völlig anderen Zusammenstellung von Kreisen, Quadraten und Kreuzen besteht.
Um die Logos noch einzigartiger zu machen, kann jedes Mind seine Lieblingsfarbe für die Erstellung seiner Mindentity wählen. Es ist immer eine einfarbige Hauptfarbe zusammen mit linearen Farbverläufen.
Um den Designprozess zu unterstützen, habe ich mathematische Funktionen geschrieben, um jede Art von Pfad zu runden und die Radiusberechnung der Formen dynamisch zu gestalten. Die Mindentity wurde vollständig in Fragment entwickelt, wobei die Skizzen regelmässig online zur Verfügung gestellt wurden. Das Design-Team konnte mit einigen Parametern spielen (Radius, Füllregeln, Farben...) und schnell Feedback geben.
Das Ergebnis ist eine Reihe einzigartiger Logos, die entweder als SVG oder als Bitmap-Bilder auf einer 2D-Leinwand erstellt wurden. Es ist ein Branding, das so einzigartig ist wie die Menschen, die Mindnow ausmachen.
Erfahren Sie mehr über die generative visuelle Identität von Mindnow auf meiner persönlichen Website.
Einblicke von Raphaël Améaume
Einblicke von Kaja Fuchs
Junior Product OwnerDesign System mit komplexem Farbsystem und Sections
Atomic Design
Für den Aufbau unserer Komponenten und Sections haben wir uns an der Atomic Design Methodology orientiert. Dabei bauen verschiedene Elemente aufeinander auf, was zu einer hohen Wiederverwendbarkeit, Einheitlichkeit, Erweiterbarkeit und Handhabung führt.
Atomic Design ist eine Design-Methode, die ähnlich wie chemische Elemente aufgebaut ist. Demnach ist das Atom die kleinste Einheit, mehrere Atome bilden ein Molekül, welches sich wieder zu grösseren Einheiten und Organismen zusammensetzen lässt. Der Vorteil von Atomic Design ist, dass Elemente mehrfach verwendet werden können und so ein einheitliches Bild ergeben, das sich flexibel modifizieren lässt.
Zugegeben, unser Design ist nicht zu 100 % “atomic”. Doch die Grundlagen ziehen sich durch – viele Design-Elemente unserer Website finden sich auf mehreren Unterseiten wieder. Weil wir bei Mindnow aber keine Fans von “Das machen wir halt so” sind, haben wir an manchen Stellen auch improvisiert und nur die für uns passenden Best Practices der Atomic-Design-Methode gewählt.
Accessible, aber elegant
Von den Farben her hätten wir es uns echt leichter machen können. Weisser Hintergrund, ein paar Grau-Abstufungen für die Texte und eine Spezialfarbe für Buttons und Linien – fertig! Das wäre auch in der Entwicklung ruck-zuck erledigt gewesen. Wir wären aber nicht Mindnow, wenn wir uns nicht höhere Ziele gesetzt hätten.
Es war uns eines der obersten Anliegen, dass die Website accessible, aber trotzdem modern und elegant erscheint. Etwas, auf das wir dabei ganz besonders stolz sind, ist unser Farbsystem. Wenn Sie sich bereits durch die Seite geklickt haben, werden Sie erkannt haben, dass jede Überseite ihre eigene Farbe hat.
Haben Sie auch gemerkt, dass Lila nicht immer das gleiche Lila, Gelb nicht immer das gleiche Gelb und Pink nicht immer das gleiche Pink ist? Dass also der orange Hintergrund auf der ersten Seite nicht die gleiche Farbe hat wie die Linien unter den Titeln? Vermutlich nicht! Keine Sorge, Sie sind nicht farbenblind, die Unterschiede sind einfach so fein, dass Ihr Hirn sie automatisch als gleich einstuft.
Warum aber so einen grossen Aufwand betreiben, wenn man die Farben sowieso als gleich empfindet? Ganz einfach: Hätten wir für alle drei Fälle (Farbe ist Hintergrund, Farbe ist auf dunklem Hintergrund, Farbe ist auf hellem Hintergrund) ein und dieselbe Farbe genommen, wären gewisse Elemente nicht so leserlich wie sie sein sollen oder wären Ihnen aus dem Bildschirm unangenehm entgegen gesprungen.
Einblicke von Kaja Fuchs
Junior Product OwnerEinblicke von Deanna Miceli
Junior Frontend DeveloperEine neue Website mit einem Headless CMS
Die Umwandlung unseres detaillierten Design Systems in eine vorzeigbare Website wäre eine grosse Aufgabe gewesen. Glücklicherweise verfügt unser Entwicklungsteam über das nötige technologische Know-how, um diese Aufgabe zu bewältigen. Wir haben uns für ein Headless CMS entschieden, weil dessen Flexibilität und Benutzerfreundlichkeit unschlagbar sind. Mit Storyblok, dem CMS unserer Wahl, wurde unser Design zum Leben erweckt und es war wie geschaffen für uns.
Modularität mit wiederverwendbaren Bloks
Mindnow ist unter anderem dafür bekannt, ständig neue Tools auszuprobieren. Das war auch bei Storyblok der Fall. Niemand in unserem Team hatte Erfahrung damit, aber wie zu erwarten war, waren alle eifrig dabei, die Möglichkeiten zu erkunden. Mit Storyblok werden die Grundlagen unseres Designs in einzelne Komponenten, oder “Bloks”, wie sie in Storyblok genannt werden, modelliert. Bloks werden dann ineinander verschachtelt, um komplexere Funktionen zu erstellen. So erhalten wir die Modularität, die wir brauchen, um unser Atomic Design beizubehalten und unseren ursprünglichen Zielen der Wiederverwendbarkeit, Flexibilität und Originalität treu zu bleiben.
Routine mit Storyblok angeeignet
Eine Besonderheit an Stroyblok CMS ist, dass es ohne Backend-Code auskommt. Alle Felder, die wir zum Erstellen von Content brauchen, können wir ganz einfach mit Storyblok vorbereiten und anschliessend mit dem Frontend verknüpfen. Wenn man keine Erfahrung damit hat, bringt dieser Vorteil auch seine Tücken mit sich: Es gibt viele Wege nach Rom und man muss den einfachsten und schönsten erst finden. In der ein oder anderen Brainstorming Session mit dem Team haben wir uns eine gute Routine angeeignet, um diese Wege schnell zu finden. Ausserdem konnten wir uns auf den Support von Storyblok verlassen, dessen Team uns stets mit guten Tipps zur Seite stand.
Einblicke von Deanna Miceli
Junior Frontend DeveloperKlare Weiterempfehlung für Storyblok
Wir haben uns vor allem deshalb für Storyblok entschieden, weil es, wie auch Mindnow selber, ein junges Unternehmen mit tollen Ideen ist und das, wenn es um digitale Produktentwicklung geht, gleich denkt wie wir. Dynamisch, jung und mit grenzenlosen Möglichkeiten. Ausserdem zerfliessen durch Storyblok die Grenzen zwischen Backend und Frontend, was nicht nur im Handling, aber auch in der Weiterbildung unserer Entwicklern viel ausmacht.
Fundierte Kenntnisse in React und NextJS sind sicherlich hilfreich, wenn man eine Seite mit Storyblok von Grund neu aufbaut. Am wichtigsten ist aber eine offene Einstellung gegenüber neuen Tools. Einfach machen – so haben wir uns sehr viel Expertise angeeignet. Jede Hürde, die wir bewältigt haben, hilft uns jetzt, für unsere Partner bessere Produkte zu bauen.
Dynamische Puzzleteile für volle Kreativität
Vor allem die Kreativität, die Storyblok bietet, ist toll. Unsere neue Website verfügt über mehrere erweiterbare Elemente und eine klare Struktur. Die “Bloks” unseres Storybloks sind auf vielfältige Weise wiederverwendbar und dynamisch – wir können alles ergänzen, ändern, verschieben oder löschen, wie wir wollen.
Editieren und publishen mit Visual Editor
Anders als bei WordPress oder Wagtail können Content Editors mit Storblok selbst Sections und Components erstellen und alles flexibel zusammen puzzeln. Das gibt einerseits Spielraum für Kreativität und stellt andererseits sicher, dass die vorgegebenen Regeln des Design Systems beibehalten werden.
Was Storyblok ausserdem einzigartig macht, ist der Visual Editor im Frontend, bei dem man in Echtzeit sehen kann, wie die Edits auf der Seite aussehen. Wir haben die Entscheidung bisher nicht bereut und empfehlen Storyblok auch unseren Kundinnen und Kunden weiter.
Die Empfehlung beruht übrigens auf Gegenseitigkeit: Mit der Entwicklung unserer eigenen Website und den damit verbundenen Learnings hat sich Mindnow als offizieller Storyblok-Partner qualifiziert.
Bestes SEO-Ergebnis, das wir je hatten
Die von Grund auf neue Entwicklung unserer Website hatte auch grossen Einfluss auf unsere SEO-Bewertung. Unsere Website ist so leistungsstark und zugänglich wie nie zuvor. Ein Relaunch ist immer eine gute Gelegenheit, um alle Metadaten zu aktualisieren und Links richtig umzuleiten. Erstklassige Technologie gepaart mit einigen redaktionellen Bemühungen führten zu einer 100 %igen SEO-Bewertung in Lighthouse und einem höheren Ranking bei Google.
Ein Projekt, das niemals fertig wird
Ich wurde gefragt, ob ich mit unserer neuen Seite zufrieden bin. Wir sind mit unserem Branding, Design System und Headless CMS auf dem richtigen Weg. Doch zufrieden bin ich natürlich noch nicht und werde es wahrscheinlich auch nie sein. Wir haben noch ganz viele weitere Ideen, was wir auf der neuen Mindnow Website noch verbessern können und haben zahlreiche fantastische Entwürfe vorliegen. Ich will noch nicht zu viel verraten, aber so ein Projekt ist im Prinzip niemals abgeschlossen. Stay tuned!
