bee-focused

UX-Konzept

Kategorie: UX-Konzept

Abschlussaufgabe des Zertifikatslehrgangs UX/UI Design an der OfG

Fertigstellung: 2025

Technologie: Figma, Photoshop, Illustrator

Leistung: Konzeption, Umsetzung

Dieses UX-Konzept ist die Abschlussaufgabe meines Zertifikatslehrgangs UX/UI Design an der OfG. Die Aufgabe bestand darin, ein durchdachtes Konzept für eine Timer-App zu schreiben, die auf dem Pomodoro-Prinzip basiert.

Startbild der App bee-focused für das UX-Konzept

Die App bee.focused hilft Usern dabei, fokussiert zu arbeiten und regelmäßige Pausen einzuhalten. Durch eine klare visuelle Sprache, sanfte Animationen und passende Sounds schafft die Anwendung ein ruhiges, motivierendes Arbeitsumfeld.

Das Design der App ist minimalistisch und konzentriert sich darauf, die Funktionalität der App zu unterstützen.

Schriften und Farben der App bee-focused für das UX-Konzept

Farbpalette & Fonts

Nach dem Start der App erscheint kurz der Welcome-Screen mit dem Icon der App. Anschließend gelangen User direkt auf den Home-Screen. Der Übergang erfolgt nahtlos, da das Icon sich bei beiden Screens an der selben Stelle befindet. Die App-Navigation ist bewusst als flache Struktur gehalten, um eine unkomplizierte Bedienung zu ermöglichen. Vom Home-Screen aus sind zwei Unterseiten direkt zugänglich: Statistiken und Einstellungen.

Während der Fokusphasen hört man das leise Summen von Bienen, welches durch seinen Frequenzbereich als „White Noise“ gilt und zur besseren Konzentration beiträgt. Eine schwebende Biene in der Mitte des Screens bewegt sich sanft auf und ab – eingebettet in eine stilisierte Wabe, deren Umriss mit zunehmender Dauer immer dicker wird. In den Pausen wechselt die Szene: Die Biene schwebt nun über einer Blume, begleitet von einer beruhigenden Melodie.

Wireframes der App bee-focused für das UX-Konzept

Wireframes und Raster

Zielgruppenanalyse und Personas

Die App bee.focused richtet sich an User, die ihre Produktivität steigern und gleichzeitig mehr Achtsamkeit in ihren Arbeitsalltag integrieren möchten. Die Zielgruppe umfasst sowohl junge Erwachsene, die sich in Studium oder Ausbildung befinden, als auch Berufstätige, die im Rahmen ihrer Tätigkeit oder Weiterbildung strukturiert arbeiten müssen. Allen Usern gemeinsam ist das Bedürfnis nach einer klaren Zeiteinteilung, Hilfe bei der Konzentration sowie regelmäßigen Erholungspausen. Sie sind technologieaffin, offen für digitale Tools zur Selbstorganisation und schätzen eine freundliche, minimalistische Nutzeroberfläche, die nicht ablenkt, sondern unterstützt.

Hauptmerkmale der Zielgruppe:

Personas der App bee-focused für das UX-Konzept

Personas

Use Cases

Use Case 1: Lernsession mit Pomodoro-Timer starten

Akteure: Lea (Studentin), App-System
Szenario: Lea möchte sich 90 Minuten auf eine Hausarbeit konzentrieren und nutzt dafür die App mit drei Pomodoro-Einheiten.

Vorbedingungen:

Ablauf:

  1. Lea öffnet die App bee.focused
  2. Sie sieht den Home Screen mit der schwebenden Biene
  3. Sie tippt auf den Play-Button
  4. Der Timer startet eine 25-minütige Fokussitzung
  5. Währenddessen hört Lea das beruhigende Bienensummen
  6. Nach 25 Minuten ertönt ein Ton, und die App wechselt in den Pausenmodus mit neuer Musik und Grafik

Nachbedingungen:

Ausnahmen:

Use Case 2: Lernzeit trotz Zeitmangel planen

Akteure: Thomas (Umschüler), App-System
Szenario: Thomas hat abends nur 45 Minuten Zeit, um für seinen IT-Kurs zu lernen. Er möchte diese Zeit möglichst effizient nutzen.

Vorbedingungen:

Ablauf:

  1. Thomas öffnet bee.focused auf seinem Smartphone
  2. Er startet eine einzelne Pomodoro-Einheit
  3. Nach der Fokuseinheit erscheint automatisch die 5-Minuten-Pause
  4. Thomas lässt die App im Hintergrund weiterlaufen, während er sich kurz bewegt
  5. Danach entscheidet er, ob er eine weitere Einheit beginnt oder die Sitzung beendet

Nachbedingungen:

Ausnahmen:

Screenflow

Der Screen Flow zeigt die Navigation innerhalb der App bee.focused. Vom Home Screen aus lassen sich alle wichtigen Bereiche erreichen: die Statistiken mit Fokuszeiten und Streaks sowie die Einstellungen, in denen Zeiten, Sounds und das Erscheinungsbild angepasst werden können. Auswahloptionen, wie Tonarten, werden über Drop-down-Felder gelöst, ohne in tiefere Menüstrukturen zuführen. Die Navigation bleibt bewusst flach und intuitiv.

Screenflow der App bee-focused für das UX-Konzept

Screenflow

Den Prototypen kann man sich hier ansehen.

Prototyp der App bee-focused für das UX-Konzept

Prototyp

Zurück zur Übersicht Webdesign: Luisa Schaefer ➜