EINA Journal of Design Processes Feeding Creativity 8 TITLE Storytelling applied to app design ABSTRACT The present study compares some representative cases of software applications designed during classes from the course Ergonomics, Perception and Usability during the 2011 and 2014 academic years. As an innovation, in 2014 narrative techniques were applied during the design process, which resulted in improved differentiation and specialisation of the graphic representations as well as an optimised student work process. KEYWORDS app, creativity, graphics, interface, storytelling, usability St oryt el l ing appl ied t o app design El ena Bart omeu Magaña ebartomeu@eina.cat EINA, Centre Universitari de Disseny i Art. Attached to the UAB. Research Group Design Processes. Advanced Practices in Design & Art. The pr esent study com par es som e r epr esentative cases of applications designed dur ing classes fr om the cour se Er gonom ics, Per ception and Usability dur ing the 2011 and 2014 academ ic year s. As an innovation, in 2014 nar r ative techniques w er e applied dur ing the design pr ocess, w hich r esulted in im pr oved differ entiation and specialisation of the gr aphic r epr esentations as w ell an optim ised student w or k pr ocess. The visual r epr esentations der ived fr om the exer cises w er e m uch m or e consistent in ter m s of the inter face?s gr aphic specifications, as w ell as m uch m or e figur ative. Befor e the exer cise, it w as thought that the pr ocess m ight be detr im ental to the site?s usability, but it has helped pr om ote a m or e engaging user exper ience and im pr oved the applications?r esults. For the last thr ee year s, I have been an instr uctor on the cour se Er gonom ics, Per ception and Usability, w her e I have been r esponsible for an exer cise in w hich a softw ar e app is developed fr om its idea phase all the w ay thr ough to the design of the style m anual, r esulting in a pr oduct r eady to be deliver ed to a pr ogr am m er for pr oduction. This pr ocess follow s five phases: (1) the idea phase; (2) the planning phase; (3), the developm ent phase; (4) the testing phase; and (5) the finishing phase. The pr ocess alw ays begins w ith an individual cr eative phase, w hich is then com bined w ith a gr oup pr ocess in or der to develop the idea. To do this, an in-class w or kshop is or ganised in w hich each student cr eates a r epr esentation of his or her pr oposal in the centr e of a sheet of r egular paper, including the nam e of the application and a dr aft of the idea. Ever y four m inutes this w or ksheet is passed on to another student. The new student m ust then r einter pr et the or iginal idea or the successive ones and add a pr oposal in a new box. The ideas m ust
St oryt el l ing appl ied t o app design be self-explanator y, as talking is not allow ed. This is m eant to str engthen the r epr esentational ability of the students in or der to facilitate under standing. In tur n, any failur e to under stand r einfor ces later al thinking. This is the idea phase (1). Next com es the planning phase (2), in w hich the students go hom e, sear ch for any existing apps on the sam e subject available on the m ar ket, and then plan how they w ill develop their ow n: w ho the tar get audience is, w hat the app?s thr ee m ain functions ar e, w hat the gr aphic benchm ar ks ar e in the industr y in w hich it w ill be used (and w hether or not these ar e going to be follow ed), etc. At this point, the student is explor ing the context for his or her idea and establishing a base cam p fr om w hich all of the upcom ing activities w ill be car r ied out. This ter r itor y m ust be w ell under stood in or der to ensur e that w hen the end of the r oad is r eached, it is in line w ith w hat had been initially planned. Dur ing the developm ent phase (3), the student or ganises the flow of infor m ation, defines the ar chitectur e for the app, and plans a user test. In the testing phase (4), a user test is conducted. This m ust take place in the classr oom w ith tw o exter nal user s and, as an independent assignm ent, again w ith tw o exter nal user s. Finally, the pr oject r eaches its finishing phase, in w hich students intr oduce changes, fine-tune the details and pr epar e a pr esentation of their pr ojects, including r eor ganising the infor m ation in or der to explain it clear ly. This year, although the basic m ethod w as the sam e, I intr oduced a new technique dur ing phase 2, the nar r ative. This technique com es fr om the field of stor ytelling. It does not involve telling stor ies in the liter al sense, but r ather w hen the ter m is used in the design envir onm ent it r efer s to a technique that com es fr om the ar ea of nar r ation - a stor y for the design is applied to its developm ent. In our case, w hat w e did w as m ake connections w ith str ategic planning using a stor y that allow s the student to captur e a snapshot of the w hole cloud of infor m ation ar ound his or her initial idea. In this w ay, all of the infor m ation com pr ising the context that m ust be explor ed in phase 2 ceases to exist as a w or ld of possibilities and becom es solidified in the voice of the char acter, in a par ticular m om ent, in a need, a desir e, or an atm ospher e in other w or ds, in a ver y specific r epr esentation of the pr oject?s im aginar y. The visual r epr esentations der ived fr om exer cises that have included this technique have been m uch m or e consistent in ter m s of the inter face?s gr aphic specifications and also m uch m or e figur ative. The UX has also been better, w ith m or e visual consistency and the cr eation of them atic atm ospher es or scenar ios w ith per sonalised voices. It gave r ise to centr alisation in the pr ocess of adjusting the pr ototypes, r edoing finishes based on plans. We have m anaged to br eak aw ay fr om clichéd tar gets by designing pr ojects based on ver y specific user s. Stor ytelling, w hich at fir st m ay have seem ed like som ething that could be detr im ental to the site?s usability, has instead helped to foster a m or e engaging user exper ience and has im pr oved the end applications. In conclusion, the apps have becom e m or e believable and unique (i.e. 9
10 EINA Journal of Design Processes Feeding Creativity 10 Exampl es in t he f ol l owing il l ust rat ions Ex am pl es of sh ar per voi ce: Stanley el Dr. hipocondríaco, Catycat (2013). Ther e w as also a char acter in 2011 (Ayuda a Nacho a estudiar) Ex am pl es of spat i al m et aph or s w i t h t r an sm edi a: Flatmate y Expediente X (2013). Ex am pl es of gr aph i cal con si st en cy i n di f f er en t dept h s of t h e app: Illustr atiobs Scarface (2013) vs. illustr ations Insomnia (2011) Ex am pl es of di sr u pt i on bet w een at m osph er e of depar t u r e an d t h e f i n al r esu l t s: W hat peak is it (r om ance that ends on troquemole). It is alw ays easier to visualize m isapplied str ategy. Stanley el Dr. hipocondríaco and Catycat (2013)
St oryt el l ing appl ied t o app design 11 Ayuda a Nacho a estudiar (2011) and Flatmate (2013)
12 EINA Journal of Design Processes Feeding Creativity Expediente X and Scarface (2013) 12
Storytelling apl icado al diseño 13 Insomnia and W hat Peak Is It (2013)