Bereits im September 2019 wurde ich als UX/UI-Designer eingestellt, um für Spot Educação zu arbeiten .

Das Projekt, mit dem ich beauftragt wurde, war ein B2B-Produkt, das sich an Schulen mit geringerem Budget richtete, die nach einer perfekten Lösung für ihre Ängste beim Englischlernen suchten. Das Hauptziel von Go Bilingual war es, diese Schulen mit einer freundlichen Anwendung anzusprechen, die sich an ihre Lehrer und Manager richtete und unser Fachwissen zum Thema Englischlernen zu geringen Kosten zur Verfügung stellte.

Das Konzept versprach viele Features. Aber was war es wirklich? Was waren unsere Benutzer, ihre Reisen? Wie viele Dinge könnten wir eigentlich in so kurzer Zeit entwickeln?

Hier werde ich unsere bisherige Reise beschreiben, alles, was wir bei der Entwicklung und Gestaltung des Produkts gelernt haben, und die Zukunft, die wir uns dafür vorstellen.

1. Entdeckung

Als ich anfing, für Spot Education zu arbeiten , sah es düster aus: Wir hatten eine Idee für das Konzept, aber es existierte noch nicht; Wir wussten nichts davon außer der Tatsache, dass es ein paar Funktionen haben musste, aber selbst das war kein reibungsloses Segeln. Der Weg war neblig und voller Unsicherheiten. Wir wussten nicht, wer unser Endbenutzer war; wir wussten nicht, ob viele dieser Features tatsächlich in unserem MVP realisierbar wären ; Wir wussten nicht einmal, ob das Produkt in einer völlig neuen Architektur geschrieben und von Grund auf neu erstellt werden würde, oder ob wir eine vorhandene aus einem bereits funktionierenden Produkt unserer Firma namens Edify klonen und von dort aus beginnen würden.

Herauszufinden, was unser Produkt war, war wirklich wichtig; Also heuerte unser Unternehmen externe Hilfe in Form von Grito.cc an .

Grito ist eine Agentur für digitales Design aus Rio de Janeiro, Brasilien. Ihr Fokus lag darauf, eine schöne, schlanke und agile Lösung für unsere Probleme zu liefern. Sie haben zusammen mit Lehrern und Professoren recherchiert und alles für unseren Design-Sprint vorbereitet . Sie würden uns auch 6 Bildschirme für Desktop- und mobile Anwendungen zur Verfügung stellen, basierend auf dieser Übung und unserem eigenen Design-Ethos und unserer eigenen Richtung.

Wir fingen bei Null an und begannen zu diskutieren, was unser Produkt sein müsste, was es haben sollte und was es nicht sein würde und was nicht. Wir entwarfen vier Personas, alle Lehrer, mit unterschiedlichem Hintergrund, Alter und sozialer Stellung. Das Wichtigste, was uns unsere Forschung und Empathieübung gezeigt hat, war, dass eines der Hauptprobleme der Lehrer darin bestand, dass sie das Bedürfnis nach mehr professioneller Unterstützung und auch nach mehr Kontakt mit wichtigen, relevanten Inhalten hatten, die auf ihre Unterrichtsbedürfnisse ausgerichtet waren. Sie wollten sich beruflich weiterentwickeln.

Intern verspürten wir das Bedürfnis, auch über die Probleme von Schulleitern und -verwaltern nachzudenken; Also haben wir unsere eigenen Nachforschungen angestellt und uns unsere eigene Person ausgedacht, jemanden, der unsere Anwendung intern verwendet, Mitarbeiter verwaltet, Bestellungen bucht und vieles mehr.

Im Grunde hatten wir also zwei Produkte in einem: ein Extranet, das von Administratoren und Managern genutzt wird; und ein Lehrerportal, das von Lehrern und schließlich von Schülern verwendet wird. Also machten wir uns daran, beides zu entwerfen und zu entwickeln.

2. Definieren

Wie würden wir also unsere Anwendungen entwickeln und gestalten? Welche Technik würde zum Einsatz kommen? Wie sollte das Design aussehen? Wie würden wir nach dem Design-Sprint, unserer eigenen Forschung und unseren Geschäftsanforderungen unsere Produkte definieren?

