Prism: eine Visual-Bookmarking-App, die Pinterest den Rang abläuft

Wenn Sie im Internet surfen und dabei viele fantastische Ressourcen entdecken, die Sie sich für später merken möchten, fällt Ihnen möglicherweise auf, dass Sie über kein effizientes Bookmarking-Tool zum Speichern von Links verfügen. Unter Umständen gibt es kein Interface, über das Sie alle Ihre gespeicherten Websites schnell und einfach einsehen können. Lesezeichenlisten bestehen oft aus vagen, kaum lesbaren Links und mit Pinterest können Sie nicht mal eben auf eine Website verweisen. Genau hier kommt Prism ins Spiel: Es handelt sich dabei um eine Webanwendung und Visual-Bookmarking-Erweiterung für Google Chrome, mit der Sie alle Ihre Lieblingsseiten an einem einzigen Ort verwalten und durchsuchen können. Es werden Screenshots der Websites aufgenommen, die sich automatisch aktualisieren, damit Sie stets die neuesten Inhalte sehen. Sie können sich jedoch auch für eine statische Anzeige entscheiden, um einen bestimmten Zeitpunkt festzuhalten.

Prism ist ein designorientiertes Remote-Start-up mit Sitz in der Bay Area von Kalifornien, das von einer Frau gegründet wurde. Das Tool konzentriert sich darauf, die Surferfahrung im Web visueller zu gestalten. Prism wurde von Anna Western gegründet, die sowohl als CEO als auch Designerin tätig ist und über mehr als 10 Jahre Designerfahrung verfügt. Sie hat in dieser Zeit mit Studios, Start-ups und Fortune-500-Unternehmen zusammengearbeitet. Zuvor war Anna als Produktdesignerin bei Facebook tätig, wo sie interne Tools entwarf. Zudem ist sie Mitbegründerin eines Start-ups, das auf der YC W19 gelauncht wurde.

Gemeinsam mit Anna sowie ihrem Team haben unsere erfahrenen Backend- und Frontend-Ingenieure Prism von Grund auf neu entwickelt und Annas Idee in eine praktische, leistungsfähige Lösung für Benutzer auf der ganzen Welt verwandelt.

Die Herausforderung

Wir wurden unserer Kundin Anna Western von ihrem Kollegen David Weekly, den wir bereits aus unserer Zusammenarbeit im Rahmen der Medizin-App Medcorder kannten, empfohlen. Sie wollte sich mit dem Ingenieurteam zusammentun, um ein MVP der von ihr designten Visual-Bookmarking-App und -Browsererweiterung Prism zu erstellen.

Die Kundin war auf der Suche nach einem kompetenten technischen Partner für ihr Unternehmen. Das Produkt, das sie entwickeln wollte — eine Visual-Bookmarking-App und ein entsprechendes Plug-in zur Verwaltung von Browser-Lesezeichen —, sollte dazu dienen, Websites zu sammeln und zu kategorisieren. Anna wollte eine Funktion implementieren, die einen Screenshot der Website anfertigt und auf einem Board speichert, ähnlich wie bei Pinterest. Die App sollte jedoch einen wesentlichen Unterschied zur genannten Plattform aufweisen: Auf Pinterest heften Sie ein einzelnes Bild an, das sich irgendwo auf der Seite befindet und auf diese verweist. Prism ermöglicht es Ihnen hingegen, einen Screenshot der gesamten Seite aufzunehmen.

So sind Sie zum Beispiel in der Lage, eine Liste aller Websites zu erstellen, die Sie erneut besuchen möchten. Sie verfügen über Screenshots der jeweiligen Websites, die Sie in einem Board sammeln können. Darüber hinaus werden die Screenshots beim erneuten Aufruf aktualisiert, sodass Sie stets die aktuellste Version der von Ihnen gespeicherten Website sehen. Sie können die App über eine installierte Browsererweiterung verwenden und Ihre Boards in Ihrem persönlichen Prism-Konto organisieren, anzeigen und ändern.

Anna trat mit einem fertigen Designkonzept für eine Visual-Bookmarking-App und -Browsererweiterung sowie Mock-ups und einer Vision für den Funktionsumfang der Anwendung an Evrone heran. Unsere Aufgabe bestand darin, gründliche Recherchen zu unternehmen, Beratungsgespräche zu führen, die technische Lösung zu erarbeiten und einen Vorschlag für die Architektur des Projekts zu unterbreiten.

