UI Design & Interaktionskonzept

Projektbeschreibung

Im Rah­men des stu­de­nti­schen Pro­jekts „App­li­ca­tion De­sign“ ha­be ich zu­sam­men mit ei­ner Kom­mi­li­to­nin das User Inter­face für exem­pla­rische Funk­tionen der An­wen­dung „Bil­dungs­raum Digi­tal (BIRD)“ in Form ei­ner App ge­stal­tet. Ei­ne Per­so­na (Max) so­wie ein gro­bes Sze­na­rio und ei­ne User Story Map wa­ren be­reits vor­ge­geben. Zie­le der User Story Map wa­ren fol­gen­de: Ei­ge­ne Bil­dungs­da­ten in BIRD nutzen kön­nen, ein pas­sen­des Stu­dien­fach und inter­es­sante Hoch­schu­len fin­den und sich über di­ese zu infor­mier­en, ge­speich­erte In­fos nutzen, der Aus­tausch mit an­deren und ei­ne Be­ra­tungs­mög­lich­keit, ei­gene In­ter­essen, Werte und Ziele ref­lek­tieren, Al­ter­na­tiven zum Stu­dium kennen­ler­nen und sich für ein Stu­dien­fach ent­schei­den.

Methodisches Vorgehen

Ba­sier­end da­rauf er­stell­ten wir zu­nächst ein In­ter­ak­tions­kon­zept, wel­ches wir mit Pa­pier-Wire­fram­es vi­su­ali­sier­ten. Für die Per­so­na und das De­sign­kon­zept stell­ten wir ein Mood­board zu­sam­men. Das Mood­board ka­te­go­ri­sier­ten wir nach den fol­gen­den The­men­fel­dern: Far­ben und Ty­po­gra­fie, die Be­zieh­ung zwi­schen BIRD und Max, For­men­spr­ache und Struk­tur und User Flow. Bei der di­gi­ta­len Ums­etz­ung der Screens re­du­zier­ten wir das In­ter­ak­tions­kon­zept noch ein­mal zu ei­nem ge­eig­ne­ten Sco­pe, der in der ver­blei­ben­den Zeit des Se­mes­ters um­setz­bar war. Zu­nächst ge­stal­te­ten wir die ein­zel­nen Kom­po­nen­ten in ver­schie­den­en Va­ri­an­ten. Im Rah­men der Screen­ge­stal­tung ani­mier­ten wir die Kom­po­nen­ten, um ei­nen klick­ba­ren Pro­to­typ zu er­stel­len. Da­bei gingen wir in iter­ati­ven Schlei­fen vor. Hier den Pro­to­typen, die Screens oder die Kom­po­nen­ten ge­nauer an­schauen.