Before You Build: Content, Brand & User Experience

We all know that WordPress is an amazing tool, but producing an amazing website is never a given.

The planning process, even when condensed to a couple of hours, is invaluable. Take a little time to get organized before you place the first pixel or spend hours searching through themes.

In this session we'll walk through the needs analysis and planning phases for a typical small business or personal brand website. We'll cover:

* Audience profiles
* Project goals
* Content requirements & strategy
* Wireframes
* Rapid Prototype
* Style Board

Transcript

1. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com BEFORE YOU BUILD Content, Brand, & User Experience 1 BETSY COHEN @betsela www.radiatewp.com WORDCAMP PHOENIX 2014 Friday, January 17, 14
2. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Image of staff group or office here ( 898w x 338h pixels ) — Dwight D. Eisenhower 2 I have always found that plans are useless, but planning is indispensable. “ Friday, January 17, 14
3. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com PEN BEFORE PIXEL 3 Rule # 1 Friday, January 17, 14
4. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Image of staff group or office here ( 898w x 338h pixels ) 4 At first, the possibilities are endless. Too many choices is overwhelming! Friday, January 17, 14
5. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Image of staff group or office here ( 898w x 338h pixels ) 5 Narrow down the choices. The process we’re talking about today helps you clarify what you want and need. Friday, January 17, 14
6. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Image of staff group or office here ( 898w x 338h pixels ) 6 And finally... The One. At the culmination of the process, you’ve got a super- cute solution that satisfied your needs. Friday, January 17, 14
7. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com THE PROCESS 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 7 Friday, January 17, 14
8. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com [ DEMO TIME ] 8 Friday, January 17, 14
9. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com MEET THE CLIENT Image of staff ( 334w x 387h pixels ) Iris Natalya Kaminsky is a seasoned PR professional with 7 years of experience working for the top PR firms in the Southwest. Now she’s branching out on her own. Iris is ready to establish herself and attract clients to her burgeoning business, and she needs to develop an online presence. Iris Natalya Kaminsky PR / Communications Consultant 9 Friday, January 17, 14
10. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com STEP 1: DEFINE 10 Friday, January 17, 14
11. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 11 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 1A DEFINE GOALS ๏ Why do I need a website? ๏ What specific action do I want visitors to take? ๏ Bonus Q: One year after launch, how will I know whether the site is successful? Just a couple of questions: Friday, January 17, 14
12. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 12 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 1B DEFINE AUDIENCE ๏ “Lite” version of User Personas ๏ Think about and list audience segments. ๏ For each segment, what’s the purpose of their visit? Branding 101: Know your audience. Friday, January 17, 14
13. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 13 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
14. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com STEP 2: CONTENT 14 Friday, January 17, 14
15. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 15 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 2A CONTENT REQS ๏ What content does each audience segment want, specifically? ๏ What content will help you accomplish your defined goals? ๏ What are prospects searching for in search engines? Align content with audience & goals. Friday, January 17, 14
16. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 16 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 2B CONTENT ROADMAP ๏ List / organize pages. Be fancy, or just make a bulleted list. ๏ For blogs, list some initial categories in which you plan to write posts. Roadmap, sitemap. Tom-a-to, tom-o-to. Friday, January 17, 14
17. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 17 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
18. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 18 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 2C CONTENT DEVELOPMENT ๏ You write, someone else edits. Or vice versa. ๏ For a blog: 5-10 blog posts up front ๏ Remember the golden rules of web content. Projects are more successful when content is written early in the process. Friday, January 17, 14
19. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com GOLDEN RULES OF WEB CONTENT SHORT PAGES SHORT PARAGRAPHS SHORT SENTENCES BREAK IT UP VISUALLY. INCLUDE A CALL TO ACTION. 19 Friday, January 17, 14
20. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com STEP 3: USER EXPERIENCE 20 Friday, January 17, 14
21. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 21 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3A UX / SITE FLOW ๏ Consider each audience segment. ๏ What page will they first land on? ๏ Where are they likely to go next? ๏ How can you best lead them to the desired action? Site flow: The likely or desired path visitors will take through your site. Friday, January 17, 14
22. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 22 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
23. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 23 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3B UX / LAYOUT ELEMENTS ๏ Plan default interior layout, then home page and any custom layouts. ๏ For each, list & prioritize elements. ๏ Note any mobile variations. What content & widgets belong on each template? Friday, January 17, 14
24. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com LAYOUT ELEMENTS Logo Tagline Nav Menu Social Profile Icons Main Content Email Subscribe Testimonial Recent Posts 24 Friday, January 17, 14
25. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 25 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3C UX / WIREFRAMES ๏ Sketching is easy & accessible, but feel free get fancy & high-tech. ๏ Interior default layout first. ๏ Mobile variation. ๏ Reflect the priorities you set: Important stuff higher, often larger. Get out your drawing pencils and kneaded erasers. Friday, January 17, 14
26. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 26 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
27. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 27 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
28. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 28 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 3D UX / RAPID PROTOTYPE Double duty: This step is also the foundation for step 5-Build. ๏ Dev site: WordPress, minimal theme. ๏ Create pages, place content, and add text widgets as placeholders. ๏ Keep it simple. ๏ Test: Get feedback on the site flow, and refine. Friday, January 17, 14
29. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 29 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
30. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com STEP 4: DESIGN 30 Friday, January 17, 14
31. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 31 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 4A DESIGN / STYLE BOARD For a flexible, responsive site, create a tool kit of design elements. ๏ Logo and typography ๏ Color palette ๏ Accents: Line, texture, shape, pattern ๏ Image treatment ๏ Buttons Friday, January 17, 14
32. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 32 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
33. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 33 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
34. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 34 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 4B DESIGN OF TEMPLATE Search for a theme that fits, or design your own. ๏ Look for a match to your layout (wireframes) that is somewhat close to your design (style board). ๏ Or “merge” your wireframes and style board to create your own mockups. Friday, January 17, 14
35. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com Hero image here ( 898w x 572h pixels ) STYLE BOARD + LAYOUT Friday, January 17, 14
36. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 36 Hero image here ( 898w x 572h pixels ) Friday, January 17, 14
37. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com REVIEW THE PROCESS 5 BUILD 1 DEFINITION 2 CONTENT 3 USER EXPERIENCE 4 DESIGN 37 Friday, January 17, 14
38. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com 38 RESOURCES 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 Content Development ๏ Zerys.com (Marketplace) Here you’l find links to some of the cool tools mentioned by Betsy and other participants during the presentation. Links can be found on my Positive Element blog @ www.positiveelement.com/wordcamp-phoenix-2014-resources/ Image Editing & Resizing ๏ Picmonkey.com ๏ Imsanity Plugin - wordpress.org/plugins/ imsanity/ Placeholders ๏ Lipsum.com ๏ Placehold.it Style Board Design ๏ Betsy’s Style Board template for Photoshop: www.positiveelement.com/wordcamp- phoenix-2014-resources/ ๏ StyleTile.es Friday, January 17, 14
39. Slide / 39 Betsy Cohen @betsela www.radiatewp.com & www.positiveelement.com THANK YOU Any questions? 39 Friday, January 17, 14