Redesigning lemon.markets


blog photo
Veröffentlicht von Marius Sprenger am 1. Juli 2021
Insights


Anfang März dieses Jahres haben wir uns entschieden,lemon.markets von Grund auf neu aufzubauen. Dafür haben wir eine komplett  neue API-Struktur entwickelt und anschließend unsere “Closed Beta” gelauncht (Du kannst Dich hier für die Warteliste anmelden). Neben dieser Produktentscheidung war ein weiterer wichtiger Schritt für uns, lemon.markets ein neues Design zu geben. In diesem Blog Post werden wir Euch im Detail erzählen, wie der Design Prozess abgelaufen ist, wofür unsere neuen Design Elemente stehen und was unser neues Design ausdrücken soll.

Fang erstmal an und dann iteriere

Für uns ging und geht es immer darum, zunächst einmal ein erstes Produkt zu bauen, egal wie unvollkommen/unfertig es am Anfang sein mag, uns schnellstmöglich (externes) Feedback zu holen und das dann so schnell wie möglich zu integrieren. Im Bezug auf unser Produkt bedeutet dies, dass wir eine erste Version entwickelt haben und nun versuchen, die gewünschten Funktionen on-the-go zu implementieren. Bisher hat uns dieser Ansatz wirklich geholfen, etwas zu kreieren, von dem wir glauben, dass es ein tatsächliches Problem unserer Nutzer löst (siehe zum Beispiel diesen Blogbeitrag über Spaces, eine Funktion, die direkt aus dem Feedback der Community entstanden ist). Wir sind keine Firma (und werden auch nie eine sein), die in einem Büro sitzt und Funktionen entwickelt, die wir für sinnvoll halten, ohne vorher unsere Nutzer zu befragen. In einem Startup in der Anfangsphase hat man immer tausend verschiedene Dinge um die Ohren, und es ist schwer, alles gleichzeitig anzugehen. Bei unserem ersten Prototypen, den wir Ende 2020 gelauncht haben, galt das besonders für unser Design. Wir wussten, dass wir etwas brauchten, aber wir hatten nicht die Zeit oder Ressourcen, um dieses Thema so anzugehen, wie wir es wollten. Eine lange Freitagnacht, ein paar WhatsApp-Nachrichten hin und her und voilà: unser erstes Logo und ein rudimentäres Farbschema waren geboren. Und obwohl das Logo seinen Zweck für unseren Prototyp erfüllte und wir immer noch stolz unsere lemon.markets-Socken mit dem Logo tragen, wussten wir auch, dass wir es irgendwann durch ein neues ersetzen würden. Und dieser Zeitpunkt ist jetzt.

Wir nennen unser altes Logo liebevoll "Crossaint Lemon" (reimt sich)

lemon markets merch

Noch immer stolz auf unser erstes Merch

Die Dinge richtig anpacken

Auch wenn wir ein API-first-Unternehmen sind, glauben wir fest an den Nutzen von großartigem Design. Wir sind bestrebt, eine perfektes Nutzererlebnis mit unserer API an allen visuellen Touchpoints zu bieten. Wir möchten, dass es Spaß macht und visuell ansprechend ist, unser Produkt zu nutzen. Also haben wir beschlossen, das Thema Design ganzheitlich anzugehen, und haben nach einer Design Agentur gesucht, die unser Rebranding koordinieren würde. Techunternehmen wie Stripe, Strapi oder Typeform haben uns dabei als Inspiration gedient.

Nach vielen E-Mails und "Kennenlern-Treffen" mit Agenturen, von denen uns einige mit beeindruckendem Branchenwissen überzeugten (und unterhaltsamen und aufschlussreichen Ansätzen zu unserem Rebranding), haben wir uns für tonik entschieden, eine Designagentur mit Sitz in Poznań, Polen. Uns gefiel besonders ihr praxisnaher, kooperativer Prozess, der einen kontinuierlichen Austausch mit Feedbackschleifen versprach. Außerdem arbeitet tonik regelmäßig mit Start-ups in der Frühphase zusammen, von denen viele aus dem berühmten Y Combinator stammen: Das war genau die Art von Expertise, die wir uns vorgestellt haben.

Was waren die Eckpfeiler für unser Rebranding?

