Stephen Rea - neatsphere.com Rea Portfolio 2018.pdf · Nestle , Santander, British ... with project...

31
Stephen Rea UX & Design Portfolio 2018

Transcript of Stephen Rea - neatsphere.com Rea Portfolio 2018.pdf · Nestle , Santander, British ... with project...

Stephen ReaUX & Design Portfolio 2018

Stephen Rea+44 (0) 7968 753 [email protected]

Passionate designerCreative thinker

• Passionatehands-ondesign&creativethinkerwithexperienceacrossmultiplesectorsandalllevels.

• Highlydevelopedleadershipandmanagementcapabilitiesincluding,teambuild&scalingofon-shore,near-shore&off-shoreteamsaswellasmentoringteams.

• Skilledinsupportingclientengagementsandbusinesseffortsbyprovidingbeststrategicdirection.

• ThoughtleadershipinsupportofaUserCentredDesignapproachandprocessesacrossthebusiness.

• Establishmentofbestinclasstoolchains,waysofworkinganddeliverabledocumentation.

• Budgetplanning&resourcemanagementandforecastingataproject&programlevel.

• Extensiveexperienceindevelopingeffectiveandefficientdesignprocessesandgovernance

I’mahands-onHeadofDesignwhocanworkthewholedesignprocessfromwinningclientbusinessthroughtodelightfuluserexperiences&interactionswithdetailedpixelperfectassetdeliverytodevteams.

summary

attributes

//Stephen’s Career History

previous positions Current positionCompany:

Job title:

Date:

Hogarth Worldwide

Head of UX & Design

2017 - present

• Designleaderformultipleglobalbrandsweb&mobileestatessuchasNestle,Santander,BritishAmericanTobacco&Orangetonamebutafew.

• Managingdesignbudgetsinexcessof0.5M€whilstworkingwithandshapinggloballydistributedteams.

• CreatinglargescaleOSlevelecosystemsfortheOrangebrandofmobilesmartphones.

• RunningmyownsmallstudioforfiveyearsandbecomingaCertifiedAutodeskExpertandanAdobeCertifiedExpertinarangeofgraphic&visualeffectsoftwarepackages.

Career Highlights

Company:Job title:

Date:

OrangeFranceTelecomLead Design Manager2014 - 2017 BlackthornTechnologiesLtd

Head of Design2013-2014

Company:Job title:

Date:Chelsea Apps FactoryLead UX / UI Designer2012 - 2013

Company:Job title:

Date: HooploMediaLead UX / UI designer2012-2012-contract

Company:Job title:

Date:Company:Job title:

Date:

SquareEnixArt Director 2010-2012 NeatsphereStudios

Owner 2005-2010

Company:Job title:

Date:LeadArtistIdeaworks 2004-2005

Company:Job title:

Date: SuperscapeSenior Designer 2000-2004

Company:Job title:

Date:SuperscapeDesigner 1997-1999

Company:Job title:

Date:GeeBroadcastSystemsDemo Artist 1995-1997

Company:Job title:

Date:

AstheHeadofUX&DesignitisStephen’sroletoprovidedesignleadershipforallthecompaniesweb&appproductstoarangeofglobalclients.Workingwithprojectmanagement,clientservicesanddevelopmentteams,hiscoreteaminLondonalsoprovidedesigngovernanceforourfournear-shoreteamsaroundtheworld.Despitebeingaleadership&clientfacingroleheisstillhandson,havingdailycatch-upswiththeteamsandprovidingadvice,guidanceandpastoralcarewhererequired.

//Companies worked with

//UX Showcase

//Design Process

User testingYoucanneverknowhowaproductorservicewillperformintherealworlduntilyoureleaseitbutusertestinghelpstominimisetheriskoffailureandthelikelyhoodofsuccess.Italsogivesverifiableevidencethatcanbeusedtoiterateyourprototype,helpstovalidatefeaturesandcanevenbeusedtoalterprojectdeliveries.

SketchItissaidapicturepaintsathousandwordsandhavinglayoutsanduserjourneyslaidoutinwire-frameforalltoviewisagreatcommunicationtool.Ithelpsmakesureallthelogicdesignedactuallyworksandformsthebackboneoftheinteractiveprototypestocome.

DiscoverEverydesignstartswithresearch.It’sallaboutfindingoutabouttheclient,theircompanyandwhothetargetaudienceis.Mappingoutanpotentialfeaturesintheearlystagesofaprojectisjustasimportantasworkingoutcustomerjourneysandhowpeoplewillinteractwiththecompany/productorservicebeingdesigned.

