Making Structured Experience

@lenalekkou
Making Structured Experiences | WordCamp Athens 2019

@lenalekkou
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!

@lenalekkou
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. : )

@lenalekkou
YOU ARE NOT YOUR USER
You don’t Design & Develop a Website for yourself or for your
client but for the End Users!

@lenalekkou
THE DESING THINKING PROCESS
Be careful it’s not a
waterfall process

@lenalekkou
DESIGN THINKING CAN BE
USED LITERALLY ANYWHERE
AND FROM ANYONE

@lenalekkou
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

@lenalekkou
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’

@lenalekkou
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

@lenalekkou
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’

@lenalekkou
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

@lenalekkou
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’

@lenalekkou
STEP #1 PERSONAS EXAMPLE

@lenalekkou
Write down all the ideas that
comes to your mind for our
Case Study.
You can make sketches too!
STEP #2 BRAINSTORMING
10’

@lenalekkou
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

@lenalekkou
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?

@lenalekkou
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’

@lenalekkou
STEP #3 DESIGN FOR FINDING
Now make a diagram of those finding methods
10’

@lenalekkou
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

@lenalekkou
STEP #4 HIERACHICAL FLOWCHART
10’
Write on different post-its any
website element that you are
thinking of.

@lenalekkou
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.

@lenalekkou
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.

@lenalekkou
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

@lenalekkou
STEP #7 THE CONNECTIONS
Third Level
5’
Can you make connections to
your flowchart? How some
elements can be connected?

@lenalekkou
IA Parts of WordPress are:
First Level Second Level
STEP #8 CONNECTION WITH WP IA

@lenalekkou
STEP #8 WP IA CONNECTION
5’
Can you connect the previous
diagram with the WordPress
IA?

@lenalekkou
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 : }

@lenalekkou
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/

@lenalekkou
ALL THESE BRINGS TO THE
PROJECT & ITS PEOPLE
CONSISTENCY & SIMPLIFICATION

@lenalekkou
AND OF COURSE YOU CREATE A
MORE STRUCTURED & INTERESTING
EXPERIENCE FOR EVERYONE

@lenalekkou
THANK YOU!
@lenalekkou

Making Structured Experience

More Related Content

What's hot

Similar to Making Structured Experience

More from Lena Lekkou

Recently uploaded

Making Structured Experience