5.0 interaction design product...

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 ROADMAPA product roadmap is a high-level plan that describes how the product is likely to grow.

WORKSHOP

IDEATION + VISUAL RESEARCHVisual 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 TEAMSUse technology to your advantage,

collaboration has never been easier.

GOOGLE DRIVE

GOOGLE DOCS

GOOGLE SLIDES

YAMMER

DROPBOX

INVISION

DESIGN

WIREFRAMESA 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 accessome 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 appearto people looking for jobs.

Tap on the card to view fulljob description.

Welcome!This is how your profile appearsto 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 CompanyAdd 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 thedescription 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


9 JOBS REMAINING

upward

How Upward Works



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


Upward Upward Upward Upward

LinkedIn authorization

Match Screen

Talent Full Profile

Name

ChatInbox


Send

JobNameInbox

Settings

SettingsBack

Back

You’re a Match!

Connect

Keep Looking

Settings

Li

Li

Talent

Employer

f

f

LinkedIn


Upward

username

password

Allow Access


9 JOBS REMAINING

upward

How Upward Works






Done


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



Add Logo

Add description

Add description

Add description

Add description

Upward

Job

Upward Upward Upward

Add Job JobBack

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

Authorization

DoneSelect Job

Match Screen

Select a job for this candidate:

+ Add Job

Talent Full Profile

Name

ChatInbox


Send

JobNameInbox

Settings

Settings

Back

Back

You’re a Match!

Connect

Keep Looking

Settings

Edit

Talent

Employer

LinkedIn

Import Company Info

?



DoneNextCancel



Add Logo

Add description

Add description

Add description

Add description

JobAdd Job JobBack


DoneSelect Job


+ Add Job

Edit

Import Company Info

?

upward would like to accessome of your info:

Upward

username

password

Allow Access

Facebook

Twitter

username

password

Or, sign up with email

Authorization

Create an account with yourcorporate email.

Upward

username

password

Okay

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

Next

Job Poster Profile

Upward

Tap anywhere to edit.



DoneNextCancel



Add Logo

Add description

Add description

Add description

Add description

JobAdd Job JobBack


DoneSelect Job


+ Add Job

Edit

Import Company Info

?


9 JOBS REMAINING

upward

How Upward Works




Welcome!Import your info from LinkedIn

to create your profile.

Or tap anywhere to edit!


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


Send

JobNameInbox

Settings

SettingsBack

Back

You’re a Match!

Connect

Keep Looking

Settings

Talent

Employer

f

f

LinkedIn


Upward

username

password

Allow Access



DoneNextCancel



Add Logo

Add description

Add description

Add description

Add description

JobAdd Job JobBack


DoneSelect Job


+ Add Job

Edit

Import Company Info

?

Profile

Jobs

Settings

Log out

Profile

Jobs

Settings

Log out

Profile

Jobs

Settings

Log out

Profile

Jobs

Settings

Log out


9 JOBS REMAINING


Upward

upward

Talent

Employer

How Upward Works



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

password

This is how your profile will appearanonymously to emplopyers.

Done


Anonymous Profile PreviewFull Profile previewSign In with LinkedInIntro 2nd Card is swipe left demo Job Card1st Card is swipe right demo

Talent View Wireframes

Allow Access


Preview Upward Upward Upward

Match Screen

Job Description

Name

ChatInbox


Send

JobNameInbox

Settings

Settings

BackEdit

Back

You’re a Match!

Connect

Keep Looking

Settings

This is how your profile appearsto employers who you’ve matched.

NextFull Profile

Edit Anonymous Profile

DoneEdit

BRANDING WORD LIST

Smart

Sharp

Real

Quick

Easy-going

Discreet

Fun

Casual

Engaging

Free

Incognito

Happy

Effortless

Connecting

Fast

Deep

Useful

Sneaky

Funny

Edgy

Humorous

Ambitious

Modern

Sassy

These words were the most common in the questionnaire in both brand and customer personality.

3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT

Senior AccountExecutive

Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k

OUTSIDE SALES

MANAGEMENT


Media

9 JOBS REMAINING

New York City, NY

5-7 yrs. experience

MARKETING

80-90k

COLOR / TYPE GUIDE

r 240

g 84

b 54

r 147

g 149

b 152

r 230

g 231

b 232

r 99

g 100

b 102

r 177

g 179

b 182

gotham rounded book15 pt. size / 17pt. line height

gotham rounded book7 pt. size / 13pt. line height

gotham rounded book12 pt. size

gotham rounded medium6.5 pt. size / all caps

gotham rounded medium6 pt. size / 25 pt. letter spacing

3

ATT 100%9:25 PM

upward


Computer & Network Security

9 PROSPECTS REMAINING

DIGITAL MARKETING SEO

ONLINE ADVERTISING

Brooklyn, NY

3 yrs. experienceCipherTechsEmtec Federal

BS, University of Maryland

3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT


Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k

Job Card Candidate Card

Swipe rightto “like” a card

if you areinterested in

learning more

Swipe leftto “pass” if its

not for you

Tap to “pass” Tap to “like”

Settings Matches & Chat



learning more


not for you



3

ATT 100%9:25 PM

upward





ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT


Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k




learning more


not for you


This is a job card.

Tap anywhere to viewa full description.




learning more


not for you


3

ATT 100%9:25 PM

upward





ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

OUTSIDE SALES

MANAGEMENT


Media

9 JOBS REMAINING

i

New York City, NY

5-7 yrs. experience

MARKETING

80-90k




learning more


not for you

Tap to “pass”



learning more


not for you


Tap to “like” Tap to “pass” Tap to “like”


1 2

3

This is a job card.


This is a job card.


This is a job card.


This is a job card.


This is a job card.



upward

Sign in as TalentSign in as Employer

Sign In with LinkedIn


Allow AccessSign In with LinkedIn Sign In with LinkedIn

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

suggests.


Quickly chat with the people you will be working

with.

upward

Sign in as TalentSign in as Employer


Allow AccessOkay

How Upward Works




cards screen interstitial matchscreen

chat screen

username

password

username

password

Pre-Sign Up

ATT 100%9:25 PM




ONLINE ADVERTISING

Brooklyn, NY


University of Maryland

Preview DoneEdit

This is how your profile will appearto employers before you are a match.

ATT 100%9:25 PM

Senior Account ExecutiveComputer & Network Security


ONLINE ADVERTISING

Brooklyn, NY



Profile DoneEdit

Preview and edit your profile.

ATT 100%9:25 PM

Edit Profile Done

This is how your profile will appearto employers before you are a match.

Items with are kept hidden.

Brooklyn, NY

CipherTechs

Emtec Federal

Marco Calcara

Senior Account Executive

Computer Network & Security

experience


Digital Marketing

SEO

Online Advertising

Marco Calcara

3 yrs

Company

Skill

Skill

ATT 100%9:25 PM




ONLINE ADVERTISING

Brooklyn, NY



Preview DoneEdit

ATT 100%9:25 PM

Senior Account ExecutiveComputer & Network Security


ONLINE ADVERTISING

Brooklyn, NY



Preview DoneEdit

Marco Calcara

ATT 100%9:25 PM

Edit DonePreview

Edit and preview your profile.Items with are kept hidden

until you are a match.

Brooklyn, NY

CipherTechs

Emtec Federal

Marco Calcara

Senior Account Executive

Computer Network & Security

experience


Digital Marketing

SEO

Online Advertising

3 yrs

Company

Skill

Skill

Anonymous Public AnonymousPublic

Edit > Preview (2 modes)Preview public profile > editPreview public profile > preview anonymous profile

3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING

STRATEGYVENTURE CAPITAL

San Fransisco Bay Area

9 yrs. experienceTwitterMitsui Global InvestmentGoogle

MBA, University of Pennsylvania

AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



Swipe e�ects - color options

3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



3

ATT 100%9:25 PM

upward

SalesManager

Internet


ONLINE ADVERTISING





AccountExecutive



ONLINE ADVERTISING

Brooklyn, NY



1 2 3

4 5 6

STRATEGY

SIMPLE AND USABLE

SIMPLICITY

Simple products are easy to use, so they find a popular audience.

Simple products are reliable, so people develop an attachment to them.

Simple products are adaptable, so they end up being used in surprising ways.

COMPLEXITY

The more features you add, the lesschance a new feature will be of real value to anyone.

Increased complexity means userscan’t easily find the features that areimportant to them.

CONTROL

The key need for users is to feel thatthey’re in control of the technology they are using, and in control of their lives. Your design shouldn’t interfere with that control.

Simple experiences make users feelconfident that they’re making goodchoices.

DESIGNISM #14

THE MORE USERS’ EXPECTATIONS PROVE RIGHT, THE MORE THEY WILL FEEL IN CONTROL OF THE SYSTEM AND THE MORE THEY WILL LIKE IT.– JACOB NIELSEN

SIMPLE IS NOT THE SAME AS USABLE

EXTREME SIMPLICITY

To be simple, you have to aim forsomething more extreme than theregular goals for usability.

USABILITY

SPECIFIC GROUP OF PEOPLE

EASY TO USE

RESPONDS QUICKLY

UNDERSTOOD QUICKLY

WORKS RELIABLY

COMPLETE INFORMATION