A/BPlanPlanningisallaboutcreatingalogicalarchitectureforthedesignthathasinputfromthewholeteam.Everyone’sinputisconsideredandaddedtothemix.Fromhereaproduct/serviceMVPcanbecreatedwitharoadmapthatwillhelpvalidateconceptsandfeaturesduringdelivery&launch.

PrototypeThisiswhereeverythingstartstocometolife.Whetherit’sthevisuallookorbeingabletowalkthroughtheuserjourneysastheydesigned,theprototypingstagegivestherapidstarttoaprogramthathelpskeepscostsdownandqualityup.

LaunchOnceafinalMVPhasbeenproduced&testedwearereadytolaunch.Onceoutintherealworlditwillbetheanalyticsthathavebeenbuiltintothedesignthatwilltellushowwellitisperformingandwhatin-lifechangesneedtomadetomaketheitmoresuccessful.

//Workshop Process

Workshop check list :Designisnotbusinessasusual.Thespacesyourteamdesignsinmustbeabletohandleanewwayofworking.Designalsoisnotlinear.Itisaniterativeprocessinwhichyouwillconstantlyneedtorefertoartefactsthathavebeendevelopedalongtheway.Cartingthesearoundtheofficeandstickingthemondifferentwallseveryotherdaynotonlyisapainintheneck,butalsoreducesthetimeyouhavetoactuallydesign.Thisreducesoverallproductivity.Havinga‘warroom’wheretheteamcangettogetherandseeprogresswillboostproductivityandefficiencytremendously.

Agenda storyboards :Agendastoryboardshelpyoutodesignameetingorworkshopandsharethiswiththekeystakeholdersandfacilitators.Well-designedagendastoryboardsenableyoutogainclarityaboutwhatcanbedoneduringaworkshopinordertomakedecisionsabouttime,activities,andtopicstobecovered.Mostimportantly,ascreenplayisavisualtooltohelpyoudesignforresultswhilemanagingalloftheinformationinonesimpledocument.

Onemisunderstandingisthattheagendastoryboardisfixedandthereforenotflexible.That’snottrue.Thestoryboardshouldbeco-createdwiththecoreteamtohelpeveryonedesignaresults-drivenmeetingorworkshop.Inthisway,astoryboardwillactuallyhelpyoutobeflexible.

Moreover,whenyoudesignyouragendAstoryboardsinblocksoftime/activities,itenablesyoutoshifttonewblocksshouldtheexpected-unexpectedoccur,likelatenessduetotrafficjams,etc

Define roles: Youdon’talwaysgettodecidewithwhomyouworkwith.Evenifyoudo,there’snoguaranteethatyou’llbesuccessful.Conflictsofinterestanddifferingvaluesorgoalsoftengetinthewayofateam’sprogress.

Definingteamrolesfortheworkshopwillhelpyoucreateablueprintfortheenginebehindaproject:awell-balancedteam.Asaco-createddocument,theteamcharterwillhelpclarifytheteam’sdirectionwhileestablishingboundaries.

Define the customer persona : Thepersonacanvascanbeusedtogiveacustomersegmentafaceandnameandmakeiteasiertostepintotheshoesofthecustomer.Personasmaketalkingaboutcustomersandtheircharacteristicsmoretangibleandconcrete,andmakeiteasiertoreferbacktoapatternofcharacteristics.Personasmakeitpossibletocreateandsharementalmodelsandhaveacommonlanguageaboutseveralcustomertypes.

Put things in context :Whenmostteamsbegintounpackthecontextoftheirproductororganization,theytakeamyopicpointofviewthatisrootedinthehereandnow.Bycreatingcontextfortheproductorservice,youandyourteamexpandyourthinkingbeyondtheboundariesofyourproductandorganization,tohaveadeeperconversationaboutwhat’sgoingonintheworldandwhat’schangingthatwillaffectyourbusinessinthefuture.

Importanttoknowisthatdoingthisstartstoaddrealvalueafteryouhaverevisiteditacoupleoftimes.Thefirsttimedoingitwillservetogetthetop-of-mindtrendsforyourteammappedout.Revisiting,itbecomeseasierforteam-memberstoaddevidencefortrends,ortoactivelyhuntfortrendsthatyouandyourteamdidnotidentifythefirsttime.Thosearethedarkhorsesthatcancomeoutofnowhere,simplybecausetheyarenotonyourorganization’smap:thosearethedevelopmentstostarttolookfor.

Idea wall :Thepurposeofthisstageistofillupanentirewallwiththeideasgeneratedbyateaminashortamountoftime.Thistechniqueusestriggerquestionstogetthecreativejuicesflowing.Usingtimepressureandasenseofcompetition(whoaddedthelargestnumberofpost-its?)makeiteasiertoshakeanycreativeblocks.Ingroupsofaround10people,itisdoabletoreachmorethan200-300ideasinhalfanhour!Fromthoseideas,therewillalwaysbeafewthataretrulynewandinteresting.Youneedtogetpasttheideaseveryonealreadyhadfirst...