Schon vorher war uns klar, dass unser Rebranding ein großes Projekt werden würde, das mehrere Aspekte umfasst:

  • Entwicklung einer neuen Corporate Identity (CI) einschließlich Logo, Farbschema und allgemeinem Marken Leitfaden
  • Spezifische Designs für unsere neue Website, Dokumentation und Web-App
  • Individuelle (animierte) Illustrationen
  • Wiederverwendbare Vorlagen für unsere Social Media Touchpoints

Wir hatten eine grobe Vorstellung, wie die Dinge aussehen sollten, und waren froh, dass wir einen Partner an unserer Seite hatten, der wusste, wie man effizient arbeitet, Prioritäten setzt und unsere Ideen integriert und umsetzt. Anfangs mussten wir uns alle ein wenig eingrooven, bis wir einen passenden Kommunikationsweg gefunden hatten, aber dann ging auf einmal alles recht schnell.

Die Dinge Schritt für Schritt angehen

Es war sinnvoll, als erstes das Thema CI als Grundlage für alle weiteren Themen anzugehen. Obwohl es in den letzten Jahren einige Fortschritte in der Branche gegeben hat, haben wir festgestellt, dass der Aktienmarkt für manche Menschen immer noch ziemlich beängstigend ist. Außerdem scheint alles, was mit Technik zu tun hat, immer noch eine Art Blackbox zu sein, die viele Menschen als eine Art außerirdische Fähigkeit ansehen, die unmöglich zu beherrschen ist (sucht einfach mal nach "Coding" in Pixabay und ihr werdet sehen, was wir meinen). Aus gestalterischer Sicht wollten wir uns von diesen "zwielichtigen, geheimnisvollen, allein im Keller"-Vorurteilen lösen und lemon.markets so designen, wie wir es sehen:

“Als eine moderne, transparente und zuverlässige Brokerage-Infrastruktur, die jedem:r die Freiheit gibt, sein:ihr eigenes Handelsprodukt am Aktienmarkt zu bauen.”

Unserer Meinung nach hat tonik bei der Umsetzung unserer Vision in für unser Design großartige Arbeit geleistet. Wir haben einfach angefangen (zumindest dachten wir das): Mit einem neuen Logo. Am Ende war das Logo wahrscheinlich das insgesamt nervenaufreibendste Thema, das uns einige Zeit gekostet hat, bis wir das Kapitel abschließen konnten. Jetzt da es fertig ist, lieben wir unser neues Logo, weil es mit freundlichen Farben arbeitet, einen modernen, aber dennoch besonderen und kantigen Look hat und perfekt transportiert, wie wir über uns als Unternehmen denken.

Unser neues Logo

Während der Zusammenarbeit mit tonik haben wir viel Zeit in Figma-Dateien verbracht. Als besonders praktisch haben wir empfunden, dass Figma es einem ermöglicht, Feedback zu bestimmten Elementen zu geben und so eine nahtlose Zusammenarbeit mit den Designern möglich ist. Unten siehst Du einen Screenshot aus unserem “Brand Book”, das als Leitfaden für alles dient, was bei lemon.markets mit Design zu tun hat, sowie unsere einzigartigen lemon.markets-Formen, die an allen unseren Touchpoints verwendet werden. Ein großes Lob an Jacek, der sich durch all unsere Kommentare gewühlt und sie in etwas übersetzt hat, das wir lieben.

Viele Figma Dateien, in deisem Fall unser Brand Book.

lemon markets shapes

Unsere wiederverwendbaren "lemon.markets Formen"

Viele Seitendesigns - viele Loom-Videos

Der nächste logische Schritt bestand darin, das “Brand Book” und die lemon.markets Formen zu verwenden und spezifische Designs für unsere verschiedenen Touchpoints zu entwickeln: Unsere Website, das Dashboard und unsere API-Dokumentation. Der gesamte Prozess war immer iterativ, neue Seitendesigns wurden von dem fantastischen Damian präsentiert, sobald sie fertig waren, fast immer begleitet von einem erklärenden Loom-Video (Loom ist übrigens sehr zu empfehlen, schnelle Videos zur Absprache von Änderungen). Wie bei unserer Corporate Identity war es uns wichtig, Transparenz und Sicherheit zu vermitteln, aber auch Innovationskraft und dass wir als modernes Unternehmen die Dinge anders machen wollen.

lemon markets website design

Figma Design für Website

Figma Design für Dokumentation der API

