BIH - Design process

29
design process BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com

description

UX Bootcamp @ Microsoft Innovation Center + Botswana Innovation Hub

Transcript of BIH - Design process

Page 1: BIH -  Design process

design process

BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com

Page 2: BIH -  Design process

the design process

Page 3: BIH -  Design process

WIRED

Page 4: BIH -  Design process
Page 5: BIH -  Design process

Research the problem.

Learn about your

users.

Generate lots of

ideas for what

problem to solve.

Ideate on how

your product can

do to solve the

problem

Narrow down

your ideas to a

few concepts

for exploration.

Test these

concepts

with real

people.

Get

feedback.

Refine your

concept to

incorporate

feedback.

Apply visual

design to

concepts

Create your final

solution and

plan for how to

deliver to the

users

the design process

Page 6: BIH -  Design process

Research the

problem. Learn

about your users.

Investigate

competitive

products

Create user

scenarios.

Prioritize user

needs.

Determine

product

requirements

Sketch Many

Ideas

Get Initial

Feedback

Build a fast

prototype

Test

prototypes

with users

Use Feedback to

Improve Design.

Refine Visual

Treatment of

Design

the design process for software

Choose

concepts

Sketch low

fidelity

mockups .

Page 7: BIH -  Design process

http://mariamz.files.wordpress.com/2011/05/salul.jpg

Page 8: BIH -  Design process

Boagworld.com

Page 9: BIH -  Design process

Copenhagen Institute of Interaction Design

Page 10: BIH -  Design process

strategyinternet-marketing.co.uk

Page 11: BIH -  Design process

Tim Brown

Page 12: BIH -  Design process
Page 13: BIH -  Design process

Ww2.warwick.ac.uk

Page 14: BIH -  Design process

Aplayspace.com

Page 15: BIH -  Design process
Page 16: BIH -  Design process

http://mike.mediaintensive.com/wp-content/uploads/2013/08/Alert-wires-1.gif

Page 17: BIH -  Design process

QuickSprout

Page 18: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

Site visits

Jed Farlow

Page 19: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

User interviews

Wikipedia

Page 20: BIH -  Design process

Mindmap

Page 21: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

Card sorting

Copenhagen Institute of Design

Page 22: BIH -  Design process

Card sorting

Page 23: BIH -  Design process

low fidelity sketches

InspireUX.com

Page 24: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

Paper prototype

http://www2.warwick.ac.uk/

Page 25: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

Paper prototype

Norman Nielson Group

Page 26: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

User testing

Dustin Larimer

Page 27: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

Usability testing

Usabilitygeek.com

Page 28: BIH -  Design process

flows

Page 29: BIH -  Design process

MICROSOFT IDEACAMP UX WORKSHOP

wireframes

http://www.behance.net/gallery/WIREFRAMES/6771739