Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress UX Workflow

460 views

Published on

Using WordPress for your UX Toolset. Code ready prototyping.

Published in: Design
  • Be the first to comment

WordPress UX Workflow

  1. 1. ordPress 
 UX Workflow Using WordPress for your UX Toolset Gloria Antonelli WordCamp Chicago 2018
  2. 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. 3. UX Consultant Research Strategy Design WordCamp Chicago 2018 @GloriaAntonelli #WCCHI WordPress Developer & Trainer/Educator
  4. 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. 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. 6. invisionapp.com/blog/building-an-enterprise-ux-team/
  7. 7. UX Process Research & Ideation
 Information Architecture
 Wireframing
 Prototyping
 User Testing theblog.adobe.com/ux-process WordCamp Chicago 2018 @GloriaAntonelli #WCCHI
  8. 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. 9. Design Thinking brainstorm outcomes
 declare assumptions > hypothesize
 create minimum viable product 
 user feedback > learn > repeat User Centered Problem-Solving
  10. 10. uxknowledgebase.com/sketching
  11. 11. Create UX Artifacts Understanding the User Personas • Scenarios • User Flows • User Stories • Journey Maps
  12. 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. 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. 14. Prototype Landscape Lucidsoftware on Medium Let’s add
  15. 15. Prototype Mess blog.prototypr.io WordCamp Chicago 2018 @GloriaAntonelli #WCCHI
  16. 16. Prototyping Tools uxtools.co/tools/prototyping
  17. 17. Design Tools uxtools.co/tools/design
  18. 18. Handoff Tools uxtools.co/tools/handoff
  19. 19. Design Libraries https://uxtools.co/tools/design-libraries
  20. 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. 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. 22. Set up Dev Environment local.getflywheel.com/ Flywheel - Thanks for your WordCamp Chicago sponsorship! Local • XAMPP • MAMP • Vagrant • DesktopServer
  23. 23. Install WordPress
 or Multisite Select a 
 Clean Simple Theme Keep things simple and consistent remove color - use black, white, gray

  24. 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. 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. 26. Responsive Prototyping
  27. 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. 28. Blocks for Prototyping
  29. 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. 30. Thank You! Gloria Antonelli gloria@gloriaantonelli.com WordCamp Chicago 2018 @GloriaAntonelli #WCCHI

×