Your Design Works - Order in the kitchen - plan your website.

38
Order in the kitchen By Fred Moritz #YDW

Transcript of Your Design Works - Order in the kitchen - plan your website.

Page 1: Your Design Works - Order in the kitchen - plan your website.

Order in the kitchen

By Fred Moritz

#YDW

Page 2: Your Design Works - Order in the kitchen - plan your website.

2 agreements

#YDW

Page 3: Your Design Works - Order in the kitchen - plan your website.

Fred’s stats

#YDW

Level 22 in lifePlanet earth, sector Estonia24/7 designer:

Work, hobbies, fun

Personal motivation – developing in the field of design

Deals in mobile, web, print & UI/UX, gamification

Page 4: Your Design Works - Order in the kitchen - plan your website.

Research

#YDW

Page 5: Your Design Works - Order in the kitchen - plan your website.

Personas

#YDW

Page 6: Your Design Works - Order in the kitchen - plan your website.

Up to date trends

#YDW

Page 7: Your Design Works - Order in the kitchen - plan your website.

Visual planning and organizing.

#YDW

Page 8: Your Design Works - Order in the kitchen - plan your website.

User FlowStoryboardUser Story

Acceptance CriteriaScrum (simplified)

SitemapDoGo mapping

#YDW

Page 9: Your Design Works - Order in the kitchen - plan your website.

Every minute you spend in planning saves 10 minutes

in execution

#YDW

―― Brian Tracy

Page 10: Your Design Works - Order in the kitchen - plan your website.

Why kitchen?

#YDW

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

Page 11: Your Design Works - Order in the kitchen - plan your website.

Let’s get planning with..

#YDW

Page 12: Your Design Works - Order in the kitchen - plan your website.

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?

Page 13: Your Design Works - Order in the kitchen - plan your website.

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.

Page 14: Your Design Works - Order in the kitchen - plan your website.

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.

Page 15: Your Design Works - Order in the kitchen - plan your website.

Example

#YDW

Page 16: Your Design Works - Order in the kitchen - plan your website.

Design your site for flow

#YDW

Have clear goals you wish your users to reach.

Test.

Page 17: Your Design Works - Order in the kitchen - plan your website.

Storyboards

#YDW

Another way of visualizing

Page 18: Your Design Works - Order in the kitchen - plan your website.

Storyboards

#YDW

Page 19: Your Design Works - Order in the kitchen - plan your website.

User Story

#YDW

A user story is a short description of something that your customer will do when they come to your website, focused on the value or result they get from doing this thing.

Page 20: Your Design Works - Order in the kitchen - plan your website.

User Story

#YDW

written from the point of view of a person using your website or application

Page 21: Your Design Works - Order in the kitchen - plan your website.

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.

Page 22: Your Design Works - Order in the kitchen - plan your website.

Acceptance criteria

#YDW

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

Page 23: Your Design Works - Order in the kitchen - plan your website.

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.

Page 24: Your Design Works - Order in the kitchen - plan your website.

Sitemap

#YDW

Is a list of pages accessible for users.

Page 25: Your Design Works - Order in the kitchen - plan your website.

Sitemap

#YDW

Page 26: Your Design Works - Order in the kitchen - plan your website.

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.

Page 27: Your Design Works - Order in the kitchen - plan your website.

DoGo mapping

#YDW

Name: the name of the view

Do: actions for the view

Go: where you can go from this view

Page 28: Your Design Works - Order in the kitchen - plan your website.

Example

#YDW

Page 29: Your Design Works - Order in the kitchen - plan your website.

SCRUM (simplified)

#YDW

Page 30: Your Design Works - Order in the kitchen - plan your website.

Brainstorming

#YDW

Don’t filter anything

Write down everything

Limit your brainstorm by time

Example

Page 31: Your Design Works - Order in the kitchen - plan your website.

Brainstorming

#YDW

Thoughts on a shoe store.

Page 32: Your Design Works - Order in the kitchen - plan your website.

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.

Page 33: Your Design Works - Order in the kitchen - plan your website.

Must have / nice to have

#YDW

Page 34: Your Design Works - Order in the kitchen - plan your website.

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.

Page 35: Your Design Works - Order in the kitchen - plan your website.

#YDW

Page 36: Your Design Works - Order in the kitchen - plan your website.

Prioritizing

#YDW

Prioritize the tags and start from the top

Page 37: Your Design Works - Order in the kitchen - plan your website.

Make a site you would love to use yourself

#YDW

Page 38: Your Design Works - Order in the kitchen - plan your website.

ASSIGNMENT

Select any of these previously mentioned methods and plan your website.

Google for:Scrum, DoGo mapping, user flow, user story, sitemap.

#YDW