wp, uxd, and you
TRANSCRIPT
JesseEmmanuelRosario@jemrosario
WordPress, UX Design, and You
everyprojectkickoffEVER
Howdowedothis?!?
TODAY’SAGENDA:
WhatisUserExperienceDesign?Howdoweuseittobuilddigitalproductsthatpeoplelove?
JesseJamesGarrett’sTheElementsofUserExperienceisthefoundingdocumentofwhatwecurrentlyknowasUserExperienceDesign(nexttoAlanCooper’sAboutFacein1995)
1
Strategy Whatdowewanttogetoutofthesite?Whatdoouruserswant?GOAL:Establishbusiness+userneedsandgoals
CONTENTSTRATEGY
USEREXPERIENCERESEARCH
contentanalysiscorestrategy
messagearchitecturecontentauditcontentplan
governancemodel
stakeholderinterviewspersonas
competitiveanalysismentalmodelsjourneymaps
usabilitytesting
Applying the STRATEGY plane
Competitiveanalysis:SurveypreviousWCTOsitestoseehowtheywerebuilt.Sitepurpose+initialcontentplan:Whatisthissiteabout?Whatcouldgointhere?Establishsuccessmetrics:Revenuegeneration?Speakerapplications?#1onGoogle?
2
Scope Whatfeatureswillthesiteneedtoinclude?GOAL:Answer“Howarewegoingtodothisproject(e.g.features,requirements,etc.)?”
PROJECTDISCOVERYrequirements&specprojecttimelinescontentrequirementsinteractionmodelsfeaturesfunctionality
Applying the SCOPE plane
Firmupproject’sbusinessframework:Objectives,KPIs,OKRs,timelines,projectteam,etc.Techspecs:e.g.Domainandhosting,WPsecurity,third-partyservices,etc.Contentandfunctionality:Whatpages,content,andfeaturesmustthissitehavethattrulymattertousers?
3
Structure Howwillthepiecesofthesitefittogetherandbehave?GOAL:Siteorganization(andinteraction)
INFORMATIONARCHITECTUREsitemapsuserflowstags&categoriescontentmodelscontentplacement,etc.
Applying the STRUCTURE plane
Sitemap:Sitesections,subsections,etc.
ContentOrganization:Tagsvs.CategoriesPagesvs.Posts
Home
About Blog Contact
4
Skeleton Whatcomponentswillenablepeopletousethesite?GOAL:Makedesigndecisions(e.g.copy,headings,images,layout,interfaceelements,etc.)
INTERFACEDESIGNwireframespagelayoutsinformationhierarchyinterfacecontrolsinteractiveprototypes,etc.
Applying the SKELETON plane
SOURCE: wirify.com
wireframes
Applying the SKELETON plane
SOURCE: “The Skeptic’s Guide to Low-Fidelity Prototyping” by Laura Busche (Smashing Magazine, 2014)
LOWFIDELITY(papersketches,cutouts,etc.)
HIGHFIDELITY(supercolorful
designmockups)
Applying the SKELETON plane
5
Surface Whatwillthefinishedproductlooklike?GOAL:Packagingandpresentation
VISUALDESIGNcolorlayouttypographyimageryhigh-fidelitycompsdesignsystems,etc.
Helloworld!
A very important distinction!
creativeproblem-solving “makeitpretty”
Design design
Take your pick…
What Good Visual Design Is…
Goodvisualdesigngivesyouanentrypointintothedesignandguidesyoureyealongtheelements.
Applying the SURFACE plane
What’sinvolved?colorlayouttypographyimagery(e.g.photos,icons)designdocumentation(e.g.high-fidelitycomps,styletiles,styleguides,patternlibraries,designsystems,etc.)
SOURCE: “Airbnb UI Toolkit-Web” by Derek Bradley (https://dribbble.com/shots/1669299-Airbnb-UI-Toolkit-Web)
Applying the SURFACE plane
Decideonthecolors,fonts,images,pagelayouts,etc.:Documentthesedecisionssomewhere(e.g.styletile)SelecttheWPtheme:Whichthemesuitsmyneeds?Free?Premium?Considerthemecustomization:HowfarcanI‘personalize’thistheme?Childthemes?functions.php?Pagebuilders?
User-centered beats being (solely) business-centered. 1
ytho
“If I’d asked people what they wanted, they would have said faster horses”
- said no one ever
FUNFACT:Iwassupposedtoattenda“Nudge-a-Thon”,aBehaviouralEconomicsDesignChallenge,todayatRotman.Theproblemtotacklewasfareevasion.IsawthiscommentattheEventPageyesterday(September29,2017;2PM).
As designers, we strike a balance between what users want and what matters to the business.
2
Nobody knows the design problem better than me, which is why I alone can fix it.
- some designers (thanks, but no thanks, 45…)
A solid process gives you signposts to look out for. 3
THINKOFITTHISWAY:
Whatifamarathondidn’thaveanyprogressindicators?
MontVentoux’sFinishLine
Asolidprocesssuggeststhatyou’reonatrackablepath.
PHOTO FROM http://www.macsadventure.com/eu/tour-2072/road-cycling-mont-ventoux
In Conclusion
WHYDOIT:
Driveuser-centricityontopofbusinessrelevance.
Ifyouonlyhavetorememberonething…
The best designers are !process driven, !not product-driven. Trust the process. Design. Decide. Deviate. !And repeat.
@sarahdoody www.theuxnotebook.com
Thank You! SLIDES: http://bit.ly/ux4wordpressCONNECT: @jemrosario