ordPress 

UX Workflow
Using WordPress for your UX Toolset
Gloria Antonelli

WordCamp Chicago 2018
Agenda
UX Workflow Overview

WordPress vs. UX Online Tools

For Small Business 

Web Consulting Clients

Freelancers & Small UX Teams

WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
UX Consultant
Research
Strategy
Design
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
WordPress Developer & Trainer/Educator
Workflow
for Project Management,
UX Tools, User Testing &
Document Organization.
Multiple ways of creating websites.

Different tools to make it happen.

WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
User Experience is identifying
a real-world problem and
using design to solve it.
strategy > research > analysis > design > evaluate > repeat
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
invisionapp.com/blog/building-an-enterprise-ux-team/
UX Process
Research & Ideation

Information Architecture

Wireframing

Prototyping

User Testing
theblog.adobe.com/ux-process
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
Start with Discovery
Identify Business Goals & User Needs to
develop a strategy that balances the two.
Competitor Analysis

Audience Analysis

User Scenarios
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
Design Thinking
brainstorm outcomes

declare assumptions > hypothesize

create minimum viable product 

user feedback > learn > repeat
User Centered Problem-Solving
uxknowledgebase.com/sketching
Create UX Artifacts
Understanding the User
Personas • Scenarios • User Flows • User Stories • Journey Maps
Information Architecture
• Card sorting

• White Boarding

• Sticky Notes
The organization of information into an
intuitive structure for task completion.

• Site Maps

• Wireframes

• User Flows
Wireframes
A quick way to sketch out page layout, map out functionality
and catch problems early. Low fidelity with pen & paper.
perzonseo.com
Prototype Landscape
Lucidsoftware on Medium
Let’s add
Prototype Mess
blog.prototypr.io
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
Prototyping Tools
uxtools.co/tools/prototyping
Design Tools
uxtools.co/tools/design
Handoff Tools
uxtools.co/tools/handoff
Design Libraries
https://uxtools.co/tools/design-libraries
Disadvantages
Recurring Cost

Learning Curves

Integrate with other Tools

Build Multiple Viewports

Too many UX Tool Stacks
Static Screens

Basic Functions

Multiple Artboards

Limited Page Interactions

Transition to Code
of using online UX Tools
orkflow
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
No need to learn an external tool.
Native to your workspace and your clients.
Embrace the same language and interface.
Prototypes pushed to devs for production.
User Testing to identify problems.
Set up Dev Environment
local.getflywheel.com/
Flywheel - Thanks for your WordCamp Chicago sponsorship!
Local • XAMPP • MAMP • Vagrant • DesktopServer
Install WordPress

or Multisite
Select a 

Clean Simple Theme
Keep things simple and consistent
remove color - use black, white, gray

Project Management
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
Define, manage, and track the progress of
your projects directly in WordPress.

Todos Plugins
Event Calendars
Sticky Note Plugins
Dashboard Plugins
Custom Post Types
Comments
Avoid the stuff everywhere!
Document Management
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
Categories - Table of contents

Tags - The index

Custom Taxonomies
Content manage all your clients
info, business goals, notes,
ideation, assets and UX artifacts.
Everything in one organized place.
Responsive Prototyping
Drag & Drop Page Builders
Control Page Layout • Reusable Templates,
Rows & Modules • Live Front End Editing •
Multisite Capable • Import/Export
best-3-free-wordpress-page-builder-plugins-compared-2018/
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
Blocks for Prototyping
UXCamps
chicagocamps.org
UX Camp Fall

Sat, Nov 10, 2018
UX Camp Spring

Sat, May 19, 2018
Prototypes, Process & Play

Thurs & Fri, Aug 9-10, 2018
Thank You!
Gloria Antonelli
gloria@gloriaantonelli.com
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI

WordPress UX Workflow