Da das Produkt bereits verkauft war, begannen wir zu diskutieren, ob es rentabel wäre, eine komplett neue Architektur von Grund auf neu zu entwerfen oder einfach eine vorhandene zu klonen, die bereits von einem der Produkte des Unternehmens, Edify , verwendet wird . Die Entscheidungsträger entschieden sich für Letzteres, da wir einen engen Zeitplan hatten und das Extranet so schnell wie möglich liefern mussten.

Gleichzeitig fingen wir auch an zu definieren, wie das Teacher's Portal aussehen würde; eine Web-Responsive-Lösung für unsere Lehrer, bei der sie professionelle Anleitung und Mentoring von unseren Pädagogen erhalten können.

Im Grunde genommen haben uns all diese vernünftigen Entscheidungen und Definitionen ermöglicht, das Produkt in beide Richtungen zu entwickeln und zu gestalten, und uns auch erlaubt, unsere Sprints und Produktzyklen zu starten. Während ich dafür verantwortlich war, das Produkt als Ganzes zu entwerfen und das große Ganze zu sehen, wurden die Entwickler damit beauftragt, von Grund auf nach unseren Entscheidungen zu bauen.

3. Entwerfen

Schnall dich an, denn das wird lang.

Sobald wir grünes Licht bekamen, um mit der Entwicklung und dem Design des Produkts zu beginnen, erstellte ich eine Figma -Datei namens „ Go Bilingual Design System “. Anfangs hatten wir nicht viel zu tun; Was wäre das Konzept unseres Designsystems? Was waren unsere Ziele bei der Entwicklung dieses Systems?

In Anlehnung an Atomic Design entschied ich mich, mit unseren Icons zu beginnen , da sie das kleinste Element sind, das unser Produkt benötigen würde. Nach einiger Recherche stieß ich auf ein hervorragendes Designsystem von den Leuten bei Akveo , Eva . Die Symbole aus diesem Designsystem hatten die Rundheit und Lesbarkeit, die wir suchten, also passten sie perfekt zusammen. Der einzige Unterschied besteht jedoch darin, dass wir eine Grundregel für die Verwendung der Symbole aufgestellt haben; Anstatt zwei Sätze von Symbolen zu haben, haben wir uns entschieden, einen Satz verfügbar zu machen und den anderen Satz als Interaktionssatz zu verwenden, was bedeutet, dass dem Benutzer immer dann, wenn Sie mit einem Symbol auf eine bestimmte Weise interagieren, ein mögliches zweites Symbol angezeigt wird.

Nachdem wir uns entschieden hatten, was unsere Icons sein würden – und da es nicht notwendig wäre, sie von Grund auf neu zu entwerfen – wäre der nächste Schritt, sich unsere Marke, ihr Logo, ihre Werte und die visuelle Identität anzusehen, da Design Systems dies normalerweise tun ein anderer, offenerer und flüssigerer Ansatz für Markenentwicklung und -design.

Die visuelle Identität von Go Bilingual wurde zuerst von den Leuten bei Quintal entworfen . Das Handbuch, das sie uns zur Verfügung stellten, enthielt das Logo und einige Anwendungen, die Farbpalette mit primären und sekundären Optionen und Typografie, mit Panton als primärer Option und Open Sans als sekundärer Option. Die Geschäftsteams waren jedoch der Meinung, dass ihr Ansatz zu „fröhlich“, „jugendlich“ und „bunt“ sei, und das war nicht unbedingt unser Ziel, da die Hauptnutzer unseres Produkts Schulleiter und Lehrer sein würden. Wir brauchten eine nüchternere visuelle Identität, eine, in der sich unsere Benutzer mehr zu Hause fühlen und das Produkt über einen längeren Zeitraum verwenden können. Wir dachten auch, dass ein digitales Produkt in Bezug auf seine Systeme flexibler und flüssiger sein muss, und seine visuelle Identität sollte dies widerspiegeln.

Wir haben uns entschieden, die Farben des Projekts zu dehnen; nur drei Hauptfarbtöne mögen für ein großartiges Druckdesignprojekt gut sein, aber es reicht bei weitem nicht aus, wenn es um die Nuancen geht, die ein digitales Projekt umfassen muss, zumindest meiner Erfahrung nach. Also haben wir jede einzelne der Hauptfarben genommen und darauf basierend drei verschiedene Farbtöne erstellt und auch die Anzahl der Haupt- und Nebentöne erhöht. Eine weitere von uns definierte Regel war, dass beliebig viele Farbverläufe zwischen zwei Farben aus unserem Set möglich sind, wodurch unser Design flüssig und äußerst vielseitig wird.

