Plan your website

1. Order in the
kitchen
By Fred Moritz
#YDW

2. 2 agreements
#YDW

3. Fred’s stats
#YDW
Level 22 in life
Planet earth, sector Estonia
24/7 designer:
Work, hobbies, fun
Personal motivation – developing in the field of
design
Deals in mobile, web, print & UI/UX, gamification

4. Research
#YDW

5. Personas
#YDW

6. Up to date trends
#YDW

7. Visual planning
and organizing.
#YDW

8. User Flow
Storyboard
User Story
Acceptance Criteria
Scrum (simplified)
Sitemap
DoGo mapping
#YDW

9. Every minute you spendin planning saves10
minutes in execution
#YDW
―― Brian Tracy

10. Why kitchen?
#YDW
Design and kitchen – preparations
are important. You should have
everything ready before you start
„cooking“ your design.

11. Let’s get planning with..
#YDW

12. User Flow
#YDW
Aka the user journey. It’s the path an
user follows through your website to
complete a task, like making a
purchase or subscribing to a
newsletter.
Where to begin?

13. User Flow
#YDW
Entry point – an user comes from
google, direct link, paid advertising,
social media, blog post.
How they end on up on your site
determines their needs and they
need to be treated differently.

14. Example
#YDW
User sees a paid image
advertisment on facebook about a
new phone.
User clicks on ad and lands on the
landing page
User is easily able to make a
purchase from the landing page.

15. Example
#YDW

16. Design your site for flow
#YDW
Have clear goals you wish your
users to reach.
Test.

17. Storyboards
#YDW
Another way of visualizing

18. Storyboards
#YDW

19. User Story
#YDW
A user story is a short description of somethingthat your
customer will do whenthey come to yourwebsite, focused on
thevalue or result they get from doing thisthing.

20. User Story
#YDW
written from thepoint of view of a person using your website or
application

21. User Story
#YDW
User stories should be written at the
beginning of your project, before you start
making any decisions about technical
solutions or design. Once they’re written
they should be prioritized, from most
important to your customer to least
important.

22. Acceptance criteria
#YDW
Acceptance criteria are the requirements
that have to be met for a story to be
assessed as complete.

23. Acceptance criteria
#YDW
Define the boundaries for a user story or a
feature.
Help the team gain a shared
understanding of the story.
Help designers know when
to stop adding more functionality.

24. Sitemap
#YDW
Is a list of pages accessible for users.

25. Sitemap
#YDW

26. Why you should sitemap
#YDW
It’s a centralized planning tool that can help
organize and clarify the content that needs to be
on your site, as well as help you eliminate
unnecessary pages.
Helps avoid dublicate pages on your site
Gets everyone on the same page.

27. DoGo mapping
#YDW
Name: the name of the view
Do: actions for the view
Go: where you can go from this view

28. Example
#YDW

29. SCRUM (simplified)
#YDW

30. Brainstorming
#YDW
Don’t filter anything
Write down everything
Limit your brainstorm by time
Example

31. Brainstorming
#YDW
Thoughts on a shoe store.

32. Brainstorming
#YDW
Thoughts on a shoe store.
Huge call to action BUY button, HERO,
grids, payment options visualised, log in,
fancy images of fancy shoes, color pink, etc.

33. Must have / nice to have
#YDW

34. Must have / nice to have
#YDW
MustHave
Everything your site
cannot exist without
Main goal should be
reflected here. If it is
getting money, write it
down!
NiceToHave
Details which would
boost the site but
are not neccessary
in the current
moment.

35. #YDW

36. Prioritizing
#YDW
Prioritize the tags and start from the top

37. Make a site you would love to
use yourself
#YDW

38. ASSIGNMENT
Select any of these previously
mentioned methods and plan
your website.
Google for:
Scrum, DoGo mapping, user
flow, user story, sitemap.
#YDW