UX FOR WORDPRESS Incorporating UX Process In Your WordPress Web Design Workflow Hollywood WordPress Meetup 7/10/2013 

Hi, I’m Greg Douglas 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Principle of Premium Interactive Designer / Front-end Developer Organizer of Hollywood WordPress Meetup Designing for the web since 1999 @premiuminteract 

Why UXD? 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com If you are designing and building commercial websites for clients you are already making decisions about user experience design even though you may not be consciously aware of it. UX is something anyone can do… The purpose of this talk is to narrow the focus of UX in general to offer some tools to those who own small WordPress design businesses that want to improve their website planning and designing phase. 

7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com 

7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com 

7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com 

What Is UXD? 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com (UX = User Experience Design) UXD shapes how you feel while interacting with something. It is shaped by the look, language and feedback of a system across platforms. User experience encompasses all aspects of the user’s interaction with the company, it’s services, and it’s products. UXD is designing the user interaction; taking into account who will be using the site, how they will engage the website and the primary action we want them to perform . 

Design With Heart 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Who is this for? What do you need to communicate through this website? What is the primary action the users need to perform? 

Agency UXD vs. The Small Studio UX Process 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com In agencies typically the UXD is a role held by one person or a team of people. The UX designer(s) take into consideration what the UI and the programmers will do to build the site and they create their site maps, wireframes, and user flow with the intention of handing it off to the UI designer(s) and programmers. In a small agency of one or two people the UX role is often times played by the same person that is doing the UI and the coding of the website. 

Tools Of The Trade Sketching Wireframing Prototyping 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com 

Sketching 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Sketching gets a lot of ideas out of your head and onto paper quickly. It helps shape good ideas and eliminate bad ones. You can iterate on sketches very quickly. The investment is low for the return. Cool Apps for sketching include: Paper by FiftyThree Sketchbook Express, Sketchbook Pro Interactive Sketchbook 

Wireframing 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Blueprint that specifies how something is built Designers use them to develop the user interface Developers use them to understand the functionality of the project Programs For Wireframing include: Omnigraffle Balsamiq Illustrator (Also InDesign, Fireworks and Photoshop) 

Wireframe Overview 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Deck: Deliverable that the UX designer builds –  Sitemap/Application map –  Process/User Flows •  Put sitemap in the order that the user will experience the site. This will include signups, decision points and other interactive steps •  Legend –  Common Components •  Title of page/numbered location of where you are in the site •  Annotation •  Logo •  Buttons •  Links •  Header/footer •  Navigation •  Highlighted steps •  Order summery •  Showing different states –  Error –  Login/logout –  Multiple login states –  Authorization level 

Prototyping 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Prepare functional models displaying your intended interaction A clickable wireframe communicating to the client precisely how the user will engage with and experience the interaction. Programs For Prototyping include: WordPress installed and interaction built (but no design applied) Mockup Builder Axure 

UX In Your WordPress Process 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com If you have already been designing with WordPress and have installed a theme then it is likely that your first experience with UX was the UX designed for you by the theme developer. But what if the client wants to do specific things in their website design that are not included in the prebuilt theme? UX For A Small Budget and Pre-Built Theme UX For Larger Budget Websites and Applications 

UX For A Small Budget 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Select a theme with a native structure that is close to the goal you want to achieve and then plan your wireframes and UI comps around that theme and tailor each to the needs established by your client Create sketches and wireframes for your client for the homepage and one sub page and the rest of the website then flows into the sub page design 

7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com 

No content

UX For A Larger Budget 7/11/13 Greg Douglas | UX For WordPress | premiuminteractive.com Identify Early What Sections or Features Will Need An Unique User Experience Design Main Sections / .PHP Template Pages Unique Sub Page Design Portfolio, Team/Faculty Page, Blog BuddyPress Profile, Forum Pages Ecommerce Customized Product Pages, Custom Check Out 

No content

No content

No content

No content

Stay Organized & Keep a Cool Head Take a deep breath and only focus on the step right in front of you. When timelines are tight and budgets are small there is a tendency to want to rush the project and cut steps out. Taking a little extra time can give you clarity, save you additional rework later and has a better chance of encouraging the interaction you originally intended. Most likely the UX you use will differ project-by-project and it will rely on an amalgamation of knowledge, experience, research, and intuition. 

Thank You Greg Douglas greg [at] premiuminteractive.com @premiuminteract