Theideawallisagreatwaytorecordtheresultsofyourideationsession.Askingthemtriggerquestionsastheyfastentheirstickynotestothewallisagreatwaytogeteveryone,fromtheintrovertstotheextroverts,workingtogethercreativelyandfeelingasenseofachievement.Aseachteammemberaddsideastothewall,therestoftheteamwillnodoubtcomeupwithnewonesorpointoutonesthatarefunnyorinteresting.

Card sort your idea wall:Nowthatyouhavegeneratedhundredsofideas,itistimetomakeaselection.Whatarethereallypromisingideas?Inmanysituations,thisiswhereteamscanbogdown.Whatisneededisasimplewaytocategorizeideaswithrespecttothecriteriadefinedearlier.

Wehumansarefantasticatcategorizingthings.Wespendmuchofourprofessionallivescategorizingandsub-categorizingtheworkwedo.Whenitcomestopairingdownyourwallofideas,a2x2matrixisaperfecttooltoharnessourinnateabilitytocategorize.

Create a value proposition : OncethecardsorthasbeendoneitisnowpossibletostartlookingatusingastandardLeanCanvasboardtostartdefiningthingsmoreclearlyforthebusinesstounderstand

projectSoHoBusinessHub

roleLeadDesignManager

platformWeb/Mobile

companyOrangeFranceTelecom

Lets start with why?Business requirements : Tomovefromatraditionalstaticsalesmodelthataskscustomerstopickanofferbasedarounddevicesandtariffstoaninspirationalsourcethatguides,empowersandreassurescustomersthatitispossibletoachievemorefromOrange’sdigitalservices sothatOrangecanre-positionit’sservicesfromsimplycompetingonpricetobeingseenasathoughtleaderwhosupportsandaddsvaluetoSoHocustomers.

//Project Breakdown - SoHo Business HUB

SummaryHavingstartedherbusinessduringaneconomiccrisisandbeinghighereducatedthanmostAnna’sbusinessplanisdesignedtodealwithasloweconomywithslowgrowth.ToachieveahighgrowthrateAnnahasidentifiedthatsheneedstobedigitalwithhermarketingapproachinanindustrythatisverytraditional.

Primary Persona - AnnaAge:42

Type of business:ArtisanBakery

Number of employees:2fulltimeand2parttime

Motivators:“It’s great when customers smile and become regular purchasers. Also when the bakery gets noticed by critics and blogers”.

Frustrations:It’snotgreatwhenemployeesdon’tsharehercommitmentandtheadmingetsinthewayofleading.

Humanise technology with personas.Intheearlystageofaproject,beforeanythingisdesignedorbuiltit’salwaysagoodideatounderstandwhoyouaremakingyourproductsforandwhattheirneedsare.Withoutthemtheabilitytoempathiseisseverelycurtailed.

Theycancomefrommanysourcesandevenbeanamalgamationofdifferentconsumerstoformonesinglemasterpersona.InmostcasesthoughIpreferthreetocoverlight,averageandheavyconsumerpersonas.Thatwayyoucancoverasmanypossibilitiesintheearlystagesofdesign.

//Project Breakdown - discovery conclusions

What is the conclusion?SmallSoHobusinesownersdon’treallyhavethetimetodotheirownpaperwork,letalonespendtimeresearchinghowtechnologycouldhelpthemwiththattask.Mostarenotparticularlytechnologyliteratepastthebasicssodonotunderstandtechnicaltermspastthoseineverydayuse.

How might we go about solving this problem?Fromthebusinessneedsweseethatthereisaneedforrepeatbusinessoutsideofthebi-yearlyagreementplanforanewphone.WealsoseethefromtheSoHoneedswethereisalackoftime,inclinationandunderstandingoftechnology.

ThereforethesolutionshouldhelpinformtheSoHoownersofavailabletechnologyinafriendly,nonpushywaysoasmakethemfeelcomfortable,whilstatthesametimesteeringthemquietlytowardthetechnologythatwillhelpthemimprovetheirbusiness.

Customer journey Annarunsasmallgardencentreandtokeepherbusinessrunningandincreaseclientandstaffengagementsheneedstofindnewwaystogrowthevalueofhersales.

87 9 10

Annaisconfiguringsixseparateelementsandneedstobeabletoseeclearoverviewsofpotentialpurchasesandherownsoftwareandproductsincludedintheprofileconfiguration.ShewantsreassurancethatOrangereallycancreateacompletebusiness

