mero - Mobile App
Baumanagement-App: Optimierung und Integration neuer Features für eine intuitive und effiziente Ergänzung der Baumanagement-Plattform.
![Ein großes Headerbild auf dem Verschiedene Mockup Screens der mero App zu sehen sind.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9e34e518f77e3f2ba87ce_Showcase_hero.png)
Hintergrund
Die mero-App ist ein integraler Bestandteil einer umfangreichen Baumanagement-Plattform und nutzt Listen zur Dokumentation von Baumängeln und Bautagebüchern. Sie ermöglicht Spezialisten der Baubranche (Generalunternehmern, Bauherren, Architekten und Fachplanern) vor Ort auf Baustellen die digitale Erfassung und Dokumentation zur weiteren Verwendung.
Anforderungen
Optimierung der
Usability
Ziel ist die bestmögliche Unterstützung der Kunden bei ihren Aufgaben durch die Verwendung der App. Die Steigerung des Mehrwerts und die Vermeidung von Fehlern.
Verortung auf
Masterplänen
Um die Wettbewerbsfähigkeit zu stärken, sollen weitere Funktionen zur Verortung auf sogenannten Masterpänen in die bereits bestehende App integriert werden.
Steigerung der
Effizienz
Die Zeit, die unsere Kunden benötigen um bestimmte Aufgaben zu erledigen, soll verkürzt und eine bessere Benutzerfreundlichkeit erreicht werden.
Vorgehen
![Workshopbild auf dem zwei Personen zu sehen sind. Im Team werden diskutiert.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65df37d1fbe6c26a04ede128_Nutzungskontext.png)
![Das Bild zeigt schematisch einen UX Projektplan mit den Kategorien: Probleme (bekannt), Ziele der Forschung, Forschungsfragen, Methoden, Ressourcen, Benutzerprofil/Kundensegment und Metriken. Den Kategorien sind bunte Klebezettel zugeordnet.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f457ef400ca1af1751fd77_UX%20Projektplan.png)
UX Projektplan
Vor Beginn erfolgten Recherchen und Analysen der vorhandenen Informationen. Im Anschluss wurde der Projektplan definiert, in dem sowohl die Bedürfnisse der Nutzer als auch die Geschäftsziele berücksichtigt wurden. Zeitraum, Ressourcen und Budget wurden festgelegt. Dabei war es wichtig, alle relevanten Aspekte des UX-Designs abzudecken. Die definierten Orientierungspunkte schaffen Klarheit für alle Teammitglieder, erleichtern die Kommunikation und ermöglichen eine besser koordinierte Arbeit.
![Das Bild zeigt eine Baustellenbegehung. Zwei Personen mit Bauhelm stehen nebeneinander und reden.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f45e222304c72ea0bd0016_Analyse.png)
![Das Bild zeigt verschiedene Ausschnitte aus den geführten User-Interviews.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/66031b4e1e1271573d032b3c_user_interviews.png)
User Interviews
Um die Probleme der Nutzer besser zu verstehen, wurden Benutzerinterviews geführt. Wir haben 12 Personen je 20 Minuten interviewt und weitere 10 Minuten damit verbracht, die gewonnenen Insights einzuordnen. Die Informationen wurden als Grundlage für die Entwicklung von Ist-Szenarien, Personas, Aufgabenmodelle und User-Journeys verwendet.
![Ein Mitglied des UX Teams zeichnet mit bunten Stiften seine Idee auf einer Glaswand auf.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65df5498cfe5e8df9f14b927_Konzeption_2.png)
![Bild zeigt ein I Pad auf das auf einem Schreibtisch liegt. Eine Person zeichnet Wireframes darauf.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f44e76c63ee3a0f2d9715a_Wireframes.png)
Low-Fidelity-Prototypen
Um die grundlegende Struktur und Funktionalität der App zu skizzieren, noch bevor das eigentliche Design und die visuellen Elemente entwickelt werden, wurden Wireframes erstellt. Sie reduzieren den Zeitaufwand und bieten eine erste Grundlage für Abstimmungen sowie um Abläufe und Interaktionen zu testen. So kann frühzeitig überprüft werden, ob alle relevanten Inhalte vorhanden sind, die bei der Aufgabenerledigung erforderlich sind.
![Das Bild zeigt eine Interviewsituation. Eine Frau hält ein Handy in der Hand, ein Mikrofon steht daneben.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f45d7d4acc8a860c68aee6_Testing.png)
![Ansicht in Figma in der Prototype Ansicht. Verschiedene Screens und ihre Flows sind Abgebildet.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f459dc4d1a4d5ffabad9e0_Prototype.png)
Usability-Test
Bei der Erstellung des Usability-Testplans wurden klare Testziele definiert und anschließend Test-Leitfäden entwickelt. Es wurden repräsentative Kandidaten ausgewählt, Testaufgaben erstellt, geeignete Testmethoden und eine passende Umgebung festgelegt. Während des Tests wurden die Teilnehmer durch die Aufgaben geführt, ihre Interaktionen beobachtet und dokumentiert. Nach Abschluss wurden die Daten analysiert um Erkenntnisse und Empfehlungen zur Verbesserung zu gewinnen. Die evaluierten Ergebnisse wurden in einem Usability-Testbericht zusammengefasst und präsentiert.
Erkenntnisse
![Grafik zeigt ein großes graues Rechteck mit zwei weißen und einem größeren schwarzen Kreis und soll Orientierung versinnbildlichen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9c02c6a458945569b7544_ve-orientierung.png)
Interaktion & Navigation
Effiziente und schnelle Navigation innerhalb der Anwendung ist entscheidend für die Produktivität und die Reduzierung von Fehlern. Als Richtlinie dienen Interaktionsprinzipien (ISO Norm 9241-110) und Heuristiken.
![Grafik zeigt 4 Kreise von denen sich zwei schwarze überlappen und Zuständigkeiten versinnbildlichen sollen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9c02c31ee2d4cf8dcd199_ve-zustaendigkeiten.png)
Zuständigkeiten
Durch mehr Transparenz über Zuständigkeiten im Ablauf können Aufgaben schneller erledigt und Fehler vermieden werden. Zudem wird verhindert, dass Aufgaben durch unterschiedliche Personen doppelt erledigt werden.
![Grafik zeigt zwei graue Rechtecke getrennt durch eine schwarze Linie und soll Datenübermittlung versinnbildlichen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9c02cd40e8edc9d21f8d3_ve-dantenuebermittlung.png)
Datenübermittlung
Auf Baustellen ist die Datenübermittlung aufgrund variabler Internet-Verfügbarkeit herausfordernd. Die Daten werden zwischengespeichert und können bei ausreichender Verbindung übermittelt werden.
![Grafik zeigt ein graues Rechteck und ein schwarzes Kreisdiagramm. Es soll Effizienz versinnbildlichen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9c02c059bf4d77d3d27f8_ve-effizienz.png)
Effiziente Erfassung
Die Erfassung der Einträge mittels Auto-Save Funktion schützt den Benutzer vor Datenverlust und den damit entstehenden Fehlern oder bei technischen Problemen und sorgt für eine reibungslose und effiziente Erfassung.
![Grafik mit Dreieck, Quadrat in schwarz und Kreis. Die geometrischen Objekte sollen das Thema Datenerfassung versinnbildlichen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9c02d15635f17f6214495_ve-datenerfassung.png)
Ergänzende Daten
Die Erfassung von Fotos, Audioaufnahmen und Dokumenten in der Baudokumentation erleichtert die Kommunikation. Sie bietet umfassende Informationen über den Projektzustand und erleichtert so die Konfliktlösung im Bauprozess.
![Grafik zeigt einen grauen und zwei schwarze Balken die Filterfunktion versinnbildlichen sollen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f9c02ceec141ce45fae0d0_ve-filterfunktion.png)
Filterfunktion
Funktionen zur Filterung von Einträgen in der Baudokumentation bieten eine gezielte Fokussierung auf relevante Informationen. Die Filterung ermöglicht individuelle Anpassungen und verbessert die Übersichtlichkeit.
Ergebnis
Unterscheidung der Projekte
Durch eine intuitive Navigation und Möglichkeiten zur Individualisierung mittels eigener Bilder, die vom Nutzer selbst erstellt und ausgewählt werden können, wird die Wiedererkennung des Projekts erleichtert.
![Das Bild zeigt UI Elemente der mero App. Drei Projektkarten stehen nebeneinander. Die Mittlere ist größer als die andere. Auf den Karten Ist das ein Bild des Objekts zu sehen darunter der Name, der Ort und eine Auswahlfunktion (select project) mit einem Pfeil.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f723db9a9665a9dcb3c73d_Projektauswahl.png)
Die neue Planansicht
Die neue Funktion ermöglicht es, eine Stelle im Plan zu verorten und dieser direkt einen Einträg hinzuzufügen. Der Aufbau des Formulars kann individuell in der Plattform definiert und angepasst werden.
![Auf dem Bild sind zwei Mockups der mero App zu sehen. Auf einem Screen ist die Planansicht der App, auf dem andere die Detailansicht eines Eintrags.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/6603241c7b869767fb6f701d_Verortung.png)
Mehr Flexibilität bei der Verortung
Die Verortung kann über die neue Planansicht hinzugefügt werden. Zusätzlich kann der Nutzer die bereits in der Vergangenheit erstellten Listeneinträge um Informationen zur Verortung ergänzen, was eine flexible Herangehensweise ermöglicht.
![Interfaceausschnitte der App auf der zwei unterschiedliche Flows zu sehen sind. Der erste Flow zeigt den Ablauf zur Erstellung eines neuen Pins aus der Planansicht kommend. Der zweite Flow den Pfad aus dem Eintrag kommend.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/660ebb0f9835dc0cf9927387_Verortung2.png)
Synchronisieren
Erstellte Einträge werden gespeichert und können synchronisiert werden sobald eine ausreichende Internetverbindung besteht.
![Das Bild zeigt UI Elemente der Uploadfunktion aus der App.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f8718b3cf9896cd85c7b64_Eintra%CC%88ge-min.png)
![Das Bild zeigt eine männliche Person die ein I Phone in den Händen hält. Die mero App ist geöffnet. Er platziert gerade einen neuen Pin im Plan um einen Eintrag zu erstellen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f8740c6debcf2f02c39d12_App%20Mockup.png)
Festlegen & verwalten
![Auf dem Bild sind drei unterschiedliche Profilbilder von Nutzern der App zu sehen. Sie stehen nebeneinander daneben befindet sich ein Plus Zeichen und eine fünf.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f866a4037a83e8ef4ed864_Responsibility.png)
Fotos, Audioaufnahmen &
andere Dokumente hinzufügen
Zur Ergänzung einer aussagekräftigen Dokumentation können Fotos und Audioaufzeichnungen oder Anhänge wie Textdokumente und PDFs den Einträgen hinzugefügt werden.
![Das Bild zeigt zwei Mockups der Mobile App. Auf einem Screen ist der Tab Daten aktiv und die dazugehörigen Einträge darunter zu sehen. Auf dem anderen Screen ist der Tab Anhänge geöffnet und diverse angehängte Datenformate die dem Eintrag zu sehen.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/6627c08dd51af082905deddf_Attachments.png)
Minimap skalieren &
Navigieren
![Das Bild zeigt eine zwei Ansichten der Minimap bei der die rechte vergrößert ist.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f71fccf859eed35391c155_Orientierung.png)
Konsistente und effiziente Gestaltung
Die klare Definition von Designelementen und Richtlinien ermöglicht eine einheitliche Gestaltung und spart Zeit bei der Entwicklung.
![Das Bild zeigt das Design-System der mero App bestehend aus: Icons, Farben, Headings, Spacing und weiteren UI components aus Figma.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65f8726028150826d45f7d9e_Design-System.png)
Wie kann ich dir
helfen?
Kontaktiere mich gerne einfach und unverbindlich.
Ich arbeite Remote oder vor Ort in: Weimar, Erfurt, Jena oder Leipzig.
![Das Bild zeigt eine colaborative Zusammenarbeit. Eine weibliche Person im Mittelpunkt des Bildes hält ein IPad. Man sieht einen Schreibtisch auf dem verschiedene Ausdrucke liegen. Eine männliche Person hält ein IPhone und zeigt etwas darauf.](https://cdn.prod.website-files.com/65d4a6d33b1d077a278f9de0/65d4a6d33b1d077a278f9e83_Image.png)