5.0 interaction design product · pdf file 5.0 interaction design product design principles of...

5.0 INTERACTION DESIGN

PRODUCT DESIGN

PRINCIPLES OF INTERACTION DESIGN | SUMMER 2014

DESIGNISM #13

BEFORE ANYTHING ELSE, PREPARATION IS THE KEY TO SUCCESS. – ALEXANDER GRAHAM BELL

THE NEXT STEP

After the research comes the product design.

Its the development of the design concept, the integration of user’s goals into the product features, the marketing strategy, the rapid prototyping and the iterations of fixes based on evaluations.

PLANNING

PRODUCT ROADMAP A product roadmap is a high-level plan that describes how the product is likely to grow.

WORKSHOP

IDEATION + VISUAL RESEARCH Visual research methods allow designers to

source inspiration for their projects.

BRAINSTORMING

WORD LISTS

MIND MAPPING

VISUAL BRAIN DUMP

FORCED CONNECTIONS

MOODBOARD

BRAINSTORMING

WORD LISTS

MIND MAPPING

VISUAL BRAIN DUMP

FORCED CONNECTIONS

MOODBOARD

TOOLS

WORKING IN TEAMS Use technology to your advantage,

collaboration has never been easier.

GOOGLE DRIVE

GOOGLE DOCS

GOOGLE SLIDES

YAMMER

DROPBOX

SKYPE

INVISION

DESIGN

WIREFRAMES A visual guide that represents the skeletal

framework of an interface.

LO FIDELITY

HI FIDELITY

LO FIDELITY

HI FIDELITY

CASE STUDY SWITCH

Switch jobs with one swipe. An anonymous job search that discreetly discovers employment opportunities in tech, startup, digital media sales, business development, marketing job and advertising.

Swipe left to “pass”

9 JOBS REMAINING

upward would like to acces some of your linkedin info:

Upward

upward

Talent

Employer

How Upward Works

Anonymously "like" or "pass" on jobs that upward suggests.

We only connect you when the feeling is mutual.

Quickly chat with the people you will be working with. username

password

This is how your job will appear to people looking for jobs.

Tap on the card to view full job description.

Welcome! This is how your profile appears to talent who you’ve matched.

Next

Swipe right to “like”

NextProfile

NextCancel

Add Job / Card Full Job Description Preview

Job Card PreviewJob Poster ProfileSign In with LinkedInIntro 2nd Card is swipe left demo Talent Card1st Card is swipe right demo

Employer Wireframes LinkedIn Login

Allow Access

Pre-Sign Up Sign Up Cards

Add Company Add Location

Add Logo

Add description

Add description

Add description or import from....

Add description

Upward Job Upward Upward Upward

Add Job

Add Job

Add a job and edit the description for potential

talent to see!

Done

Edit Profile

Profile

DoneJobBack

Match Screen

Talent Full Profile

Name

ChatInbox

Inbox/ChatMatch Screen

Send

JobNameInbox

Settings

Settings

Back

Back

You’re a Match!

Connect

Keep Looking

Settings

Back

Edit

Swipe left to “pass”

9 JOBS REMAINING

upward

How Upward Works

Anonymously "like" or "pass" on jobs that upward suggests.

We only connect you when the feeling is mutual.

Quickly chat with the people you will be working with.

Welcome! Import your info from LinkedIn

to create your profile.

Or tap anywhere to edit! Swipe right to “like”

Done

Job Poster ProfileIntro 2nd Card is swipe left demo Talent Card1st Card is swipe right demo

Employer Wireframes Facebook Login

Pre-Sign Up Sign Up Cards

Upward Upward Upward Upward

LinkedIn authorization

Match Screen

Talent Full Profile

Name

ChatInbox

Inbox/ChatMatch Screen

Send

JobNameInbox

Settings

SettingsBack

Back

You’re a Match!

Connect

Keep Looking

Settings

Li

Li

Talent

Employer

f

f

LinkedIn

upward would like to acces some of your linkedin info:

Upward

username

password

Allow Access

Swipe left to “pass”

9 JOBS REMAINING

upward

How Upward Works

Anonymously "like" or "pass" on jobs that upward suggests.

We only connect you when the feeling is mutual.

Quickly chat with the people you will be working with.

This is how your job will appear to people looking for jobs.

Tap on the card to view full job description.

Done

Swipe right to “like”

NextCancel

Add Job / Card Full Job Description PreviewJob Card Preview

Sign upIntro 2nd Card is swipe left demo Talent Card1st Card is swipe right demo

Employer Wireframes All Social Media Login

Pre-Sign Up Sign Up Cards

Add Company Add Location

Add Logo

Add description

Add description

Add description

Add description

Upward

Job

Upward Upward Upward

Add Job JobBack

Select Job (only when there is more than one job to choose from)

Authorization

DoneSelect Job

Match Screen

Select a job for this candidate:

+ Add Job

Talent Full Profile

Name

ChatInbox

Inbox/ChatMatch Screen

Send

JobNameInbox

Settings

Settings

Back

Back

You’re a Match!

Connect

Keep Looking

Settings

Edit

Talent

Employer

LinkedIn

Import Company Info

?

This is how your job will appear to people looking for jobs.

Tap on the card to view full job description.

DoneNextCancel

Add Job / Card Full Job Description PreviewJob Card Preview

Add Company Add Location

Add Logo

Add description

Add description

Add description

Add description

JobAdd Job JobBack

Select Job (only when there is more than one job to choose from)

DoneSelect Job

Select a job for this candidate:

+ Add Job

Edit

Import Company Info

?

upward would like to acces some of your info:

Upward

username

password

Allow Access

Facebook

Twitter

username

password

Or, sign up with email

Authorization

Create an account with your corporate email.

Upward

username

password

Okay

Welcome! This is how your profile appears to talent who you’ve matched.

Next

Job Poster Profile

Upward

Tap anywhere to edit.

This is how your job will appear to people looking for jobs.

Tap on the card to view full job description.

DoneNextCancel

Add Job / Card Full Job Description PreviewJob Card Preview

Add Company Add Location

Add Logo

Add description

Add description

Add description

Add description

JobAdd Job JobBack

Select Job (only when there is more than one job to choose from)

DoneSelect Job

Select a job for this candidate:

+ Add Job

Edit

Import Company Info

?

Swipe left to “pass”

9 JOBS REMAINING

upward

How Upward Works

Anonymously "like" or "pass" on jobs that upward suggests.

We only connect you when the feeling is mutual.

Quickly chat with the people you will be working with.

Welcome! Import your info from LinkedIn

to create your profile.

Or tap anywhere to edit!

Swipe right to “like”

Done

Job Poster Profile

Intro 2nd Card is swipe left demo Talent Card1st Card is swipe right demo

Employer Wireframes Start w/Candidates

Pre-Sign Up Cards

Upward

Upward Upward Upward

LinkedIn authorization

Match Screen

Talent Full Profile

Name

ChatInbox

Inbox/ChatMatch Screen

Send

JobNameInbox

Settings

SettingsBack

Back

You’re a Match!

Connect

Keep Looking

Settings

Talent

Employer

f

f

LinkedIn

upward would like to acces some of your linkedin info:

Upward

username

password

Allow Access

This is how your job will appear to people looking for jobs.

Tap on the card to view full job description.

DoneNextCancel

Add Job / Card Full Job Description PreviewJob Card Preview

Add Company Add Location

Add Logo

Add description

Add description

Add description

Add description

JobAdd Job JobBack

Select Job (only when there is more than one job to choose from)

DoneSelect Job

Select a job for this candidate:

+ Add Job

Edit