Amae

Amae ist eine Utility-App für vielbeschäftigte Eltern. Amae hilft Eltern, ihre Zeit zu managen, mehr über Erziehung zu lernen und schnell Hilfe zu erhalten.

Interactive Mockup Product Website

Typ

UX / UI

Jahr

2019

Angewandte Fähigkeiten

UX / UI
Android

Team

Eigenes Projekt

Die Aufgabe

Bei diesem Projekt handelte es sich um eine Designübung zur Erstellung eines Benutzeroberflächen-Mockups. Es wurde für einen Schnittstellendesign-Kurs erstellt, der sich auf zielorientiertes Design konzentrierte. Daher bestand ein großer Teil des Projekts darin, die Bedürfnisse der Nutzer in einem bestimmten Bereich zu ermitteln und ein Produkt zu entwerfen, das den Nutzern hilft, ihre Ziele zu erreichen.

<p>Unsere Domäne war die der jungen Eltern. Mit unserem Design haben wir versucht, eine App zu entwickeln, die Eltern dabei hilft, ihre Erziehungsaufgaben zu koordinieren und bei Bedarf einfach und schnell Hilfe zu bekommen.</p>

Das Ergebnis

Dashboard

Das Dashboard hilft Eltern bei ihren häufigsten Aufgaben. Eltern können wiederkehrende Aufgaben, wie Windelwechsel, sowie geplante Ereignisse, wie Arzttermine, koordinieren.

<h3>Nanny</h3>
<p>Mit der Nannies-Funktion können die Nutzer nach Nannies in der Nähe suchen und diese buchen. Ihre Profile zeigen Bewertungen und Rezensionen, ihre Fähigkeiten und weitere Informationen. Außerdem können die Nutzer bereits gebuchte Nannies einfach umbuchen.</p>

<h3>Learn</h3>
<p>Learn bietet kuratierte Artikel, relevante Nachrichten und Diskussionen in der Gemeinschaft. Dies hilft Eltern und Nannies, mehr über Kindererziehung zu lernen und bietet eine Eltern-Community, in der sie sich engagieren können.</p>

<h3>Chat</h3>
<p>Die Chat-Funktion ist eine einfache Möglichkeit, mit anderen Betreuern in Kontakt zu bleiben und sich zu organisieren. Über den Chat können sich die Eltern gegenseitig Aufgaben zuweisen und einen Termin mit einem Nannies buchen und verwalten.</p>

amae – process scroll — Design-Artefakte, die die Komponenten unseres Designs detailliert beschreiben und einen klaren Styleguide definieren, um Konsistenz zu erreichen.

amae – process modality — Design-Artefakte, die die Komponenten unseres Designs detailliert beschreiben und einen klaren Styleguide definieren, um Konsistenz zu erreichen.

Prozess

Das Projekt wurde in 4 Monaten von einem 5-köpfigen Team entwickelt. Ich war der Projektleiter sowie einer der UX- und UI-Designer. Unser Prozess begann mit einem kurzen Domain-Brainstorming, gefolgt von einer ethnografischen Studie, um unsere Nutzer besser zu verstehen. Nachdem wir Personas und mehrere Konzeptideen entwickelt hatten, konzentrierten wir uns auf Amae. Dann haben wir unser Produkt entworfen. Dazu entwarfen wir zahlreiche Artefakte wie Flussdiagramme, Wireframes, User Journey Maps, Interaktionsmuster und einen Style Guide. In den letzten Phasen führten wir Benutzertests und Verfeinerungen durch. Ein Ergebnis davon war, dass wir eine Gesundheitsfunktion, die wir ursprünglich geplant hatten, weggelassen haben. Schließlich erstellten wir eine Produktwebsite, um unser endgültiges Design zu präsentieren.

<h3>Herausforderungen</h3>
<p>Eine unserer größten Herausforderungen während des Designprozesses war es, die App sicher zu machen. Eine unserer Lösungen war die Gestaltung der Nanny-Erfahrung. Nannies können über die Funktion Lernen lernen und sich zertifizieren lassen. Ihre ausführlichen Profile enthalten Bewertungen, Rezensionen und Fähigkeiten, damit Eltern das beste Nannies für ihre Bedürfnisse finden können. Eltern können sehen, welche Aufgaben ein Nannies erledigt hat, sie jederzeit anrufen und ein Nannies melden. Diese Funktionen zielen darauf ab, die Transparenz zu maximieren und eine sichere Erfahrung zu schaffen.</p>

Ergebnis & Design-Artefakte

Sie können das interaktive Mockup unten ausprobieren und einen Blick auf die Datei selbst werfen. Wir haben sehr positives Feedback erhalten und waren mit unserem Endergebnis, dem Weg dorthin und den Dingen, die wir auf dem Weg gelernt haben, zufrieden.

<div class="divText">
  <h3>Design-Artefakte</h3>
  <p>Im Folgenden finden Sie eine Auswahl verschiedener Design-Artefakte aus diesem Projekt. Diese repräsentieren viele Phasen unseres Prozesses, von der Erforschung unserer Zielgruppe und ihrer Bedürfnisse über die Planung von UX-Flows und Wireframes bis hin zu unserer abschließenden Präsentation des Mockups über eine fiktive Produktwebsite, die in einem zweitägigen Sprint erstellt wurde.</p>

<figure ignorecarousel>
  <div class="mediaRow mediaRow-equalWidth mediaRow-equalHeight mediaRow-maxHeightMd">
    <figure onclick="viewImage(this)">
    <img src="/assets/img/amae/lqip/personaChristina.jpg" alt="amae – persona Christina">
    </figure>
    <figure onclick="viewImage(this)">
      <img src="/assets/img/amae/stage3WireflowsSimplified.jpg" alt="amae – stage3Wireflows Simplified">
    </figure>
  </div>
</figure>

<figure ignorecarousel>
  <div class="mediaRow">
    <figure onclick="viewImage(this)">
      <img src="/assets/img/amae/lqip/site-home.jpg" alt="amae – site home">
    </figure>
    <figure onclick="viewImage(this)">
      <img src="/assets/img/amae/lqip/site-taskboard.jpg" alt="amae – site taskboard">
    </figure>
    <figure onclick="viewImage(this)">
      <img src="/assets/img/amae/lqip/site-concept.jpg" alt="amae – site concept">
    </figure>
  </div>
</figure>
</div>