Immonet Pattern Library

Während Immonet als Produkt und Team wächst, wird es zunehmend immer wichtiger, ein einheitliches visuelles Design, als auch eine konsistente Interaktion des UI in allen Bereichen des Produkts zu gewährleisten. UI Patterns sind ein essentieller Baustein, um diesem Ziel gerecht zu werden, denn sie ermöglichen Inkonsistenzen, Wildwuchs und unnötige Doppelarbeit im Frontend Design und Development zu vermeiden.

 

Dies ist ein seit 2014 laufendes Projekt in enger Zusammenarbeit von UX & Frontend Entwicklung.

Aufgabenstellung

  • Aufbau, Pflege & Promotion einer UI Pattern Library für das responsive Frontend Framework der Immonet Plattform
  • Etablieren einer konsistenten Designsprache
  • Konzeption und Weiterentwicklung von responsive UI Patterns
  • Etablieren der Pattern Library in einem agilen Entwicklungsumfeld
  • Effizienz im UX Design und der Frontend Entwicklung

Vorgehen

  • Die in die Library aufzunehmenden Patterns wurden durch ein systematisches Interface Inventory erarbeitet.
  • Daraufhin wurden mit dem Immonet Frontend Framework die Pattern erstellt.
  • Eine initiale Befüllung wurde durch einen Pattern Library Sprint geschaffen.
  • Die Pattern Library hat mehrere Iterationen durchlaufen. Version 1 war ein eigenes Entwicklungsprojekt. Version 2 wurde auf Basis eines Kirby CMS weiterentwickelt.
  • Intensive Kommunikation stellt sicher, dass die Pattern Library im Product & Development Bereich etabliert wird.
  • Tools im Einsatz (u.A.): PHP, HTML/CSS/JS, GitHub

Fazit

  • Die Eigenentwicklung der Pattern Library (V1) zeigte deutliche Schwächen in der täglichen Nutzung und Pflege der Inhalte. Die Neukonzeption und Implementierung auf Basis von Kirby CMS (V2) lieferte hier enorme Verbesserungen.
  • Die neue Implementierung (v2.0) wurde im Rahmen eines unternehmensinternen Hackathon proaktiv zur Beta-Reife entwickelt. 
  • Durch die CMS Plattform ist es nun möglich, Inhalte in wenigen Minuten zu aktualisieren und die Best Practice Hinweise aktuell zu halten. 

Weitere Infos

Aus diesem Projekt ist das Open Source Projekt "Pattern Library Starterkit" abgeleitet, welches auf meinem GitHub Account verfügbar ist.