Annaanticipatesherstaffmayhavesomeconcernsaroundusingtechnologytohelpthemincreasethemonetaryvalueofcustomersales,soshesharestheconfigurationprofile.Twoofherstaffhavesomeconcernsabouthowmuchtrainingtheycanexpecttoreceive.ShedecidestologbackintoherprofileandusetheE-Chatgainabetter

Whilstshelikesthelookofherprofileconfigurationsheisconcernedaboutthemonthlysubscriptioncost.SheknowsthattheGardenSpaceisabouttoenterthequietersummermonths,shefindsitextremelyhelpfulthatthereisamenuofcostssoitiseasyforhertomakeaconsiderablesavingonthenumberofdeviceswithout

KnowingthatsettinguptechnologycanbebothfrustratingandtimeconsumingAnnadecidesonthefullsetupoption.Sheispleasedtoseethatthisoptionisincludedinhermonthlysubscriptionpackage.

Annaisanxiousaboutthepotentialdisruptionthatsettingupmightinvolve.LaurenfromOrangearrivesearlyandmuchtoAnna’sdelightallofthedevicesarepreloadedandLaurensharessomeusefulworkingpracticesfortransferringdata.Thestaffarereassuredbytheeasytofollowtutorialsshouldtheyneedarefreshonhowaparticularelementworks.

6

Annalikesthefactthattheconfiguratorstartswiththebusinesschallengessheistryingtofindsolutionsfor,itthenasksherwhatsoftwarebusinesstoolssheisusingandthenasksheraboutconnectivity,devicesandtariffs.

OnthetrainhomefromworkAnnaisthinkingabouthowshemightincreasesalesandcustomerengagementwhenshereceivesatextnotificationaboutherphonebillfromOrange.Annaispleasedtofindthatthelinkinthenotificationtakeshertoasiteofferingherhelpwith

LaterintheeveningAnnaischeckingheremailsonthePCandseesthelinkshesenttoherselfandherteam.ShedecidestolearnmoreabouthowshemightbeabletoapplyKarin’ssolutionstoherownbusinesschallenges.

InspiredbyKarin’sstory,andhowrelevantherbusinesschallengesaretoherown.Tokeepherengagedsherequiresaneasyandlogicalstepthroughprocessthatstartswithherbusinesschallenges.However,Annaneedsreassuranceandguidancethroughoutthatsheisbuildingabusinesssolutionandnotjustbuyingadditionaltechnology,dataormoreexpensivetariffs.

Clickingonthelinkshebeginstoscrollthroughthecontentandispleasedtoseeit’snotanothersalesoffer.WhatAnnaneedsisinspirationaladvicetohelpherthinkdifferentlyaboutthebusinessproblemsshefacesonadailybasis.

54321

//Project Breakdown - customer journey

Service logicKeepingtheprinciplesthatthebusinesshubshouldbeinspiring,empowering,guidingandreassuringtheservicelogicreflectsthecustomerjourneysandhelpsdescribethewholeserviceforteamclarity.Themainchallengeofthispartofthedesignistobalancetheneedofthebusinesstogeneratebusinessandtonotmakethecustomersfeelthattheyarebeingmanipulated-thesolutionhereistooallowtheusertobackoutfromwheretheyarewithoutfearofconse-

Entry points

mobile notifications shop / pos magazine monthly bill

desktop sitemobile site

tweet

Main page filters- My stories / saved- Latest stories- Trending- Star contributors- My Groups

Main page editorial cards- Article title- Descriptive copy- Image / video- Click / tap to view

main page

Editorial contents- Article title- Article copy- Image / video- Like - Share- Save- 'Get the look'- Comments-

LinkedIn / blog site

'Get the look'- Hardware- Mobile devices- Monthly plan- Software- ....

return later

read editorial

compare feature & services with ‘my configuation’

e-shop

change / upgrade my current configuration

renew upgrade buy new

//Project Breakdown - service logic design

//Project Breakdown - wireframesSketchingSimpleroughsketcharecreatedinitallytohelpvisualiseearlyconceptlayoutsforstakeholdersandteammembersalike.Thesecanbeproducedduringmeetingsaswellasafterinordertohaveasmuchteaminputaspossibleduringthisstage.

ForspeedeitherAdobeXDorSketch/InVisionareusedtotakethesketchestothenextstageofmock-up.Therearemanyadvantagesofworkingthiswaythatinclude,easyofuse,speed,easytomakechangesandgeneratingquickfeedback.

Mockups

//Project Breakdown - prototyping

StayinginAdobeXDitisnowpossibletoquicklylinkelementstogethertostarttestingthecustomerjourneytoensureallthetouch-pointsaremet.Thisiswhereconstantchangescanhappenandithelptomakesureeverythingissetupcorrecttoavoidtimebeingwasted.

Prototype

//Usability testing - an overview

