Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX FOR WORDPRESS

UX FOR WORDPRESS

Incorporating UX Process In Your WordPress Web Design Workflow

Greg Douglas

July 10, 2013
Tweet

More Decks by Greg Douglas

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide