ux capstone prototypingfaculty.wwu.edu/schadeb/id460/website/images/prototyping.pdfprototyping...
TRANSCRIPT
UX CAPSTONE
PROTOTYPINGsketching + wireframing and usability
THE NEXT STEP
After research comes 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.
01. research02. content outline03. sketching04. prototyping05. testing06. visual design07. testing08. build09. testing
PRODUCT ROADMAPA product roadmap is a high-level plan that describes how the product is likely to grow.
PROTOTYPING TOOLS
BEST WIREFRAMING TOOLS
balsamiqaxurevisioindesignomnigrafflesketch3principleflintouxpininvision
WIREFRAMESA visual guide that represents the skeletal
framework of an interface.
LO FIDELITY
HI FIDELITY
SWITCH WIREFRAMES
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
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
upward would like to accessome 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 appearto people looking for jobs.
Tap on the card to view fulljob 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 CompanyAdd Location
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
Inbox/ChatMatch Screen
Send
JobNameInbox
Settings
Settings
Back
Back
You’re a Match!
Connect
Keep Looking
Settings
Edit
Talent
Employer
Import Company Info
?
This is how your job will appearto people looking for jobs.
Tap on the card to view fulljob description.
DoneNextCancel
Add Job / Card Full Job Description PreviewJob Card Preview
Add CompanyAdd Location
Add Logo
Add description
Add description
Add description
Add description
JobAdd Job JobBack
Select Job (only when there ismore than one job to choose from)
DoneSelect Job
Select a job for this candidate:
+ Add Job
Edit
Import Company Info
?
upward would like to accessome of your info:
Upward
username
password
Allow Access
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.
This is how your job will appearto people looking for jobs.
Tap on the card to view fulljob description.
DoneNextCancel
Add Job / Card Full Job Description PreviewJob Card Preview
Add CompanyAdd Location
Add Logo
Add description
Add description
Add description
Add description
JobAdd Job JobBack
Select Job (only when there ismore 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
upward would like to accessome of your linkedin info:
Upward
username
password
Allow Access
This is how your job will appearto people looking for jobs.
Tap on the card to view fulljob description.
DoneNextCancel
Add Job / Card Full Job Description PreviewJob Card Preview
Add CompanyAdd Location
Add Logo
Add description
Add description
Add description
Add description
JobAdd Job JobBack
Select Job (only when there ismore than one job to choose from)
DoneSelect Job
Select a job for this candidate:
+ 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
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 profile will appearanonymously to emplopyers.
Done
Swipe right to “like”
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
Pre-Sign Up Sign Up Cards
Preview Upward Upward Upward
Match Screen
Job Description
Name
ChatInbox
Inbox/ChatMatch Screen
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
upward
Sign in as TalentSign in as Employer
Sign In with LinkedIn
upward would like to accessome of your linkedin info:
Allow AccessSign In with LinkedIn Sign In with LinkedIn
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.
upward
Sign in as TalentSign in as Employer
upward would like to accessome of your linkedin info:
Allow AccessOkay
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.
cards screen interstitial matchscreen
chat screen
username
password
username
password
Pre-Sign Up
ATT 100%9:25 PM
Senior AccountExecutive
Computer & Network Security
DIGITAL MARKETING SEO
ONLINE ADVERTISING
Brooklyn, NY
3 yrs. experienceCipherTechsEmtec Federal
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
DIGITAL MARKETING SEO
ONLINE ADVERTISING
Brooklyn, NY
3 yrs. experienceCipherTechsEmtec Federal
University of Maryland
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
University of Maryland
Digital Marketing
SEO
Online Advertising
Marco Calcara
3 yrs
Company
Skill
Skill
ATT 100%9:25 PM
Senior AccountExecutive
Computer & Network Security
DIGITAL MARKETING SEO
ONLINE ADVERTISING
Brooklyn, NY
3 yrs. experienceCipherTechsEmtec Federal
University of Maryland
Preview DoneEdit
ATT 100%9:25 PM
Senior Account ExecutiveComputer & Network Security
DIGITAL MARKETING SEO
ONLINE ADVERTISING
Brooklyn, NY
3 yrs. experienceCipherTechsEmtec Federal
University of Maryland
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
University of Maryland
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
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,483
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.
