Using WordPress for your UX Toolset. Code ready prototyping.

1. ordPress
UX Workflow
Using WordPress for your UX Toolset
Gloria Antonelli
WordCamp Chicago 2018

2. Agenda
UX Workflow Overview
WordPress vs. UX Online Tools
For Small Business
Web Consulting Clients
Freelancers & Small UX Teams
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI

3. UX Consultant
Research
Strategy
Design
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI
WordPress Developer & Trainer/Educator

4. 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

5. 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

6. invisionapp.com/blog/building-an-enterprise-ux-team/

7. UX Process
Research & Ideation
Information Architecture
Wireframing
Prototyping
User Testing
theblog.adobe.com/ux-process
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI

8. 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

9. Design Thinking
brainstorm outcomes
declare assumptions > hypothesize
create minimum viable product
user feedback > learn > repeat
User Centered Problem-Solving

10. uxknowledgebase.com/sketching

11. Create UX Artifacts
Understanding the User
Personas • Scenarios • User Flows • User Stories • Journey Maps

12. Information Architecture
• Card sorting
• White Boarding
• Sticky Notes
The organization of information into an
intuitive structure for task completion.
• Site Maps
• Wireframes
• User Flows

13. Wireframes
A quick way to sketch out page layout, map out functionality
and catch problems early. Low fidelity with pen & paper.
perzonseo.com

14. Prototype Landscape
Lucidsoftware on Medium
Let’s add

15. Prototype Mess
blog.prototypr.io
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI

16. Prototyping Tools
uxtools.co/tools/prototyping

17. Design Tools
uxtools.co/tools/design

18. Handoff Tools
uxtools.co/tools/handoff

19. Design Libraries
https://uxtools.co/tools/design-libraries

20. 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

21. 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.

22. Set up Dev Environment
local.getflywheel.com/
Flywheel - Thanks for your WordCamp Chicago sponsorship!
Local • XAMPP • MAMP • Vagrant • DesktopServer

23. Install WordPress
or Multisite
Select a
Clean Simple Theme
Keep things simple and consistent
remove color - use black, white, gray

24. 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!

25. 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.

26. Responsive Prototyping

27. 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

28. Blocks for Prototyping

29. 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

30. Thank You!
Gloria Antonelli
gloria@gloriaantonelli.com
WordCamp Chicago 2018
@GloriaAntonelli #WCCHI