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.

IA for WordPress

22 views

Published on

Information Architecture for WordPress, Making Strucured Experiences
Speech for WordPress Athens 18th Meetup https://www.meetup.com/Athens-WordPress-Meetup/events/258736223/

Published in: Design
  • Be the first to comment

  • Be the first to like this

IA for WordPress

  1. 1. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup
  2. 2. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup I started from Interior Design & experienced with Set Design so that I move on to Graphic Design and continue to Web Design so that I find the beauty in UX Design and Interaction Design and implement it to Instructional Design. Hi! I am Lena!
  3. 3. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup I started from Interior Design & experienced with Set Design so that I move on to Graphic Design and continue to Web Design so that I find the beauty in UX Design and Interaction Design and implement it to Instructional Design. Hi! I am Lena! I just Design all kinds of Designs. : )
  4. 4. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup TODAY WE SUFFER FROM INFORMATION OVERLOAD With so much information available it’s very difficult to find the information you need and understand it once you found it.
  5. 5. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup It’s the ideal Structure of the Website and its Content. It’s a design discipline that is focused on making information Findable and Understandable. IA (and not AI) IA means Information Architecture
  6. 6. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup INFORMATION ECOLOGY Venn Diagram There is a connection between Context, Content & Users within a complex adaptive Information Ecology.
  7. 7. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup INFORMATION ARCHITECTURE IA feeds Design, Development, SEO, Content Creation and vice versa.
  8. 8. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup JUST BECAUSE YOU CAN’T SEE IT, DOESN’T MEAN IT ISN’T THERE
  9. 9. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup WORDPRESS IA IA Parts of WordPress are: First Level Second Level
  10. 10. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup IA & WORDPRESS Can do magic!
  11. 11. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup But first….. CASE STUDY A COOKING WEBSITE The brief : The Website is about the hipster-est Chef in the world! Cool Cocktails, Burgers and Healthy Vegan recipes, Cooking Tips all in one place!
  12. 12. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup YOU ARE NOT YOUR USER You don’t Design & Develop a Website for yourself or for your client but for the End Users!
  13. 13. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup THE DESING THINKING PROCESS Be careful it’s not a waterfall process
  14. 14. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup DESIGN THINKING CAN BE USED LITERALLY ANYWHERE AND FROM ANYONE
  15. 15. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #1 EMPATHIZE Learn about your End Users Define the Challenge Explore the Human Context Use your Brain & your Heart Don’t be afraid at this point to search for other websites with similar content and explore them
  16. 16. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Hipster -CHEF- Who are they? What they do? Why are they visiting the Hipster-Chef Website? Do they want one day to be a chef like the Hipster-Chef? Do they watch cooking series on Netflix? Are they following famous chefs on Instagram? Are they food bloggers? Do they have a very detailed handwritten recipe book with the best recipes from their mothers/ grandmothers? STEP #1 EMPATHIZE
  17. 17. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #2 PERSONAS Who will use this website? Why they will use it? What exactly will they do? When they will use it? Define your Personas for your Project
  18. 18. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Hipster -CHEF- John , 35 years old Senior Developer Single with a dog called Sharp Has watched every food docuseries and shows on Netflix twice. He works remotely from home and he likes to cook and experience with different tastes and cuisines. He has a rare collection of spices from all over the world. He has started a blog that is called “The Syntax of food” STEP #2 PERSONAS
  19. 19. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Hipster -CHEF- “As a food lover I Want to experience with different ingredients and recipes So that I write about it on my blog.” STEP #2 USER STORY
  20. 20. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #3 DEFINE Make the connections between what the users need and which path they will follow in order to find it. Make Sketches , Diagrams, Journey Maps
  21. 21. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #4 IDEATE What’s the different Users’ Paths? Don’t forget that users don’t always land in your website from the homepage. How do we help them?
  22. 22. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup IA STARTS WITH PEOPLE AND THE REASON THEY VISIT YOUR WEBSITE, THEY HAVE AN INFORMATION NEED
  23. 23. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Hipster -CHEF- How are users searching for recipes? Based on the ingredients? Based on the season? From the Menu? From the Search bar? From the Homepage? From a Bookmark? Based on critics? Because someone else recommend it? Based on the mood? From a Facebook post? All of the above? STEP #4 DESIGN FOR FINDING
  24. 24. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Hipster -CHEF- STEP #4 DESIGN FOR FINDING
  25. 25. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #5 HIERACHY & ORGANIZATION How the website will be structured? Make a Hierarchical Flowchart Be careful this is NOT the Main Menu
  26. 26. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #5 HIERACHICAL FLOWCHART Hipster -CHEF- Zero Level
  27. 27. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #5 HIERACHICAL FLOWCHART Hipster -CHEF- First Level
  28. 28. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #5 HIERACHICAL FLOWCHART Hipster -CHEF- Second Level
  29. 29. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #5 HIERACHICAL FLOWCHART Hipster -CHEF- Third Level Can you think of the third level? Sketching Time! 5’
  30. 30. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #5 HIERACHICAL FLOWCHART Hipster -CHEF- Third Level
  31. 31. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #6 THE CONNECTIONS How different elements relate to one another? Identify elements that lives outside of this structure, that’s elements that is separate of the navigation of the site. Users won’t search separate for them in order to navigate to the website
  32. 32. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #6 THE CONNECTIONS Hipster -CHEF- Fourth Level Can you make connections to your flowchart? How some elements can be connected? 3’
  33. 33. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #6 THE CONNECTIONS Hipster -CHEF- Fourth Level
  34. 34. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #7 USER NAVIGATION & FLOW Define the User Navigation and User Flow. This is the key for making the Main Menu of your website. Existing Menus Examples
  35. 35. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup EVERY WEBSITE HAS DIFFERENT MENU NAVIGATION BASED ON THE USERS’ NEEDS
  36. 36. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #8 WP TEMPLATE HIERARCHY Now link all the elements of the IA structure with the WP Template Hierarchy. Which elements will need sorting? What priority order in every page will have? What elements must the User see first?
  37. 37. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #8 WP TEMPLATE HIERARCHY Hipster -CHEF-
  38. 38. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup STEP #9 PROTOTYPE & TEST IT! Does it work? What’s the feedback from the users? Card Sorting & Prototypes (Low-fi or High-Fi) is your friend : )
  39. 39. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup IS IT WORKING? GO TO STEP 10, IS IT NOT WORKING ITERATE AND REPEAT
  40. 40. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Create a very detailed Website Template Map and add other details like categories, tags, meta, etc STEP #10 MAPPING YOUR FINAL WP WEBSITE STRUCTURE Yeap! Excel Sheets is the perfect choice here : }
  41. 41. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup Manage all of your content (images, copy, videos, links etc). Every asset and its attributes. STEP #11 WP CONTENT STRATEGY
  42. 42. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup ALL THESE BRINGS TO THE PROJECT & ITS PEOPLE CONSISTENCY & SIMPLIFICATION
  43. 43. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup AND OF COURSE YOU CREATE A MORE STRUCTURED EXPERIENCE FOR EVERYONE
  44. 44. @lenalekkou IA for WordPress | WordPress Athens 18th Meetup THANK YOU! @lenalekkou

×