TIMESHEETS APPLICATION

Save this PDF as:
 WORD  PNG  TXT  JPG

Størrelse: px
Starte visningen fra side:

Download "TIMESHEETS APPLICATION"

Transkript

1 UXDesign bygradinarrazvan CompanyBackground: ThemultinationalcompanyhasHQ alovertheworld,thus multipletimezonesneedtobeconsideredwhenauserpuls datafrom anothercountrythathasacertaintimezonedueto them havingdiferenttimezonesandthussignalignasickday thatcanbeapprovedbythemainhq basedinlondoncan takesometime. CompanyProfile: ThecompanyissimilartoGoogleorAppleinscale,this meanstheirtechproficiencyisrealyhigh,beingquitefamiliarwithusingsmartphones,tabletsorlaptopsaswelas otherwebapplicationsthatarecomplexinnaturewhich translatesintofamiliaritywithbothsimpleandcomplexui s anddesignpaterns. WorkEnvironment: -Modernopenfloorplanofficewherepeoplework sidebyside -AppleiMacsaretheprimarydesktopsolution SOLUTION &APPROACH: Beingalargescalecompany,accesibilityandeaseofuse playsavitalkeyinthedesign.thustheappneedstobeeasily accesiblefrom everywhere,thisleadtothreepossiblesolutions: GRID BASEDLAYOUT 1.WebApplication Duetobeingacompanywithofficesworldwideaneasyapproachwouldbetocreateawebappthatpeoplecould accesstotracktheirtime,thisensuredthattheycouldaccess ormanagetimesheetswhereevertheyare,beitintraffic,at homeorattheoffice. 2.Desktop/Intra-net Sincepeoplecome-inattheofficeeachdayadesktopsolutioncouldbeanoptionthiswaytheycouldovercomealthe issuesmentionedwiththewebbasedapproach. 3.Mobilesolution: Duetotheirproficiencywithcurrenttechnology&devices,a mobilesolutioncanbeusedthatwilmarkiteasiertoinput orview data. Possibleproblemswithawebapp: userswouldrequiretovisitacertainwebsiteeach daytostartthetimetracking userswouldrequiretovisitthatcertainwebsite whentheycomeback peoplecouldappearas theirworking although theyarealreadyathome peoplemightforgetto checkout andstoptheir timetracking iftheserverisdown,theycan tuseit iftheinternetintheirofficeisdowntheycan t accessthewebapp Possibleproblemswithamobileonlyapproach bateryrunningout lackofsignalorinternet forgetingtosigninoractivatetheapp couldresultinpeopleinputingmoretime,although theyarenotintheofficeorworkingsincetheirphone ortabletcanbetakenanywherethusnothaving100% accurateresults

2 UXDesign bygradinarrazvan IdentifyingtheMVP(minimum viableproduct)features: TheRoadMaporfeaturesthatcanbeaddedlater: ImportantNOTE: inordertokeepdowncostsanddeliverontime,thebestapproachistoidentifythecriticalcomponentsthatwilgeta productout,thatcanlateronbeextendedanditeratedupon on,basicalyalean approach. Thekeyelementsare: -desktopwidgetforusergroupathatwilletthem inputtheirdailyinformation -webappforusergroupbthatwilletthem managetheinformationprovidedby others mobileappforusergroupathatwilletusersinputdata easilynomaterwheretheyare webappforusergroupathatwilletthem checkorinput theirdatadirectlyfrom GRID thebrowserofchoice,thusifthey BASEDLAYOUT haveanolderdeviceorpreferlaptopsortabletstheycould stilhaveeasyaccess desktopappforusergroupbthatwilletuserscheckothers activitydirectlyfrom theirdesktopthusavoidinginternet connectionissues. USERPERSONAS: UserGroupA: between25-35yearsold passionforengineering,designordevelopment hasansmartphone,possibleanipad,macbookand desktop aresingleorhaveagirlfriend quiteoftentheyarerequiredtostayovertime ththeywilusetheapptoinputtheirtimespentdaily, workingataproject techsavy IfuserswouldnotbeanIT/Engineering/Softwarecompanywherethey arephysicalyinanofficealmostalthetime,insteadtheywouldberequiredtotraveltocertainlocationsorpeopledaily,thenamobileapp wouldbecriticaltomakeiteasilyaccesibleforuserstoinputtheirdata. Thiscouldbeexpandedbyprovidinglocationbasedtargetingsothe timespentforexample:fixingacomputeratacertaincompany,could bemonitoredandfurtherexpandedbyletingtheemployerprovide directfeedbackorratingforthatserviceviathewebappormobileapp. Iftherewasn tamobileapp,thensomepeoplemighthavetocomeback totheofficejustsotheycouldinputtheirtimesheetandincaseswhen ajobextendsaftertheworkinghoursthiscouldbeachoretocome backattheofficejusttodothis. UserGroupB: accountant/hrresponsibleformanagingtime,biling between25-45yearsold hasafamilythushe seagertogethomeandspenttime withthem hasalaptoporsmartphone theyhaveafixedschedulewithnoovertimerequirements ththeywilusetheapptomanagethetimespentbytheteam workingondiferentprojectsandbilingthem