Die Lösung

Evrone wurde zum technischen Partner des Prism-Teams gewählt, um dieses bei der Entwicklung eines Lesezeichenmanagers zu unterstützen. Wir schätzten den Projektumfang ab, bewerteten die Risiken, gaben den Zeitrahmen für die Umsetzung vor und boten Beratung zu allen Fragen an, die Anna Sorge bereiteten.

Unsere Ingenieure haben eine webbasierte App entwickelt, die als Browsererweiterung für Chrome zur Verfügung steht. Die Chrome-Erweiterung ermöglicht es Benutzern, Lesezeichen für Webseiten anzulegen. In Anlehnung an die von Anna zur Verfügung gestellten Designs speichert das Produkt Screenshots der mit Lesezeichen versehenen Seiten auf einem visuellen Board, das als Referenz für den Benutzer dient und es diesem erlaubt, die Screenshots in Kategorien zu organisieren. Auf diese Weise wird dem Benutzer eine visuelle Anlaufstelle für Lesezeichen geboten, die er verfolgen möchte. Usern ist es zudem möglich, ihre vorhandenen Chrome-Lesezeichen zu importieren. Ein Benutzer kann andere User (oder solche, die es noch werden wollen) zu seinem Board einladen, woraufhin diese Mitglieder desselben werden.

Wir haben das Projekt im Mai 2019 begonnen und das Produkt im September 2019 auf den Markt gebracht. Dank der effizienten Zusammenarbeit mit Anna und dem Prism-Team konnten wir das MVP in nur dreieinhalb Monaten veröffentlichen und hatten noch etwas zusätzliche Zeit für die Behebung von Fehlern sowie die Verbesserung der Ladezeit. Unser React-basiertes Frontend, auf dem wir alle Screens realisierten und bei dem wir uns an jedes Detail der Designspezifikationen hielten, konnte den Erwartungen der Kundin vollends gerecht werden. Die Skalierung aller Gitterseiten ist flexibel, was bedeutet, dass das Gitter sich genau wie Pinterest an die Seite selbst anpasst.

Zur Anfertigung der Website-Screenshots haben wir im Backend Python und Chrome im Headless-Modus verwendet. Der Browser rendert die Website, wir exportieren das Bild derselben und speichern es in DigitalOcean Spaces. Außerdem kam Redis zur Verteilung der Rendering-Aufgaben zum Einsatz. Der Projektstack umfasst Kubernetes, GraphQL und CircleCI für fortlaufende Integration und Bereitstellung. Rollbar und Sentry wurden zur Fehlerverfolgung und -behebung in Echtzeit genutzt. Weiterhin haben wir der Kundin den Vorschlag unterbreitet, für die E-Mail-Kampagnen den Cloud-basierten E-Mail-Service Mailgun zu verwenden. Das Projektteam bestand aus einem Projektmanager, einem Frontend-Ingenieur und einem Backend-Ingenieur. Unser Projektmanager kümmerte sich um die gesamte Kommunikation zwischen der Kundin und dem Ingenieurteam, was die Angelegenheit für das Prism-Team vereinfachte.

Das Fazit

Es war uns eine Freude, mit dem Prism-Team zusammenarbeiten zu dürfen und uns der Herausforderung zu stellen, eine Pinterest-ähnliche Web-App sowie eine individuelle Browsererweiterung zu entwickeln, die eine bessere Anpassbarkeit und Flexibilität bietet, um den Bedürfnissen der Benutzer gerecht zu werden. Wir sind immer auf der Suche nach innovativen neuen Projekten, an denen wir mitwirken können — ganz gleich, ob es sich um die Erstellung einer brandneuen Anwendung von Grund auf oder um die Entwicklung eines Cross-Browser-Plug-ins oder einer entsprechenden Erweiterung handelt. Wenn Sie eine Idee für ein Produkt haben und Unterstützung bei der Entwicklung benötigen, teilen Sie uns einfach mit, wie wir Sie am besten erreichen können. Wir setzen uns im Anschluss schnellstmöglich mit Ihnen in Verbindung, um Ihr Projekt zu besprechen und zu ermitteln, wie wir Ihnen helfen können.