Designprozess von Fireaware - Hacken für Mädchen aus der Menschheit in Tech Vancouver

Feuergeschirr

Am 4. und 5. Mai 2019 fand in Vancouver ein Hackathon statt. Ich studiere derzeit UI / UX-Design an der RED Academy und nahm als Designer mit einem meiner Freunde an der Veranstaltung teil.

Es wurde zu einer meiner ehrwürdigsten Erfahrungen, als wir den Preis „Most Social Impact“ gewannen! Wir haben einen App-Prototyp namens „Fireaware“ erstellt. Diese App bietet eine breite Öffentlichkeit für Brandvorhersage- und Alarmfunktionen. Ich beschreibe den Prozess der Erstellung des Prototyps, insbesondere in Bezug auf das Design. Ich hoffe, es wird für zukünftige Hackathon-Kandidaten hilfreich sein!

Zweck des Hackathons

Der Klimawandel ist ein großes Problem auf der Erde. Zum Beispiel,

• Die Temperatur ist in den letzten 100 Jahren rapide gestiegen und hat die in den letzten 6000 Jahren durchgeführte Abkühlung aufgehoben. • Die natürlichen Zyklen können nur 40% dessen ausgleichen, was in die Atmosphäre gelangt ist

Das Thema des Hackathons forderte uns daher auf, Ideen zur Nachhaltigkeit innerhalb gesunder Grenzen zu entwickeln.

Zeitplan

4. Mai 11: 30–20: 30 Uhr DevelopmentMay 5th 10: 00–15: 00 Uhr Development15: 00–17: 30 Uhr Presentation (2-minütige Präsentation + 1 Minute Q & A / pro Team)

Wir hatten fast 14 Stunden Entwicklungszeit!

Teammitglieder

4 Mitglieder in einem Team. Unser Team besteht aus 2 Designern und 2 Entwicklern.

Thema

Die Organisatoren stellten uns 5 Szenarien zur Auswahl. Unser Team hat sich für Folgendes entschieden, weil es für uns einfacher war, sich zu konzentrieren:

2018 war die schlimmste Brandsaison, die jemals als BC verzeichnet wurde. verlängert den Ausnahmezustand und erreicht den Rekord von nur einem Jahr zuvor im Jahr 2017. Mehr als 13.000 Quadratkilometer der Provinz waren 2018 verbrannt und es wird geschätzt, dass sich der Schaden 2019 verdoppelt Waldbrände, Überschwemmungen und andere Naturkatastrophen.

Konzept Brainstorming

Unser Team hat sofort an gefährliche Situationen gedacht, die bei einem Brand auftreten können. Beispielsweise können Personen, die sich auf einer Wanderung oder in einem Park befinden, bei Waldbränden unmittelbaren Gefahren ausgesetzt sein. Von hier aus konzentrierte sich unser Team darauf, Einzelpersonen in der Umgebung über die Waldbrände und die diesbezüglichen Informationen zu informieren.

Forschung

Basierend auf unserer Brainstorming-Sitzung arbeiteten die Mitglieder unseres Teams daran, Informationen, APIs und relevante Apps zu finden. Wir stellten fest, dass die NASA solche Daten zur Verfügung stellte und unsere Entwickler diese auf einer Karte anzeigen konnten. Es handelte sich jedoch um die täglichen Daten - wir konnten nicht sicher sein, ob sie aktuell stattfinden oder gelöscht wurden. Wir hatten Mühe, Echtzeitdaten zu finden. Dies war auf technologische Einschränkungen zurückzuführen - Satelliten brauchen Zeit, um Daten zu erkennen und zu reflektieren. Daher haben wir neben Daten der NASA auch einen Twitter-Feed zu den Bränden eingebunden, um die oben genannten Einschränkungen auszugleichen. Durch diese Methode kann eine umfassende Übersicht zusammen mit Echtzeitaktualisierungen nebeneinander ausgeführt werden.

Neben der Warnung wollten wir vorhersagen, ob ein Brand entstehen würde. Wir wollten eine weitere Funktion hinzufügen, die die Feuervorhersage für unseren aktuellen Tag zeigt. Durch Untersuchungen haben wir herausgefunden, dass 80% der Brände von Menschen verursacht werden, während 20% der Brände von der Natur verursacht werden. Während von Menschen verursachte Brände ziemlich unvorhersehbar sind, können wir naturbedingte Brände anhand von Faktoren wie Wetter, Luftfeuchtigkeit und Temperatur einigermaßen vorhersagen.