3 Requested UXDesign bygradinarrazvan 1.UserAcomesattheoffice 2.Heturnsonthepc 3.Heopensthebrowserandlogsin 4.EntersthewebsiteURL 5.Hesignsinorisremembered 6.Redirectedtothedashboard 7.entersprojectsnamethath 7.entersprojectsnamethathe sabouttostartworkingon 8.closesthebrowserorleavesitopen 9.oncehe sdonewiththeprojecthegoesbacktothewebsiteandclicksonfinished 10.repeatslast5stepstoaddanotherproject GRID BASEDLAYOUT KEYUSERFLOWS: Userflow forawebapponlyapproach: asshowncreatingawebappforonlyapproach,isahorrible waytoactualymakeusersinputdataeasily abeteruseforawebappwouldbetoletusergroupb managetimesheetsonline,whileusergroupacouldusethe webapptoseemoreadvancedinformationregardingtheir activity. afasterw afasterwayisneededtoinputthedataeitherviaanappor desktopapp. Theconclusion: FlawedUXFLOW -WebAppApproachresultsinaflawedUXdesign -toomanystepsthatinvolvetheusergoingbackandforth betweenbrowseranddesktop -ifheleavesthebrowseropenitcantakesextrascreenspace orcanbedistractingwhenunderpressureofashortdeadline -caninfluencetheusersproductivitybytemptingthem to openfacebookorotherwebsites TheProblems:

4 UXDesign bygradinarrazvan KEYUSERFLOWS: Userflow foradesktopapp/widgetapproach: 1.UserAcomesattheoffice 2.TurnsonthePC 4.Oncehe sfinishedwiththatproject,heopenstheapp, clicksfinishandenterstheprojectsnameorselectsitfrom a list. 5.Iftheuserisworkingonmultipleprojectsatthesametime hehasanoptiontoaddanotherproject,startingasecond timer. Note: Dependingonhow muchcontrolthecompanywants,additionalfeatureslikepausingthetimerwhenthere snomousemovementfor5minutescanbeadded,fornow that snotmygoal. GRID BASEDLAYOUT KeyUIElements 3.Assoonasthedesktopisloaded,he sgreetedbyapopup saying ReadytoWork? andpressesyes.theappstartsrunninginthebackground Uponmarket/competitorresearchthekeyUIordesignelementsthatwilbepresentedare: BetterUXApproach-DesktopApp/WidgetFlow profileimageasawaytomakeitmorepersonalandmoreuserfriendly awelcomemessagesaying HeyJohnDoe,Welcomeback possibleaninspiringquotetogetthem upandrunning totalworkeddaysthismonth totalnumberofhoursworkedtoday numberofprojectscompletedsincehe/shewashired awaytoseewhatprojectsthey veworkedonafew daysago. apossiblefeaturethatwilinform usersthatthey vebeenworkingforx hoursandtheyneedtotakeabreakinordertostayhealthy.

5 DESKTOPAPP/WIDGET Basedonthethingsmentionedbefore,IfoundthatthebestapproachfortheusergroupA,whocan onlyenterorview theirowndetailistocreateadesktopapp/widgetthatwilbeconnectedtotheapi andstoredatalocalyincaseofinternetconnectionissues,serverbeingdownorothersimilarissues. 1 Clearpopup/modalwindow withoutdistractions,makingit realyeasytogetstarted,reducingclutersousercanfocus onthedecision.diferentsize,color&sizeisusedto emphasizethemainaction 2 Insomecasesusersneedafew minutestogetstarted,thisensurestheusercandismissthemessagetogetsomethingdoneorpostponethestart.thisensuresthatpersonalstufthatsuddenlyappearedastheusergottotheoffice,canbehandledbefore startingwork,ensuringthecompanypaystheuseronlywhentheystarttheirwork. 1 2 OncetheOSisloaded,theappautomaticalystarts thisensuresthattheminimum numberofinteractionsis needed,thusavoidingdistractionsorforgetingtostartthe dailytimer. Countdownbegins Usingacountdowntimerinformsthatfrom now onethey needtofocus,creatingabeterseparationbetweenawork andrelaxedmindset. Countdown displayingafunnyormotivationalmessagetomakeitfeel lessofahassleandpossiblyputingthem inagoodmood.