Rückblickend hat diese Zeit wirklich Spaß gemacht, weil es so viele sichtbare Fortschritte gab: Damian versorgte uns mit neuen Entwürfen, wir haben dann intern jede kleine Ecke und Farbe überprüft, unsere Gedanken zurück an tonik kommuniziert, die unsere Änderungen dann in Rekordgeschwindigkeit umgesetzt haben. Danach habenwir die fertigen Entwürfe auf unserer Seite implementiert, um sie live und in Farbe zu sehen. Ein großes Dankeschön an alle, die in dieser Phase beteiligt waren: Ihr wart großartig! Ihr könnt die endgültige Version der Website hier sehen und werdet das Dashboard und die Dokumentation als Teil unseres Onboarding-Prozesses erleben, sobald ihr Euch für unsere Warteliste angemeldet habt (was ihr hier machen solltet :).

das komplizierteste Design-Projekt - das lemon.markets Dashboard

Bewegung in die Website bringen

Wenn ihr Euch die Figma Entwürfe anschaut, werdet ihr hier und da ein paar leere Stellen bemerken: Dort wollen wir Illustrationen hinzufügen. Von Anfang an war es uns wichtig, dass das lemon.markets Design etwas Besonderes und Einzigartiges ist. Deshalb war es für uns keine Option, lizenzfreie, kostenlose Illustrationen zu verwenden. Stattdessen haben wir uns entschieden, nur maßgeschneiderte Illustrationen zu nutzen, was sowohl für tonik als auch für uns wesentlich mehr Arbeit bedeutet hat, aber letztendlich zu einem deutlich persönlicheren Ergebnis geführt hat. Jetzt sind wir jedes Mal happy, wenn wir unsere unsere Website besuchen und die Illustrationen in Action sehen. Einige dieser Illustrationen sind sogar animiert, in vielen Fällen, um eine Art von Fluss oder Zugehörigkeit zu visualisieren, aber manchmal auch einfach, weil wir es lustig fanden :D

Eigens angefertigte Illustrationen für Website and Dokumentation. Gehe auf lemon.markets um sie in Motion zu sehen ;)

Wichtige Erkenntnisse aus dem Projekt

Für uns alle bei lemon.markets war unser Redesign das erste größere Projekt mit einer professionellen Designagentur, und wir haben daraus eine Reihe von wichtigen Erkenntnissen gewonnen.

  1. Findet einen Kommunikationskanal, der für Euch funktioniert. Wir haben einige Zeit gebraucht, um herauszufinden, wie wir am besten kommunizieren können. Am Ende war es eine Kombination aus einem gemeinsamen Slack-Channel, in dem alle Änderungen transparent einsehbar waren, Figma-Dateien mit der Möglichkeit, bestimmte Elemente direkt zu kommentieren, Loom-Videos, in denen die Änderungen aus erster Hand erklärt wurden, und einem wöchentlichen Treffen mit allen relevanten Stakeholdern. Auch wenn dieser Ansatz für andere Teams vielleicht nicht der richtige ist, empfehlen wir Euch dennoch, wirklich darüber nachzudenken, wie ihr kommunizieren wollt, und Euch dann darauf zu konzentrieren, Eure Präferenzen in die Tat umzusetzen. Ein funktionierender Informationsfluss war unserer Meinung nach der Schlüssel zum Erfolg dieses Projekts.
  2. Konzentriert Euch auf das richtige Feedback: Von Anfang an haben wir versucht, unser Feedback zu bestimmten Designentwürfen so detailliert wie möglich zu gestalten. Das war oft zeitaufwändig, da wir manchmal 2-3 interne Feedbackschleifen gedreht haben, bevor wir unser Feedback an tonik zurückgaben. Wir denken jedoch, dass sich dieser Aufwand gelohnt hat, da unsere Anweisungen und Änderungswünsche klar waren und tonik in der Lage war, sie schnell und ohne viele Rückfragen umzusetzen.
  3. Raum für Kreativität lassen: Wir hatten zwar unsere eigenen Vorstellungen davon, wie unser Design aussehen sollte, wussten aber auch, dass es wichtig war, ein wenig davon abzurücken und den erfahrenen Designern die Möglichkeit zu geben, etwas Tolles zu entwerfen. Unser Ansatz bestand darin, zu Beginn eines bestimmten Abschnitts ein paar Stichworte oder Ideen zu nennen und dann den Designer kreativ werden zu lassen. Wenn das Design in eine völlig falsche Richtung ging, konnten wir in der ersten Feedback-Runde leicht reagieren und das es in eine Richtung lenken, die unseren Stil besser widerspiegelt. Nach einer Weile war das aber nicht mehr nötig, da tonik verstanden hatte, was genau wir denn nun wollten. Generell war die erste Iterationsrunde für ein neues Design immer die wichtigste für uns, in der wir so detailliert wie möglich Feedback gegeben haben. Der Ansatz, die Kreativität des Designers nicht durch zu detaillierte Anweisungen einzuschränken, hat für uns rückblickend sehr gut funktioniert.