WORKS IN A USER TEST

SIMPLICITY

ANYONE CAN USE IT

EFFORTLESS TO USE

RESPONDS INSTANTLY

UNDERSTOOD AT A GLANCE

WORKS ALWAYS

JUST ENOUGH INFORMATION

WORKS IN CHAOS

LAWS OF SIMPLICITY

In 2006, John Maeda, currently the president of Rhode Island School of Design, published Laws of Simplicity to find ways for people to simplify their life in the face of growing complexity.

He was born in Seattle—whoop whoop!, worked as a software engineer at MIT before going to work at RISD, and is a practicing artist in electronic media.

LAWS OF SIMPLICITY

1. THE SIMPLEST WAY TO ACHIEVE SIMPLICITY IS THROUGH THOUGHTFUL REDUCTION.

LAWS OF SIMPLICITY

2. ORGANIZATION MAKES A SYSTEM OF MANY APPEAR FEWER. AN EFFECTIVE SCHEME FOR ORGANIZATION IS NECESSARY TO ACHIEVE DEFINITIVE SUCCESS IN TAMING COMPLEXITY.

LAWS OF SIMPLICITY

3. TIME. WHEN ANY INTERACTION WITH PRODUCTS OR SERVICE PROVIDERS HAPPENS QUICKLY, WE ATTRIBUTE THIS EFFICIENCY TO THE PERCEIVED SIMPLICITY OF EXPERIENCE.

LAWS OF SIMPLICITY

4. LEARNING. KNOWLEDGE MAKES EVERYTHING SIMPLER. DIFFICULT TASKS SEEM EASIER WHEN THEY ARE NEED TO KNOW RATHER THAN NICE TO KNOW.

LAWS OF SIMPLICITY

5. DIFFERENCES. SIMPLICITY AND COMPLEXITY NEED EACH OTHER. THE MORE COMPLEXITY THERE IS IN THE MARKET, THE MORE THAT SOMETHING SIMPLER STANDS OUT.

LAWS OF SIMPLICITY

6. CONTEXT. WHAT LIES IN THE PERIPHERY OF SIMPLICITY IS DEFINITELY NOT PERIPHERAL. UNDERSTAND THE SPACE AROUND THE USER, THE DEVICE, AND THE TASK.

LAWS OF SIMPLICITY

7. MORE EMOTIONS ARE BETTER THAN LESS. IF THEY DON’T LOVE IT, THEY HATE IT.

LAWS OF SIMPLICITY

8. IN SIMPLICITY WE TRUST. SIMPLE FEELS HONEST AND TRANSPARENT.

LAWS OF SIMPLICITY

9. FAILURE. SOME THINGS CAN NEVER BE MADE SIMPLE. NOT ALL PROBLEMS HAVE SIMPLE SOLUTIONS. NOT EVERYONE VIEWS SIMPLICITY THE SAME.

LAWS OF SIMPLICITY

10. THE ONE. SIMPLICITY IS ABOUT SUBTRACTING THE OBVIOUS, AND ADDING THE MEANINGFUL. FOCUS ON WHAT MATTERS, CREATE CLARITY AND PURPOSE FOR THE USER.

4 STRATEGIES FOR SIMPLICITY

RemoveOrganizeHideDisplace

REMOVE

According to a recent study, 64% of software features are “never or rarely used.”

Removing or omitting features can lead to successful products, and allows designers to focus on solving a few important problems really well.

FOCUS ON WHAT’S CORE

KILL LAME FEATURES

DON’T “WHAT IF...” ABOUT FUTURE FEATURES

PRIORITIZE FEATURES

CHOICE OVERWHELMS USERS

GET RID OF DISTRACTION AND CLUTTER

REMOVE WORDS

SIMPLIFY SENTENCES

ORGANIZE

Organizing is often the quickest way to make things simpler.

Try to emphasize just one or two important things.

CHUNK INFORMATION INTO GROUPS

ORGANIZE FOR BEHAVIOR

MAKE STRONG DISTINCTIONS

UTILIZE GRID AND HIERARCHY

HIDE

Hiding means putting a barrier between a user and the feature.

You must carefully choose what to hide so not to inconvenience the user.

HIDE INFREQUENT BUT NECESSARY ITEMS

HIDE CUSTOMIZATIONS, OPTIONS AND SETTINGS.

GIVE CUES AND CLUES

MAKE THINGS EASY TO FIND

DISPLACE

Put features on a different devicealtogether.

However, if you displace all the features then its hard to guess what the product can actually do.

DESIGNISM #15

THE DESIGN IS DONE WHEN THE PROBLEM GOES AWAY.– JASON FRIED

5.0 interaction design product...

Documents