6 3 Messageappearsatacertainintervaloftime,informingusersofpotentialhealthissues.Theapptracksinthebackground mousemovementthusiftheuserhasn ttakenanybreaks,measuredbythelackofmousemovement,itwildisplayedthe message.iftheuserhastakenabreakandthusthemousehasn tmovedinawhile,theappwon tdisplaythemessage. Countdownfinishes displayingafunnyormotivationalmessagetomakeitfeel lessofahassleandpossiblyputingthem inagoodmood. UserStartstheirWork Appdissapearesandisrunninginthebackground,thislet sthetimetrackingappwork, withoutafectingthedaybydayactivities.makingitruninthebackground,ensuresthe userwon taccidentlyclickonitorappearwhiletheuserisalt-tabing,switching betweenopenapps. Afteracertaintime 3 apopupwilappearletingusersthattheyhaven ttakenabreakforsixhours andtheyneedtotakeone,tomaintaintheirhealth.

7 Requested Sincethisisabasicapp,thedashboardormainappwindow is quitebasicindesign,withthekeyelementspresent. AppDashboardappearswhenusersclicksontheappicon thisapproachensurestheusergetsupandrunningassoonaspossible,withoutdistractionsandusinggamificationelementshecanpushhimself. Computershutdownsandtheprocessisrestartedthenextday Eachday,areportissentoutdisplayingthetimethey veworkedandtheirperformance.havingashutdownbuton,furtherreducestheinteractionstheuser needstoperform. Themainactionstheusercanperformsareaalpresent, inaproeminentlocation,ensuringtheuserdoesn thave tolookalovertofindthekeyinteractionstheycanperform. Usercanseewhatprojectsthey vecompletedtoday,aswelas addaprojectnameforthecurrentone.theprojectnameisadded afterthetimerisstartedorwhentheprojectismarkedasfinished fortheday,duetosometimespeoplenotknowingexactlywhat projecttheymaystartworkingon,onlyaftertheyreceiveabriefing. DailyReportappearsattheendoftheday Gamificationelementsusedtomakekeeptrack&improvetheusers performancebymeasuringhow manyfilesthey veworkedwith,how many shavebeensentandhow manykeyshepressed.this ensuresthatattheendoftheday,hewilfeelmotivatedthathewas realyactivetoday,thiscanbeusedbytheadministrationtogivehim abonuspayment,forhisperformance

8 Requested SHEET ETS theusercanaccessthewebapptogetdetailedinformationandreportsof theiractivity,aswelasstartorstopthedailytimetracking. userimage,makesitmorepersonal andmoreuserfriendlyhaving apsychologicalimpact. Similartothedesktopapp,ensures similarityacrossweb&desktop. WEBAPPWireframe-UserGroupAView thesecondgroupneedstobeabletoseeandeditmultiple userdataacrossarangeofperiods,byuser,byteam,byproject WEBAPPWireframe-UserGroupBView gamificationstats,usedtoboost andmeasureproductivityofthe userwithpossibleintegration withotherusers,sotheycan compete 9 Recentlycompletedprojects, ensurestheuserwilseewhat projectstheyhavecompleted aswelastrackhow manyhours havetheyworkedonit.thiswil helpusergetasenseof accomplishment. accomplishment. Havingtheoptiontohidecompleted projectswilhelpusermanage activeprojectsaswelasremindthem whatprojectsarereachingthedeadline. EditProject elementsplacedinakeyposition ensuringtheyareobvious.theirplacement wasselectedbasedonthefactthat usertendtolookupfornavigation elementsorkeyelements. 13 clearlogoutbutonusingadiferentcolor, ensuresit svisibleandstandsout,making iteasyfortheusertofindit. 14 Thesidebarwasputontheleft,due tomostpeoplereadingfrom lefttoright thusthemostimportantinformation beingreadandlookedatfirst. 15 Signaldaysoforsickdays,placedina keylocationcreatedasatextlink insteadofabuton,inordertoavoid grabbingtoomuchatentionfrom the otherelements,sincethiselementwil beusedquiterarely,thusithasalower value,butit sstilaccesibleandvisible. value,butit sstilaccesibleandvisible. Usingprofileimagesmakesitlookmore humanwhiledisplayinganotification highlighthow manyreportshefiledsince someoneviewedthem,wilinform users handlingthetimesheetmanagement,that it surgentandtheyneedtolookintoit. Theusercanjustclickonprofilestoselect them andonceheclicksonthethickbox, hecanthenchooseanactiontoperform. Havingagridorlistview,ensurestheuser wilhaveanoptiontochoosefrom when doingsingleorhugemassediting,since usualyinlistviews,it seasiertoview moreinformationaswelasselectit