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

Before You Build / WordCamp Columbus 2014

Betsy Cohen
August 02, 2014

Before You Build / WordCamp Columbus 2014

We all know that WordPress is an amazing tool, but producing an amazing web site is never a given. A little planning goes a long way and in this session we’ll walk through a typical planning and design process that should be completed before you place the first pixel or spend hours searching through themes. As small businesses often have small budgets, we'll also look at ways to manage the process within such constraints.

Betsy Cohen

August 02, 2014
Tweet

More Decks by Betsy Cohen

Other Decks in Design

Transcript

  1. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    BEFORE YOU
    BUILD
    User Experience, Content 

    & Design on a Budget

    View full-size slide

  2. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    GREAT USER EXPERIENCES
    ARE THE RESULT OF TAKING
    USERS’ NEEDS INTO ACCOUNT
    AT EVERY STAGE OF THE
    DESIGN PROCESS.

    View full-size slide

  3. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    ANALYTICS
    A/B TESTING
    FOCUS
    GROUPS
    SURVEYS
    USER TESTING
    USER-CENTERED
    RESEARCH & TESTING METHODS

    View full-size slide

  4. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    BUDGET
    CONSTRAINTS
    TIME
    CONSTRAINTS

    View full-size slide

  5. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    KEEP USERS IN MIND

    View full-size slide

  6. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    DO THE BEST YOU CAN
    WITHIN THE CONSTRAINTS
    YOU’RE GIVEN,
    KNOWING THAT
    GOOD ENOUGH
    USUALLY IS.

    View full-size slide

  7. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    OUR PROCESS

    View full-size slide

  8. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com

    View full-size slide

  9. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com

    View full-size slide

  10. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    ๏ Gather Information about Business
    and Users
    ๏ Make Thoughtful Assumptions
    ๏ Prioritize Business and User Goals
    DISCOVERY
    1
    ACTIVITIES

    View full-size slide

  11. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    DISCOVERY
    1
    ARTIFACTS
    GOOD ENOUGH BETTER
    USER SURVEYS
    SIMPLE
    PERSONAS
    COMPETITIVE
    ANALYSIS

    View full-size slide

  12. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    DISCOVERY
    1
    MEET THE CLIENT
    ๏ Seasoned PR Pro with 7 years
    experience at a top PR firm
    ๏ Ready to branch out on her own
    ๏ Wants to attract clients and
    establish her credibility
    Iris Natalya Kaminsky
    PR / Communications Consultant

    View full-size slide

  13. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    Why do you need a website?
    ๏ To establish credibility for prospective clients
    ๏ To give me a platform to share my experience, develop a
    following, and raise my profile in the industry.
    What do you most want from your site’s users?
    ๏ I want prospects to call me or submit an inquiry form
    ๏ And/Or — I want them to subscribe to my newsletter so I
    can stay in touch.
    DISCOVERY
    1
    NEEDS ANALYSIS
    Us:
    Iris:
    Us:
    Iris:

    View full-size slide

  14. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    DISCOVERY
    1
    NEEDS ANALYSIS
    GOALS
    USERS
    CONTENT
    BRANDING
    FEATURES &
    FUNCTIONALITY

    View full-size slide

  15. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    DISCOVERY
    1
    NEEDS ANALYSIS

    View full-size slide

  16. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    DISCOVERY
    1
    SAMPLE USER SEGMENTATION
    USER
    SEGMENT
    THEIR
    PURPOSE
    DESIRED
    ACTION
    DESCRIPTION

    View full-size slide

  17. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    ๏ To learn how to do their
    own PR better.
    ๏ Not yet familiar with my
    work — probably arrived
    via keyword search;
    Interested in case
    studies and techniques.
    ๏ Subscribe to newsletter
    ๏ Become “fans.”
    ๏ Refer clients in my niche
    DISCOVERY
    1
    SAMPLE USER SEGMENTATION
    USER
    SEGMENT
    THEIR
    PURPOSE
    Prospective PR
    Clients
    PR Colleagues
    Small Businesses
    Doing Own PR
    DESIRED
    ACTION
    DESCRIPTION
    ๏ To learn more about me
    to decide whether to
    trust me, hire me.
    ๏ Senior mgmt with
    businesses in my niche
    market; tech savvy,
    socially engaged, and
    extremely busy.
    ๏ Fill out inquiry form.
    ๏ To learn how to do their
    own PR better.
    ๏ Not yet familiar with my
    work — probably arrived
    via keyword search;
    Proactive, eager to learn
    to be more media-savvy.
    ๏ Subscribe to newsletter
    ๏ Become “fans.”
    ๏ Refer clients in my niche

    View full-size slide

  18. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    ๏ Define Content Requirements
    ๏ Organize Structure
    ๏ Define and Prioritize Page Elements
    INFO ARCHITECTURE
    2
    ACTIVITIES

    View full-size slide

  19. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    INFO ARCHITECTURE
    2
    ARTIFACTS
    GOOD ENOUGH BETTER
    ANALYTICS
    USER / TASK
    FLOWS

    View full-size slide

  20. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    INFO ARCHITECTURE
    2
    SAMPLE SITEMAPS

    View full-size slide

  21. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    INFO ARCHITECTURE
    2
    SAMPLE SITEMAPS
    MONEY4MILLENIALS.COM
    ๏ HOME (LATEST EPISODE)
    ๏ ARCHIVE
    ๏ PAST EPISODES
    ๏ BLOG
    ๏ CONNECT
    ๏ ABOUT
    ๏ TOPIC SUGGESTIONS
    ๏ MEDIA KIT

    View full-size slide

  22. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    INFO ARCHITECTURE
    2
    SAMPLE PAGE ELEMENTS
    Logo &
    Tagline
    Nav
    Menu
    Recent
    Blog Posts
    About
    Opt-In
    CTA
    Testimonial
    Latest
    Podcast
    Social
    Connect Social
    Share

    View full-size slide

  23. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    INFO ARCHITECTURE
    2
    SAMPLE PAGE ELEMENTS
    Logo &
    Tagline
    Nav
    Menu
    Recent
    Blog Posts
    About
    Opt-In
    CTA
    Testimonial
    Latest
    Podcast
    Social
    Connect
    Social
    Share
    HIGH PRIORITY SECONDARY TERTIARY

    View full-size slide

  24. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    WHEN
    EVERYTHING
    IS IMPORTANT,
    NOTHING
    IS IMPORTANT.

    View full-size slide

  25. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    INFO ARCHITECTURE
    2
    CLUTTERED MESS!

    View full-size slide

  26. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    ๏ Sketch / Wireframes
    ๏ Develop Prototype
    ๏ Validate
    ๏ Refine
    IDEATION
    3
    ACTIVITIES

    View full-size slide

  27. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    IDEATION
    3
    ARTIFACTS
    GOOD ENOUGH BETTER
    LIVE
    USER TESTING
    ONLINE USER

    TESTING

    View full-size slide

  28. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    IDEATION
    3
    WIREFRAMES

    View full-size slide

  29. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    IDEATION
    3
    RAPID PROTOTYPE

    View full-size slide

  30. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    ๏ Create Brand & Style
    ๏ Design Interface
    !
    VISUAL DESIGN
    4
    ACTIVITIES

    View full-size slide

  31. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    VISUAL DESIGN
    4
    ARTIFACTS
    GOOD ENOUGH BETTER
    MORE MOCKUPS,
    INCL. MOBILE

    View full-size slide

  32. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    VISUAL DESIGN
    4
    STYLE BOARDS

    View full-size slide

  33. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    VISUAL DESIGN
    4
    STYLE BOARDS

    View full-size slide

  34. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    VISUAL DESIGN
    4
    STYLE BOARD + WIREFRAME

    View full-size slide

  35. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    VISUAL DESIGN
    4
    MOCKUPS

    View full-size slide

  36. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    VISUAL DESIGN
    4
    THEME SELECTION

    View full-size slide

  37. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com

    View full-size slide

  38. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com

    View full-size slide

  39. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    RESOURCES
    Content Development
    ๏ Zerys.com (Marketplace)
    !
    Color Palette Design & Inspiration
    ๏ Kuler.adobe.com
    ๏ Colorschemedesigner.com
    !
    Typography / Web Safe Fonts
    ๏ Google.com/webfonts
    ๏ Fontsquirrel.com
    !
    Stock Images, Illustrations & Icons
    ๏ DepositPhotos.com
    ๏ iStockPhotos.com
    ๏ shutterstock.com
    Here you’ll find links to some of the cool tools mentioned during the
    presentation, along with a few other favorites.
    Style Board Design
    ๏ Betsy’s Style Board template for Photoshop:
    www.positiveelement.com/wordcamp-
    phoenix-2014-resources/
    ๏ StyleTile.es
    !
    Image Editing & Resizing
    ๏ Picmonkey.com
    ๏ Imsanity Plugin - wordpress.org/plugins/
    imsanity/
    !
    Placeholders
    ๏ Lipsum.com
    ๏ placehold.it

    View full-size slide

  40. WORDCAMP COLUMBUS 2014 #WCCBUS
    Betsy Cohen @betsela www.RadiateWP.com
    THANK YOU
    Any questions?
    @betsela
    [email protected]

    View full-size slide