MyDoc. Telemedizin
Worum geht es im Projekt
Ein Telemedizinisches Projekt.
Projektziel
Erstellung einer Website, die es ermöglicht, einen Arzttermin zu vereinbaren, eine Behandlung per Videochat in Anspruch zu nehmen und eine Testinterpretation zu erhalten. Nach der Konsultation sind alle Empfehlungen im persönlichen Konto des Patienten verfügbar. Auf der Website kann man nicht nur einen Arzt auswählen und einen Termin vereinbaren, sondern auch ein Gesundheitsprogramm oder eine Versicherung kaufen. Es ist auch möglich, einen Tierarzt für die Behandlung von Tieren (Katzen, Hunde, Kaninchen, Vögel und andere) zu konsultieren.
Meine Rolle und Arbeitsprozess
Informationssammlung vom Kunden und vom Projektleiter
Ich arbeitete mit dem Projektleiter und dem Kunden zusammen, die geäußerte ein Problem, das mit der Schnittstelle gelöst werden musste. Meistens gab es verschiedene Einschränkungen, die sich im Website-Verwaltungssystem befinden. Dies wurde vor dem öffentlichen Teil der Website entwickelt. Die Einschränkungen standen meist im Zusammenhang mit der Funktionsweise des medizinischen elektronischen Systems in der Russischen Föderation.
Informationen verarbeiten und Lösungen finden
Wir arbeiteten mit dem Projektleiter auf diese Weise: Entweder hatte ich eine Textbeschreibung der Aufgabe, oder der Projektleiter machte die Schemen, die ich zunächst in Prototypen verarbeitet habe und dann in eine Schnittstelle gestaltet habe.
Die Arbeit mit den Prototypen fand in mehreren Iterationen statt, es gab viele Verfeinerungen im Prozess, einige Optionen passten aus verschiedenen Gründen nicht und dann suchte ich nach neuen Lösungen, um die Aufgabe zu realisieren.
Erstellung von responsiven Layouts
Nachdem die Prototypen erstellt wurden, gestaltete ich die Layouts. Es war wichtig, alle Details der Funktionalität zu berücksichtigen und responsive Layouts für solche Bildschirmauflösungen zu erstellen: 360px, 768px und 1600px.
Frontend und weitere Arbeit mit Backend
Auf Wunsch der Backend-Programmierer verwendete ich die Bootstrap-Bibliothek, für CSS verwendete ich SCSS. Nachdem der Frontend-Teil der Website erstellt wurde, übergab ich den Code an den Backend-Programmierer und überwachte das Ergebnis. Wenn es Probleme gab, haben wir sie zusammen mit dem Backend-Programmierer gelöst.
Beispiellayouts
Betrachten wir als Beispiel den Weg eines Benutzers, der eine Beratung bei einem Therapeuten buchen möchte. Als Erstes muss er sich auf der Website registrieren oder anmelden. Um sich zu registrieren, geben Sie einfach Ihre Telefonnummer ein, an die ein Verifizierungscode gesendet wird.
Nachdem ein Benutzer eingeloggt ist, kann er nach einem Arzt suchen und sich per Video oder Chat beraten lassen.
Nachdem der Benutzer eine Konsultation (Kardiologie, Augenheilkunde, Neurologie usw.) ausgewählt hat, muss er für den Dienst bezahlen.
Nach der Bezahlung wird der Konsultationswunsch in das System eingegeben. Jeder verfügbare Arzt kann den Patienten sehen und seine Fragen beantworten.
Wenn Fragen im Chat nicht geklärt werden konnten, können Sie den Arzt über den Service anrufen.
Mobile App
Außer der Webversion des Dienstes habe ich eine mobile App für iOS und Android gestaltet. Da die Hauptaufgabe darin besteht, den Nutzer zu einem Chat mit einem Arzt zu führen, beschlossen wir, die Textseiten zu entfernen und nur kurze Beschreibungen der Dienstleistungen und eine einfachere Möglichkeit zur Bestellung einer Konsultation mit der Möglichkeit, einen Arzt anzurufen, zu hinterlassen.
Links ist der Chatraum des Arztes, rechts ist der Chatraum des Patienten
Links ist das Menü des Arztes, rechts ist der Bildschirm für Patientenanrufe
Links ist der Bildschirm für das Patientengespräch, rechts ist der Bildschirm für das Ende des Gesprächs
Links ist der Benutzerbildschirm, rechts ist der Bildschirm, auf dem Sie Ihr Feedback abgeben können
Bildschirme zum Senden von Rückmeldungen
Design-System
Ich verwendete ein System von Komponenten und Varianten sowie Text- und Farbvariablen. Dadurch konnte ich Zeit sparen und die Layouts in einer übersichtlicheren Form an die Entwicklung weitergeben. Für die Bibliothek habe ich ein separates Projekt verwendet, das mit dem Hauptprojekt verknüpft ist.
So gab es beispielsweise zwei visuelle Optionen für Schaltflächen — Primary und Secondary. Es gab 3 Größen: LG, MD, SM und Mit Symbol.
Ich habe auch alle Zustände der interaktiven Elemente detailliert gestaltet, damit der Programmierer keine Fragen hat, wie er diesen oder jenen Block implementieren soll. Zum Beispiel hat der Block mit den Arztterminen mehrere Zustände — der Patient kann einen Wochentag wählen (der Tag, an dem der Arzt nicht verfügbar ist, ist grau markiert), der aktive Tag ist blau markiert, dann muss der Benutzer eine passende Uhrzeit wählen. Wenn der Patient den Arzt zu Hause aufsuchen möchte, kann er die Zeit vor oder nach dem Mittagessen wählen. Wenn der Arzt keine Zeit hat, kann eine Telefonnummer hinterlassen werden, und der Klinikmanager ruft den Patienten zurück, um einen Termin zu vereinbaren.
Die Optionen für die Arztwahl sind in zwei Größen verfügbar — MD und SM. Diese Größen werden vom Frontend-Entwickler benötigt, damit der Block auf verschiedenen Bildschirmauflösungen korrekt angezeigt wird.