Carly ReDesign
Ein ReDesign für echte Schrauber!
„Carly – the good drive“ bietet eingefleischten Autoschraubern und all denen, die es auf einfache Art und Weise noch werden wollen, eine smarte Lösung. Dabei ist das Münchner Unternehmen zum einen intelligente Software, in Form von einer APP – zum anderen aber Hardware, die es fast allen Fahrzeugen ermöglicht sich über einen sog. OBD Stecker mit der APP zu verbinden. So können Nutzer von Carly ohne technisches Know How auslesen, was am eigenen Auto z.B. genau defekt ist, ob ggf. ein Gebrauchtwagen den originalen Kilometerstand aufweist und viele Funktionen mehr.
Smarte Technik & Automobil sind gleich zwei Gründe, weshalb wir uns sehr über die Anfrage von Carly gefreut haben. Mit dieser begann eine umfangreiche, gemeinsame Reise: Von ReBranding über eine neue Bild- und Schriftmarke hin zum großen Webdesign mit vielen, weiteren Nebenschauplätzen. Wir nehmen euch gerne mit: Anschnallen und los geht es.
Moodboards
Carly brachte bereits erste Erkenntnisse und Insights rund um die bestehenden Personas mit zum Kickoff. Auch waren die Unternehmenswerte: Joy, Relevance aber auch Knowledge gesetzt und erste Ziele für das Projekt grob skizziert. Um agil und wirtschaftlich zu starten, erstellten wir als erstes sogenannte Moodboards. In diesen Boards sammelten wir Schriften, Formen, Farben, Fotos, Wordings, Icons, Buttons und viele Elemente mehr, die gemeinsam betrachtet einen klaren, einheitlichen Look and Feel definierten. Dabei legten wir bewusst in verschiedenen Versionen mal mehr Gewicht auf Joy, mal mehr Gewicht auf Knowledge und konnten so in kurzer Zeit, gemeinsam mit Carly konkretisieren, wohin die visuelle Reise geht.
Branding
Aus den Moodboards konnten wir gemeinsam in kurzer Zeit fest machen, wie wir künftig bestehende und potentielle Carly-Kunden visuell abholen möchten – mit Ecken und Kanten, dreckigen Händen aber mit smarter Technik, die wirklich weiterhilft. Dabei haben wir agenturseitig folgende Elemente definiert und gestaltet:
Mit diesen Elementen haben wir es geschafft, den gewünschten Look and Feel zu definieren – dabei ist Carly ein höchst analytisches Unternehmen, weshalb eine Kundenumfrage schon sehr früh bemüht wurde, um zu prüfen, ob wir als Agentur auf dem richtigen Pfad sind. Die definierten Gestaltungselemente wurden in einem umfangreichen Brandguide für die interne Nutzung zusammengefasst.
Mobile-First Webdesign
Nun ging es der Webseite an den Kragen – das neue Webdesign soll intuitiver, informativer und sowohl bei UI als auch bei UX deutlich verbessert werden. Wir wollten weg von „toten“ Smartphones, hin zu einer emotionalen, direkten Kundenansprache. Dabei gestalteten wir die gesamte Webseite Mobile First. Also zuerst für die perfekte, mobile Darstellung, da hier auch der maßgebliche Anteil der Besucher:innen steckt. Die Gestaltung erfolgte programmseitig in Figma inkl. erstem Prototyping, Wireframes sowie Animationen in Adobe XD.
Als Ergebnis präsentieren wir nicht nur eine neu gestaltete Webseite, sondern zudem eine messbar besser performende Gesamtlösung für Carly, gleichwohl ein Uplift der Performance noch nicht Teil der Ziele von Carly war. Nutzer werden ansprechender Informiert und bekommen an den richtigen stellen Mehrwert vermittelt. Dabei umfasst unser Redesign nahezu alle Haupt- und Unterseiten der Page, wenngleich der Checkout-Prozess ebenfalls noch nicht überarbeitet und von pixelperfektion optimiert wurde.
Nach Freigabe des Designs bereiteten wir alle Elemente & Klassen sauber strukturiert für die hauseigenen Entwickler von Carly – pixelperfektion realisierte hierbei nicht das Frontend. Aktuell begleitet wir den Kunden mit detaillierten Feedbacks inkl. Screenshots (vorher/nachher) zu aktuellen Abweichungen der Designvorgaben und unterstützen auf dem Weg, hin zu einer perfekten Realisierung.
Webdesign für Desktopgeräte
Selbstverständlich haben wir das Webdesign auch für Desktop-Geräte adaptiert und optimiert. Hierbei verfolgten wir das Ziel, mit möglichst gleichen Elementen wie bei Mobil auszukommen – so haben wir es geschafft, auch bei Desktop z. B. mit den gleichen, vertikalen Fotos der mobilen Version auch bei der Desktop-Variante zu verwenden. Das sorgt für eine aufgeräumte Struktur im Backend und schlanke Ladezeiten.
Webdesign mit Widgetlogic in Figma
Carly wollte kein Webdesign, dass sich Unterseite für Unterseite spezifisch und individuell aufbaut – Carly wollte ein modulares Design, welches auf Widgets basiert. Mit diesen kann der jeweilige Seitenaufbau nun selbst individuell bestimmt und verändert werden – ganz nach den Needs von Carly. Hierbei könnt ihr die Widgets sehen – sowie auch pixelperfekte Bemaßung von unserem Designteam, als Vorlage & Hilfe für die IT.
Packaging, AppStore, Photos und more
Mit einem umfangreichen Redesign des Brandings kommen viele Anpassungen einher und so ziehen wir als letzten Step verschiedene Produkte/Elemente für Carly nach. So gestalteten wir z. B. den OBD-Stecker selbst neu, die Verpackung des Steckers oder aber auch den App-Store, in dem die APP erklärt und zum Download angeboten wird. Selbstverständlich haben wir hierbei beide Stores, also iOS sowie Google Play berücksichtigt.
Pixelperfektion hatte ebenfalls die Artdirektion bei der Motiverstellung für die Webseite – mit einem von uns definierten Shooting-Plan, Lookbook sowie Do’s and Dont’s konnten wir sowohl dem Fotografen, als auch den Models OnLocation das neue Branding und die Carly-DNA schnell vermitteln. So lief das Shooting in der nähe von München easy über die Bühne – die Reinzeichnung und Bildbearbeitung lag dann wieder bei Pixelperfektion, um den definierten Look 100%ig zu treffen.
Credits
Ein umfangreiches Projekt, auf das wir zufrieden zurückschauen! Danke auch an alle anderen, die bei diesem Projekt mitgewirkt haben!
Fotograf: John Unseld von Infine Edits
Models: Florian, Florian und Danny
Artdirektion: Pixelperfektion
Let’s talk
Du bist bereit für Neues und
planst ein Projekt zu starten?