Overview :Asimplesetofstatementsoutliningthetestplan,thegoalsofusabilitytestingandwhatthey

Executive summary :Summarizespecificdetailsoftheusabilitytestforthegivenproductanddescribeanyspecificfunctionstobeevaluated.

Methodology :Brieflydescribethenumberofparticipants,thesetting&toolsused.Participants – Numberofpeople,howtheywillberecruited,eligibility,skills&knowledge.Training – Willtrainingneedtobeprovidedtoperformthetasks–ifwhat&howmuch.Procedure – Wherewillthetesttakeplace,whichequipmentwillbeused,wherewillthetestteambe&whattypeofequipmentwill

Roles : Thefollowingarerolesinvolvedinausabilitytest,apersonmayhavemultiplerolesandnotallrolesarerequiredineverytest:Trainer – Providesanyrequiredtraininginordertoperformthetest.Facilitator –Providesanoverviewtotheparticipants,definestestcriteria,assistsparticipantsduringthetest.Data Logger –Recordsparticipantsactionsandcomments.Test observers –Thesilentobserverintheroom,alsoassiststhedataloggerinidentifyingproblems,concerns,anycodeandorproceduralerrors.Ethics – Allpersonsinvolvedwiththeusabilitytestarerequiredtoadheretothefollowingethicalguidelines:• Theperformanceofanytestparticipantmustnotbeindividuallyattributable.• Individualparticipant’snameshouldnotbeusedinreferenceoutsidethetestingsession.

Usability tasks :Usabilitytasksarederivedfromtestscenariosthathavebeendevelopedfromtheusecasesand/orwiththeassistantofasubjectmatterexpert.

UsabilityTestingisasetofproceduresusedingatheringfeedbackfromrealpeopleastowhetheraproductorservicehasbeendesignedwellenoughthatitneedslittleornoexplanationandthatitmeetsboththeneedsoftheuserandofthebusinessprovidingit.Ordinarilydoneinaspecificsetenvironmentitcanalsobedoneinaguerrillamanorbysimplyaskingpeopleinyourofficeoronthestreet.Howeveritisdonethough,havingatestplaninplacebeforestartingwillalwaysyieldbetterresults.

//Usability testing - overview (continued)

Reporting results:Providedattheconclusionofatestitconsistsofareportand/orapresentationoftheresults,evaluatedagainsttheusabilitymatrixandit’sgoals.Recommendationscanbemadeforresolutionsofissuesuncoveredandcategorizedagainstdevelopmentcosttoresolve.

Usability Goals :Completion rate –thecompletionrateisthepercentageoftestparticipantswhosuccessfullycompletethetaskwithoutcriticalerrors.Error-free rate –theerror-freerateisthepercentageoftestparticipantswhosuccessfullycompletethetaskwithoutanyerrors–ornon-criticalatleast.Time on task (TOT) –Thetimetocompleteascenarioisreferredtoas“timeontask”.Itismeasuredfromthetimethepersonbeginsthescenariotothetimehe/shesignalscompletion.

Subjective measures : Subjectiveopinionsaboutspecifictasks,timetoperformeachtask,features,andfunctionalitywillbesurveyed.Attheendofthetest,participantswillratetheirsatisfactionwiththeoverallsystem.Combinedwiththeinterview/debriefingsession,thesedataareusedtoassessattitudesoftheparticipants

Problem severity :Toprioritizerecommendations,amethodofproblemseverityclassificationwillbeusedintheanalysisofthedatacollectedduringevaluationactivities.Impact –Impactistherankingoftheconsequencesoftheproblembydefiningthelevelofimpactthattheproblemhasonsuccessfultaskcompletion.Generallyclassedashigh,mediumorlow.Frequency – isthepercentageofparticipantswhoexperiencethesameproblemwhenworkingonatask.Highis30%ormore,moderateis11-29%,lowis10%orfewer.Problem severity classification – theidentifiedseverityofeachproblemimpliesageneralrewardforresolvingitandageneralriskfornotaddressingitinthecurrentrelease.Thesecanfallintofourcategoriesrangingfrom1-4withdetaileddescriptionsforeach.

Usability Metrix :Scenario completion –definewhatthegoalsareandwhentheyareconsideredcomplete.Critical errors – definehowfarawayfromthedesiredoutcomeofascenariotargetisconsideredtobeacriticalerror–generallycausedbywork-flowerrors.Non-critical errors –recordedaserrorsfromtheparticipantthatdonotconstituteacriticalerror–ieexcessivekeystokes–thatbecausedbyconfusioninusage.Subjective evaluations – collectedviaaquestionnaireattheendduringthedebriefingandshouldbedoneintheformoffree-formfeedbackaswellasratingscales.Scenario completion ( time on task ) –recordedasthetimetakentocompleteeachscenario,notincludinganysubjectiveevaluationdurations.

