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

Post on 07-Aug-2015

46 views 1 download

Tags:

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

Order in the kitchen

By Fred Moritz

#YDW

2 agreements

#YDW

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

Research

#YDW

Personas

#YDW

Up to date trends

#YDW

Visual planning and organizing.

#YDW

User FlowStoryboardUser Story

Acceptance CriteriaScrum (simplified)

SitemapDoGo mapping

#YDW

Every minute you spend in planning saves 10 minutes

in execution

#YDW

―― Brian Tracy

Why kitchen?

#YDW

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

Let’s get planning with..

#YDW

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?

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.

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.

Example

#YDW

Design your site for flow

#YDW

Have clear goals you wish your users to reach.

Test.

Storyboards

#YDW

Another way of visualizing

Storyboards

#YDW

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.

User Story

#YDW

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

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.

Acceptance criteria

#YDW

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

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.

Sitemap

#YDW

Is a list of pages accessible for users.

Sitemap

#YDW

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.

DoGo mapping

#YDW

Name: the name of the view

Do: actions for the view

Go: where you can go from this view

Example

#YDW

SCRUM (simplified)

#YDW

Brainstorming

#YDW

Don’t filter anything

Write down everything

Limit your brainstorm by time

Example

Brainstorming

#YDW

Thoughts on a shoe store.

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.

Must have / nice to have

#YDW

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.

#YDW

Prioritizing

#YDW

Prioritize the tags and start from the top

Make a site you would love to use yourself

#YDW

ASSIGNMENT

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

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

#YDW