Fortsetzung folgt...

Letzte Woche haben wir lemon.markets gerelauncht, was bedeutet, dass die Zusammenarbeit mit tonik bei diesem großen Projekt erfolgreich abgeschlossen ist. Es gibt jedoch weitere Projekte, die kommen werden. Intern arbeiten wir bereits an einer App, zusätzlichen Funktionen für unser Dashboard, Social-Media-Kampagnen, YouTube-Videos, Blogbeiträgen, [...]. Unsere Arbeit mit tonik ist also nicht beendet, sondern wird auch in der Zukunft weitergehen, worüber wir sehr froh sind.

Wir sind gespannt auf Euer Feedback zu unserem neuen Design. Schreibt uns eine E-Mail an [email protected] oder tretet unserer Slack-Community bei. Und natürlich: Tragt Euch in unsere Warteliste ein, falls ihr das noch nicht getan habt.

Wir sehen uns auf lemon.markets 🍋.

Marius

Das könnte Dich auch interessieren

Richte Deinen eigenen Telegram-Bot für den Handel mit der lemon.markets API ein (Teil 1 von 2)

blog photo

Hallo! Ich bin Joanne aus dem lemon.markets Team. Ich habe in den letzten Wochen an einem Use-Case für unser Produkt gearbeitet und freue mich sehr, das Ergebnis hier mit Euch zu teilen! Es gibt hunderte Use-Cases für unser Produkt, von automatisierten Handelsstrategien bis hin zu Dashboards, die Dein Portfolio visualisieren. Heute zeige ich Dir, wie Du die lemon.markets API mit der Telegram API verbinden kannst. Warum? Damit Du einen personalisierten Butler - ähm, Bot - hast, der mit ein paar sehr einfachen Nachrichten Orders für dich platzieren kann.

Erstelle dein eigenes lemon.markets Dashboard mit Flutter

blog photo

Hallo zusammen! Mein Name ist Marius und ich bin Teil von lemon.markets, einem early-stage Startup aus dem Herzen Berlins. Wir arbeiten an einer Infrastruktur, mit der Du Deine eigene Trading Experience an der Börse bauen kannst. In diesem Blogbeitrag führe ich Dich durch ein Projekt unseres Community-Mitglieds Melanie. Dafür schauen wir uns an, wie man mit Flutter ein mobil-optimiertes Web Dashboard bauen kann. Hört sich das an als wäre es was für Dich? Dann lass uns keine Zeit verschwenden und direkt loslegen.

Anleitung für eine Mean Reversion Strategie mit der lemon.markets API & Hosting in der Cloud

blog photo

In diesem Beitrag möchte ich Dir zeigen, wie Du die lemon.markets API nutzen kannst, um eine der bekanntesten Handelsstrategien zu bauen: Die Mean Reversion Strategie. Außerdem zeige ich Dir, wie Du Deine Strategie mit Heroku in der Cloud hosten kannst, damit Dein Skript weiterläuft, auch wenn Dein Laptop ausgeschaltet ist.

Tiefer eintauchen

Finde weitere Ressourcen für einen einfachen Einstieg

In unserer Dokumentation erfahrt Ihr mehr über unsere API-Struktur, die verschiedenen Endpunkte und spezifische Anwendungsfälle.

Austauschen

Tritt der lemon.markets Community bei

Tritt unserem Slack-Channel bei, um Dich aktiv an unserer Community zu beteiligen, Fragen an andere Nutzer:innen zu stellen und immer auf dem Laufenden zu bleiben.

Team unterstützen

Lust lemon.markets mit uns zu bauen?

Wir sind immer auf der Suche nach großartigen Ergänzungen für unser Team, die uns beim Aufbau einer Brokerage Infrastruktur für das 21. Jahrhundert helfen.

Products
Pricing
For Developers
SlackGithubBlog
© lemon.markets 2021Privacy PolicyImprint
All systems normal