Somit hat unser Produkt 2 Hauptfunktionen. Der erste ist die Meldung von Bränden in unmittelbarer Nähe. Die zweite ist die Vorhersage von natürlich auftretenden Bränden.

Mit diesen beiden Ideen begannen die Designer unseres Teams, an der App-Struktur und dem Design zu arbeiten, während die Entwickler an der Erstellung des Vorhersagemodells arbeiteten.

Design-Komponente

1. Brainstorming Sehen wir uns an, wie wir mit den Entwurfskomponenten vorgegangen sind. Zunächst haben wir versucht zu definieren, wie viele Seiten die App benötigt. Wir mussten erneut ein Brainstorming durchführen. Wir haben alle zugehörigen Wörter in 5 Minuten auf ein Blatt Papier geschrieben.

Brainstorming der Designer

2. Diagramm Danach haben wir begonnen, ein Diagramm zu skizzieren. Wir haben die Wörter mithilfe von Post-It in verschiedene Typen eingeteilt. Dieser Prozess hat uns geholfen, nicht nur zu klären, wie viele Seiten die App haben sollte, sondern auch, welche Informationen auf jeder Seite enthalten sein sollten.

Sitzung des Designer-Affinitätsdiagramms

Wir haben festgestellt, dass die App 4 Seiten benötigt. Sie sind:

  • Karte
  • Feuervorhersage
  • Bildung
  • Rahmen

3. Entwürfe erstellenWir haben die Arbeit aufgeteilt - ich war verantwortlich für die Erstellung der Kartenseite und der Seite für die Feuervorhersage. Wir haben mit der Erstellung von Entwurfsseiten mithilfe von POP (https://marvelapp.com/pop/) begonnen. Diese App eignet sich hervorragend zum schnellen Erstellen einfacher Entwürfe und Prototypen. Hier sind unsere Entwürfe: https://marvelapp.com/8fhf42g/

4. MoodboardWir haben ein Moodboard erstellt, um die Stimmung der App zu ermitteln und weitere Erkenntnisse zu gewinnen. Wir haben Bilder gesammelt, die mit Feuer, Gefahr und Gefahren verbunden sind. Mit dem Moodboard können Sie auch klarstellen, welche Farben für unsere App geeignet sind. Sie können unser Moodboard unter folgender Adresse überprüfen:

5. Prototyping von SketchLet setzt den Prototyping-Prozess fort. Basierend auf den POP-Entwürfen haben wir einen Prototyp erstellt. Ich habe zunächst Elemente eingefügt, ohne an die Farben zu denken. Für den Twitter-Feed auf unserer Kartenseite habe ich den echten auf Twitter beobachtet und jedes Element wie Profilsymbole, Benutzernamen, Tweets und Tweet-Zeiten platziert, um den echten so gut wie möglich zu imitieren.

Auf der rechten Seite wurde der erste Entwurf unserer Prognoseseite erstellt. Diese Seite enthält:

  • Standort
    • Datum
    • Vorhersageprozentsätze
    • Ursachen der Vorhersage (Wetter, Luftfeuchtigkeit, Temperatur)
    • Ich war jedoch mit dem Aussehen nicht zufrieden. Ich wollte es intuitiver machen und ließ mich inspirieren von:

      Es gab viele tolle Designs auf dieser Seite. Ich kann es jedem wärmstens empfehlen, der Ideen und Inspirationen von irgendwoher ziehen möchte.

      Mein 2. Versuch auf der Vorhersage-Seite

      Ich entschied mich, die Vorhersage-Seite in 2 Seiten zu unterteilen, abhängig von den monatlichen Daten und einer täglichen. Ich drückte die Vorhersageprozentsätze grafisch aus und legte Steigungen an, um das Risiko sichtbar zu machen.

      Unser letzter Prototyp ist hier zu finden:

      Wegbringen

      Ich bin sehr stolz auf unsere Arbeit bei diesem Hackathon. Obwohl ich etwas Stress verspürte, weil wir nur wenig Zeit hatten, machte es Spaß zu sehen, wie unsere Ideen visuell dargestellt wurden. Dieser Hackathon hat mich auch dazu gebracht, viel umfassender und ernsthafter über die globale Erwärmung nachzudenken. Vielen Dank für die Erfahrung, Erinnerungen und Preise - ich habe es sehr genossen.

      Vielen Dank fürs Lesen.