Unser neues Logo wurde intern entwickelt; Es war nur eine Neuinterpretation des alten, wobei wir uns mehr auf Farbverläufe und Umrisse konzentrierten und so unserer Marke ein moderneres Erscheinungsbild verliehen. Wir haben auch das Konzept hinter dem gesamten Designsystem verankert , als wir uns unser Logo angesehen haben, und das war die Geburtsstunde der „Lattice“ -Idee. Da alle unsere Systeme einfach zu bauen und gut zu verwalten sein mussten, dachten wir an ein Gitter, ein offenes Gitter, auf dem Ideen platziert, entwickelt und gestaltet werden können, frei und sich ständig weiterentwickeln.

Wir glauben wirklich an fließende Designs und Systeme und sich ständig verändernde Umgebungen.

Mit unserem Designsystem-Themensatz begannen wir, unsere Komponenten und jedes einzelne Bit zu entwerfen, das in unseren digitalen Anwendungen vorhanden sein würde. Wir nahmen das, was wir aus unserem Design-Sprint gelernt hatten, und alles, was bisher produziert wurde, und begannen mit der Produktion, wobei wir versuchten, kohärent zu sein und die festgelegten Richtlinien zu umgehen. Ich glaube, dass es bei Produktdesign und -entwicklung ausschließlich um Zusammenhalt und Thematisierung geht; etwas, das ich aus meiner Zeit als Game Designer und Art Director mitgebracht habe, das bis heute gilt, und ich bin froh, dass wir als Unternehmen die gleichen Prämissen verfolgen.

4. Lieferung

Nach einem langen Design- und Entwicklungszyklus war es also an der Zeit, unser Produkt zu liefern. Was genau sind die Funktionalitäten, die in unserem Produkt gelandet sind, und wie hat es funktioniert?

Unser Produkt wurde mit Ruby als Back-End und React als Front-End entwickelt, und unsere Entwickler haben die vom Designsystem festgelegten Richtlinien verwendet, um unser Lehrerportal zu implementieren .

Unser MVP hätte eine Zielseite , die die Werte und die Mission unseres Produkts und das, was wir zu erreichen versuchen, darstellen würde; eine Trendseite , auf der der Benutzer Inhalte sehen, ansehen, lesen und anhören kann, die ausschließlich auf Lehrer, Erzieher und Professoren zugeschnitten sind; eine Ressourcenseite , auf der Sie die Gesamtheit der von unseren Pädagogen erstellten Inhalte finden würden; eine Entwicklungspfad -Seite, auf der Lehrer lernen könnten, wie sie durch die Teilnahme an unseren Spezialkursen noch bessere Fachleute werden können; und eine Seite „Sprechen Sie mit uns “, auf der dieselben Benutzer uns kontaktieren und ihre Fragen und Ängste lösen können.

Wir haben eine Weile gebraucht, um das gesamte Produkt zu entwickeln, da es viele Funktionen hatte, aber am Ende hat alles gut geklappt und hier ist es; Go Bilingual's Teacher's Portal in seiner vollen Pracht.

Die geschäftlichen Anforderungen ändern sich ständig und Go Bilingual wurde eingestellt, als Spot Educação zu Edify Education wurde . Hier wurde jedoch die ganze Arbeit und Mühe gezeigt, die in sie gesteckt wurde, und wir sind wirklich stolz auf das, was wir geliefert haben. Unser MVP war wirklich schwierig zu produzieren und wir hatten unzählige Herausforderungen auf dem Weg, aber ich denke, so sind Produktdesign und -entwicklung, und es hat ziemlich viel Spaß gemacht und beruflich fesselnd. Darüber hinaus bildet dieses Projekt die Grundlage für viele Produkte im Unternehmen.

Die Hauptwebsite von Go Bilingual war http://www.gobilingual.com.br/ , aber sie ist derzeit offline, da das Produkt nicht mehr existiert. Sie können weiterhin hier auf das Lehrerportal zugreifen: http://teachersportal.gobilingual.com.br/ . Danke fürs Lesen!