Kontakt

Wie kann ich dir helfen?

Vielen Dank!
Ihre Nachricht wird übermittelt.
Leider ist etwas schiefgelaufen.
Bitte versuchen sie es später erneut.

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.
Rolle
Senior UX-/UI-Design
Plattform
Mobile und Tablet App (iOS + Android)
Tools
Figma, Zeplin, Jira, Google Docs, Pen & Paper
Zielgruppe
B2B: Generalunternehmen, Bauherren, Architekten, Fachplaner, Bauzulieferer.
Team
Product Owner, UX/UI-Design, iOS Entwickler, Andorid Entwickler, Backend-Entwickler, CTO.

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

1

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.

2

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.

3

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.
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.
Planung

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.
Das Bild zeigt verschiedene Ausschnitte aus den geführten User-Interviews.
Analyse

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.
Bild zeigt ein I Pad auf das auf einem Schreibtisch liegt. Eine Person zeichnet Wireframes darauf.
Konzeption

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.
Ansicht in Figma in der Prototype Ansicht. Verschiedene Screens und ihre Flows sind Abgebildet.
Testing

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.

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.

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.

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.

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.

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.

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

Projektauswahl

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.
Verortung

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.
Verortung

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.
Einträge

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.
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.
Responsibility

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.
Anhänge

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.
Orientieung

Minimap skalieren &
Navigieren

Das Bild zeigt eine zwei Ansichten der Minimap bei der die rechte vergrößert ist.
Design-System

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.

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.