UI/UX iOS & Android App, Prototyping, Branding

silencio – Fighting noise pollution

Im Sommer 2022 wurde ich für das Design einer App beauftragt, bei der man durch das Messen von Lautstärke Crypto minen kann und gleichzeitig Lärmbelästigung bekämpft.

01.

Onboarding Screens

Zu Beginn wird man in der App mit den 3 Hauptaussagen konfrontiert. Jede Aussage wird mit passenden Illustrationen untermauert: Auf Screen 1 entzieht sich der Charakter dem Lärm, während beim Herunterfahren der Lautstärke einige Coins gemined werden. Screen 2 beschäftigt sich mit dem Mental Health Aspekt der App, während Screen 3 das Thema Privacy aufgreift.

02.

Schriftarten

Für die Onboarding Screen Headlines wurden viele verschiedene Schriftarten ausprobiert, manche kryptischer, manche klassischer. Die DM Sans versprüht eine moderne, digitale Verspieltheit, ist aber immer noch sehr gut lesbar und war von daher ein guter Mittelweg. Dazu ergänzt sich als Fließtext Schrift die noch etwas slabigere Work Sans und ergibt ein interessantes Zusammenspiel.

Aa

Big Number – DM Sans 48px

h1 – DM Sans 30px

h2 – DM Sans 24px
h3 – DM Sans 18px

Text – Work Sans 17px

Small Text – Work Sans 14px

Smaller Text – Work Sans 12px

03.

Registrierung

Die Registrierung ist nur möglich, wenn man einen Invite Code erhalten hat, was eine gewisse Exklusivität ausstrahlt. Die Registrierung kann per Mobilfunknummer oder Apple/Google Authentication erfolgen.

04.

Home

Auf dem Home Screen wird visualisiert, wie die Lautstärke gemessen wird. Unterstützend dazu bekommt man noch die Info, in welchem Lautstärkebereich man sich aktuell befindet und bekommt eine Warnung, falls man sich in einem extrem lauten Umfeld befindet. Währenddessen kann man live beobachten, wie sich die eigenen Crypto Coins Schritt für Schritt vermehren. Am unteren Ende des Screens befindet sich der nicht zu übersehende Measure CTA-Button, der die User zur Lautstärkemessung leitet.

05.

Lautstärkemessung

Nach Klick auf den Measure Button gelang man zu einem Modal, das die aktuelle Position auf einer Karte zeigt und einen Marker mit der dort gemessenen Lautstärke hinterlässt. Nach der Messung erfährt man seinen durchschnittlichen Lautstärkepegel sowie die minimalen und maximalen Werte und kann dann den Prozess starten, um seine Coins einzusammeln.

06.

Survey

Um seine Coins zu bekommen, sollte der User nach Messung noch einige kurze Fragen beantworten, wie die Frage nach seinem Aufenthaltsort oder den Geräuschquellen, die hauptsächlich bei der Messung eine Rolle gespielt haben. Diese Infos sind notwendig, um die gesammelten Daten besser wissenschaftlich auswerten zu können. Zum Schluss bekommt man der User seine Coins ausgezahlt.

[

Yellow

Secondary
[

Bley

Background
[

Violet

Primary
[

Pink

Tertiary
07.

Farben

Die am meisten eingesetzte Primärfarbe ist Violet, ein frischer, aber dennoch angenehm ruhiger Farbton, der als Grundlage für alle herausstechenden Elemente dient und gleichzeitig als erste Signalstufe „Alles okay“ dient. Yellow fungiert dagegen schon als mittlere Warnfarbe. Pink dient als starke Signal- und Warnfarbe. Unterstützt werden diese Farben (neben Schwarz und Weiß) von einem omnipräsenten ins bläulich ragenden Hintergrund-Grauton.

08.

Wallet

Die Wallet dient zur Anzeige der bereits geminten Crypto Coins und bietet gleichzeitig eine Übersicht über alle bereits eingeladenen Freunde, durch die man zusätzlich passiv Coins verdienen kann. Es bietet sich die Möglichkeit, noch mehr Freunde zur App einzuladen oder inaktive Freunde anzupingen.

09.

Health

In diesem Bereich findet man einige Statistiken, die dem User helfen sollen, seine Gesundheit rund ums Gehör zu verbessern. Zuerst bekommt man eine Info, in welchem Lautstärkebereich der Tag bisher verlaufen ist. Darunter findet sich eine Card, mit der man eine Übersicht über die Lautstärkepegel der einzelnen Wochentage findet. Durch Swipen nach links kann man zu den vorherigen Wochen gelangen. Die letzte Card soll die Möglichkeit bieten, einen Hörtest durchzuführen.

Testimonial

„Hey Lukas, danke für die finale Version! Ich freue mich heute das alles in der Gruppe zu besprechen. Die Illustrationen wirken tatsächlich richtig gut in der App. Danke für die sehr gute Arbeit!

„Ich möchte noch einmal betonen, dass die Designs, die du gemacht hast, großartig sind und wir sehr zufrieden sind.“

Portfolio

Ähnliche Projekte

AirGuide – Digital Tour Guide

Wireframes, UX/UI Design, Branding

smoQuit – Quit smoking

App Design, Webdesign & Webentwicklung, Branding