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!
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’
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’
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?
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/