//Web Design Showcase

//Project board

//Project focus - Helly Hansen

Helly Hansen were re-launching theire-commerceandbrandsiteswiththeaimto deliver amore engaging, informativeand consistent experience for usersacrossalldevices,aswellasidentifyingnewcontenttoincreasedwelltime.

Working with the marketing & insitesteamIhelpedidentifiedtheneedsoftheirtargetaudience,incasetradespeopleorthosewhoworkoutsideingeneral.

The type of people who require hardwearing technicl clothing that won’t letthemdown.

Awarethesetypeofpeoplearen’tlookingforfashionweusedaphotographystylethatspokeoftheclothingbeusedin-situeand kept the interactions to a miniumwhen helping users find the productstheywereinterestedin.

Deliverablewere:

-IAdiagrams-CustomerJourneyflows-Wireframelayouts-Brand&contentinhancedUIinteractiveprototypes+associatedassets.

//Project focus - Nestle Nestea

Nestle decided to refresh the brandpresence of it’s chilled flavoured tea,Nestea.Theclientwantedafresherlookfor the site that wouldwork inmultipleterritories.

Keeping the idea of an honest productwithnoaddedsugarIpushedfortheuseof clean modular design patterns thatwouldallownotonlyfortheproductstobeputfront&centerbuttohavealevelofdetailwithin thesite thatdidn’tneedalltheproductinformationtoblertedoutatonce.

This allowed for the right level ofinformation to be surfaced at theright time for the customer and not tooverwhelm but also created a balencethatallowedthatinformationtobesurcedatthecorrecttimeinthecorrectmannerthatwaseasilydigestable.

Deliverablewere:

-IAdiagrams-CustomerJourneyflows-Wireframelayouts-Brand&contentinhancedUIinteractiveprototypes+associatedassets.

//Project focus - Santander

Santander UK have identified a clientmarketofcustomersthathave£100,000ormoreinsavingsandwishtoofferthema more personal and private bankingexperience.

To give a more individual feel to theprivatebankingmini-sitepersuaded theclient to go for a more minimal look -something contrary to the main publicsite, a different photographic style anda slimmer font. All ofwhich have givendifferent,yet ‘fromthesamefamily’ feeltothesite.

Deliverablewere:

-IAdiagrams-CustomerJourneyflows-Wireframelayouts-Brand&contentinhancedUIinteractiveprototypes+associatedassets.

//Project focus - Cetaphil Skin Health

Nestle Skin Health werelookingupdatealltheirbrands,startingwithCetaphil.

Themainchallengeherewastocreateabalencebetweenthetrustedsciencethatthebrandsproductsarebuiltonandthedesiretobemorereleventtoanewandyoungerprofessionalfemaleaudience.

Thus the new site has a clean look &feelwith content that is targeted to thereleventaudience-inthiscasea35yearoldproffessional lady calledSarahwhois time poor but also educated enoughto know the value of a good skin careroutine.

Deliverablewere:

-IAdiagrams-CustomerJourneyflows-Wireframelayouts-Brand&contentinhancedUIinteractiveprototypes+associatedassets.

//App Design Showcase

//Project board

//Project focus - Orange branded devices - Orange Experience TheOrangeExperienceprogramisanecosystemofapplicationsthatliveonanyphonethathasanOrangesimcardinserted.Thecommunityconsistsofstaticapplicationssuchasthebootanimationandstart-upwizardandworkinconjunctionwithanaugmentedhomescreen,alearninghelpsystemandabrandedappstore.

It’salittlemisleadingtousethesingularhereasthereareinfactthreeHomescreenlayoutsthatholdthewholeofOrangeExperiencetogether.The‘Confident’homescreenisforuserswhodon’twishthemanufactureroroperatortocluttertheirhomescreenswithlotsofwidgetsandappsthattheyarejustgoingtoremoveanyway.The‘Basic’homescreenisforgeneraluserswhomaynotwanttoconfiguretheirownexperiencesomuchandarehappy tohave recommendedappsandwidgetsontheirhomescreens.Finallywehavethe‘Simple’homescreen.unliketheothertwo,thesimplehomescreen is lockedtoasinglepagewithasetof largeevenlyspaced iconsthatmirroroptionsfoundonfeaturephones.Thisoptionsisforthosewhodon’twant,likeorevenneedallthefeaturesofasmartphonebutwouldliketokeeptheirscreensclear.Itisalsothescreenwerecommendforcustomerswhoaretransitioningoverfromafeaturephonetosmartphoneforthefirsttimeandwantafamiliarexperiencebeforedivingdeeperintoasmartphonescapabilities.

OrangePlaystoreuserflow

