Making structured experiences [Workshop] - Lena Lekkou

WordCamp Athens 2019

How can we start to design the experiences of our end users? How can we design the Information Architecture for more complicated projects?

With so much information available it’s very difficult to find the information you need and understand it once you found it. That’s why we must create websites with information that is findable and understandable. In this workshop we will try to work on a case study and develop structured experiences before we even write a single line of code.

Transcript

1. @lenalekkou Making Structured Experiences | WordCamp Athens 2019
2. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 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. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 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. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 YOU ARE NOT YOUR USER You don’t Design & Develop a Website for yourself or for your client but for the End Users!
5. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 THE DESING THINKING PROCESS Be careful it’s not a waterfall process
6. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 DESIGN THINKING CAN BE USED LITERALLY ANYWHERE AND FROM ANYONE
7. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 The Brief! This e-shop sells Travel & Camping Equipment. The website will have a section about Users’ Adventures and wants to motivate their users to write reviews about their products and share also their experiences. CASE STUDY: TRAVEL & CAMPING EQUIPMENT E-SHOP
8. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 LET’S MAKE TEAMS! The Teams! Let’s make teams of three or four people! Don’t be shy, team up with people you don’t know! 5’
9. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 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
10. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 Who are they? What they do? Why are they visiting the “Hit the Road” Website? Do they watch traveling series on Netflix? Are they following famous travelers on Instagram? Do they have bookmarked places around the world that they want to visit? STEP #1 EMPATHIZE 5’
11. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #1 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 Projects
12. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 Make the personas of our Case Study. For the time being, we will focus only to one persona. Don’t forget to use the personas template! STEP #1 PERSONAS 10’
13. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #1 PERSONAS EXAMPLE
14. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 Write down all the ideas that comes to your mind for our Case Study. You can make sketches too! STEP #2 BRAINSTORMING 10’
15. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 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
16. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #3 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?
17. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 Let’s think of how your persona will search and find what he/she needs. How are users searching for travel equipment? Based on the destination? Based on the season? Based on other reviews? From the search bar? Because someone else recommend it? Based on the mood? From a Facebook post? All of the above? STEP #3 DESIGN FOR FINDING 5’
18. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #3 DESIGN FOR FINDING Now make a diagram of those finding methods 10’
19. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #4 HIERACHY & ORGANIZATION How the website will be structured? Let’s make a Hierarchical Flowchart step by step Be careful this is NOT the Main Menu
20. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #4 HIERACHICAL FLOWCHART 10’ Write on different post-its any website element that you are thinking of.
21. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #5 CARD SORTING SESSION 30’ Find 3 people from other groups (ideally people that might be similar with your persona) to make a card sorting session. One member of your team must keep notes.
22. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #6 HIERACHICAL FLOWCHART 10’ Based on the card sorting session, discuss with your group and review all the written elements and make a hierarchical flowchart.
23. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #7 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
24. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #7 THE CONNECTIONS Third Level 5’ Can you make connections to your flowchart? How some elements can be connected?
25. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 IA Parts of WordPress are: First Level Second Level STEP #8 CONNECTION WITH WP IA
26. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #8 WP IA CONNECTION 5’ Can you connect the previous diagram with the WordPress IA?
27. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 Create a very detailed Website Template Map and add other details like categories, tags, meta, etc STEP #9 MAPPING YOUR FINAL WP WEBSITE STRUCTURE Yeap! Excel Sheets is the perfect choice here : }
28. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 STEP #9 WEBSITE MAPPING 10’ Let’s organize all of the above on a map. Image Credits : https://www.nngroup.com/articles/ia-vs- navigation/
29. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 ALL THESE BRINGS TO THE PROJECT & ITS PEOPLE CONSISTENCY & SIMPLIFICATION
30. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 AND OF COURSE YOU CREATE A MORE STRUCTURED & INTERESTING EXPERIENCE FOR EVERYONE
31. @lenalekkou Making Structured Experiences | WordCamp Athens 2019 THANK YOU! @lenalekkou