Wp, uxd, and you

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