OrangeExperienceEcosystem

//Project focus - Orange branded devices

TheStart-upWizardisthebeginningofthecustomer’sjourneywithOrange.HelpingsetuptheirnewphonethewaytheywantwhilstintroducingallthegreatappsandfeaturesOrangehastooffer.

Of course there are many othergreat features with this app, likeaccessibility forolderadultsor thevisually impaired, with strongerforce feedback to let them knowwhen a button has been tapped.The user is also introduced toOrange gestures - an advancedway of searching for and openingappseven if theyaren’tanOrangeapp!

Wheretraditionalstart-upwizardsarealinearjourneyforthecustomerwehavecreatedanon-linearexperiencethatallowstheusertoignoreelementsthatarenotrelevanttothemwhilstmakingsuerthatthattheycaneasily

TheconnectLeadersappisdesignedtokeepseniormanagersatGSKuptodatewithwhatishappeninginthecompanyandalsohowthecompanyisbeingperceivedfromtheoutside.Alongwiththeabilitytoquicklycheckstockpricesmanagersarekeptuptodatewithouthavingtospendtimelookinguparticles.Managersareabletobrowsearticlesandevenlinktoexternalsources.Articlescanalsoberankedbylikesandcommentsleftregardingthearticleswhichcanleadtoconversations.Tosavemanagerstimelookingupcolleagueswhohavepostedarticlesorcommentsthereisafunctionthatallowsmangersto contact people directly from within the app. Giving astraighterlinebetweencause&effectwhenpostingarticles.

//Project focus - GSK Thought leaders - remastered

© Chelsea Apps Factory 2012CAF_<PROJECT_NAME> <DEVICENAME> <VERSIONNUMBER> <PAGENUMBER>

Add WBS

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

WBS Element

Validate

WBS Number

WBS3 TemporaryName (Optional)

Engagement name (Optional)

WBS2 Name (Optional)

Client Name (Optional)

Validation status

46 47 48 49 50

51 52 53 54 55

56 57 58 59 60

Task Time Entry | Add a Location

Foreign Locations

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Africa

Bosnia

Columbia

Denmark

Egypt

France

Ghana

Hong Kong

India

Add a Location - User is able to choose from a list of locations

Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Date: Tuesday 2nd June

Timespent: 2 hours

Add to templateTemplate

Location

Location XFrance

WBS

Add WBS Code

Task

Add a Task Code

Note

Add a Note

Task Time Entry | Add a Time (Reset)

Task time

88 0202

66 0000HoursHours

55 5959

MinsMins

77 0101

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

77

44 558800

99

22 3366

11

Done

77PQRSPQRS

44GHIGHI

55JKLJKL

88TUVTUV

00

99WXYZWXYZ

22ABCABC

33DEFDEF

66MNOMNO

11

Stop: 11.30amStart: 9.30am

30 mins 1hr 2hrs 7hrs 8hrs

Reset00 00

Timeline

Duration

Preset

Task time

88 0202

66 0000HoursHours

55 5959

MinsMins

77 0101

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

77

44 558800

99

22 3366

11

Done

77PQRSPQRS

44GHIGHI

55JKLJKL

88TUVTUV

00

99WXYZWXYZ

22ABCABC

33DEFDEF

66MNOMNO

11

Stop: 11.30amStart: 9.30am

30 mins 1hr 2hrs 7hrs 8hrs

Reset00

Timeline

Duration

Preset

02

Task time

88 0202

66 0000HoursHours

55 5959

MinsMins

77 0101

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

77

44 558800

99

22 3366

11

Done

77PQRSPQRS

44GHIGHI

55JKLJKL

88TUVTUV

00

99WXYZWXYZ

22ABCABC

33DEFDEF

66MNOMNO

11

Reset

Stop: 11.30amStart: 9.30am

30 mins 1hr 2hrs 7hrs 8hrs

00

Timeline

Duration

Preset

00

Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Date: Tuesday 2nd June

Timespent: 2 hours

Add to templateTemplate

Location

Location LipsumFrance

WBS

Add WBS Code

Task

Add a Task Code

Note

Add a Note

Task Time Entry | Add WBS Manually

Add WBS

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

WBS Element

Validate

WBS Number

Engagement name (Optional)

WBS2 Name (Optional)

Client Name (Optional)

Validation status

Add WBS

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

WBS Element

Validate

WBS Number

Engagement name ABC

WBS2 Name ABC

Client Name ABC

Validation Successful

Successfull Validation - If WBS Number validated successfully, the �eldsbelow maybe populated by additional content fromthe validation

Validate WBS - The validation button remains inactive untilthe user has provided data into the “WBS Number” �eld - If the user tries to navigate to the last screen with unvalidated data,the app will automatically Validate the WBS number ifany data has been inputted. Successful orUnsuccessful querieswill result in the same feedback as normal.

Task Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Date: Tuesday 2nd June

Timespent: 2 hours

Add to templateTemplate

Location

Add a Location

WBS

Add WBS Code

Task

Add a Task Code

Note

Add a Note

© Chelsea Apps Factory 2012CAF_<Deloitte Timesheet> <iOS | iPhone> <v0.2.6> <page 5>

Edit AddSync

Add WBS

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

WBS Element

Validate

Enter WBS Number

Engagement name

WBS2 Name

Client Name

Validation status

Add WBS - The screen would animate across, with anadditional screen before hand to illustratethat there would be an additional screen whencontent has been stored onto the device.

QQ WW EE RR TT YY UU II OO

AA SS DD FF GG HH JJ

ZZ XX

spacespace DoneDone.?123.?123

CC VV BB NN MM

KK LL

PP

Task Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Add Timespent

Add to templateTemplate

Add a Location

Add WBS Code

Add a Task Code

Add a Note

Date: Tuesday 2nd June

Add Timespent

WBS

Add WBS Code

Task

Add a Task Code

Foreign Location

Add a Location

Note

Add a Note

Task Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Add Timespent

Add to templateTemplate

Add a Location

Add WBS Code

Add a Task Code

Add a Note

Date: Tuesday 2nd June

Add Timespent

WBS

Add WBS Code

Task

Add a Task Code

Foreign Location

Add a Location (If Applicable)

Note

Add a Note

Task Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Add Timespent

Add to templateTemplate

Add a Location

Add WBS Code

Add a Task Code

Add a Note

Date: Tuesday 2nd June

Add Timespent

WBS

Add WBS Code

Task

Add a Task Code

Foreign Location

Location XFrance

Note

Add a Note

Task Time Entry

AT&TAT&T 12:34 PM12:34 PM

DeleteCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Add Timespent

Add to templateTemplate

Add a Location

Add WBS Code

Add a Task Code

Add a Note

Date: Tuesday 2nd June

Timespent: 2 hours

WBS

Add WBS Code

Task

Add a Task Code

Foreign Location

Location XFrance

Note

Add a Note

Validate WBS - IF user taps validate when the keyboard is active, the keyboard will automatically be dismissed.

My WBS Codes

AT&TAT&T 12:34 PM12:34 PM

EditCycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Search

AddWBS3 View SyncFav

Client Name

WBS2 AWBS2 Name AWBS3 Name AWBS3 A

WBS2 BWBS2 Name BWBS3 Name BWBS3 B

Last updated Monday 1st June, 09:01AM

Foreign Locations

AT&TAT&T 12:34 PM12:34 PM

Cycle

Week

Today

Copy

Reminder

Submit

Settings

Summary

Africa

Bosnia

Columbia

Denmark

Egypt

France

Ghana

Hong Kong

India

TheTimesheetappisajointventurebetweenBlackBerryandDeloitte todeliveramobile timekeepingapplicationfor Deloitte on the (then) new BlackBerry Z10 platform.WithDeloitteconsultantsandstaffhaving toaccount fortheir timedown to incrementsof threeminuetsadesignwasrequiredthatwouldmakethatassimpleaspossible.Thesolutionwasavirtualone touch tomark thestart&end of the current task being worked on - reduce time&stressonconsultants&staff andmakingcorrect filingmoreaccurate.

//Project focus - TIme keeping app for Deloitte

//Project focus - Case Notes

Blackthorn’s Case Notes is the ultimate in secure notetaking.BasedaroundasimpleIAsystemof‘cases’-similarinconcepttoarealbriefcasecasenotesallowusersattachforms,images,photographs,videoandaudiotoacaseandtosecurely.Alldatawithintheappishashedsothattamperingwithafileisimpossible.AnotherinterestingsidetothisappisthatisapartofBlackthornturnkeymainframesolutionthatallowsusertouploadandcollectlargeamountoffilesontoonesystemforprocessingaspartofalargerproject.

//Find Stephen on the web

YouTube channel InpreviouslifeStephenhasworkedasAdobeACEInstructorandaAutodeskACIInstructoraswell.OnYouTubeyoucanfindover120videoshowinghowtouseAutodesk3dsMaxandAutoCadwithalltheprojectfilesavailableonhiswebsite–allforfree.

Stephenisagreatbelieverinthefreedomofknowledgeandtheselfempowermentitbringstothosewhoapplythemselvestolearningofanykindandatanytimeoftheirlives.Learningnewskillsthroughoutourlivesisallourresponsibility.

Personal websiteThere are more examples of Stephen’s work on his personal website, www.neatsphere.comaswellaslinkstohisLinked-inprofileandtheprojectfilesfor