+

From Ideas
to Prototype
to Product

CS2002S: Mobile
Development and Design

CSC2002S Melissa Densmore, UCT

 +
4A: Ideation
CSC2002S: Mobile Design and Development
Prototyping

CSC2002S Melissa Densmore, UCT 2

 3

+
What’s Next?
Image Credit: http://blog.firebrandtalent.com/2014/12/3-powerful-ways-
to-turn-your-good-ideas-into-great-ideas/

Melissa Densmore, UCT CSC2002S

+

Build it and they will

come
https://xkcd.com/585/

Melissa Densmore, UCT CSC2002S

 5

Melissa Densmore, UCT CSC2002S

+ 6

Design Cycle

Design
Evaluate &
Analysis

Prototype

Melissa Densmore, UCT CSC2002S

+ 7

Iteration

Christi Hagen, UX Project with Eaton Corporation, http://christihagen.com/Capstone.html

Melissa Densmore, UCT CSC2002S
+ 8

Eval: Understand your users

Where are
they?

What are
their
constraints?

Who are
they?

Melissa Densmore, UCT CSC2002S

+ 9

Design: Create Personas

◼ Easier to generalize about

fictional people
◼ What would Harry Potter do?

◼ General users have too

many conflicting goals

◼ Specific personas have

clear, well-articulated
goals.

Melissa Densmore, UCT CSC2002S

+ 10

Design: Define the Problem

Focus on the problem

- choose the appropriate framing

“bicycle cup holders”

vs
“helping cyclists to drink coffee safely”
Or, helping users track prepaid meter usage
Or, helping graphics designers place virtual objects

Melissa Densmore, UCT CSC2002S

+ Ideation ◼ Stretch mental muscles
◼ Loosen up with simple games
◼ Do homework (toy store? expert
videos? chocolate room?)
◼ Seed with related ideas/objects

◼ Get physical
◼ Sketch
◼ Make models
◼ Act out

◼ IDEO rules
◼ One conversation at a time
◼ Stay focused
◼ Encourage wild ideas
◼ Defer judgment
◼ Build upon ideas from others

Aim for Quantity!

hope for quality
Melissa Densmore, UCT CSC2002S
+
◼ Stretch mental muscles
◼ Loosen up with simple games
◼ Do homework (toy store? expert
videos? chocolate room?)
◼ Seed with related ideas/objects

◼ Get physical
◼ Sketch
◼ Make models
◼ Act out

◼ IDEO rules
Exercise ◼ One conversation at a time
◼ Stay focused
Problem Statement: ◼ Encourage wild ideas
Help students and ◼ Defer judgment
◼ Build upon ideas from others
staff find their lecture
and exam venues.
Aim for Quantity!
hope for quality

Melissa Densmore, UCT CSC2002S

+ 13

4B: Sketches
Melissa Densmore, UCT CSC2002S
+ 14

Design: Sketch it Out!

Michael Sagan
Trek Bicycles

Time Trials Bike

2003

Quick
Disposable
Plentiful
Low-resolution

Melissa Densmore, UCT CSC2002S

+ 15

What Makes a Sketch “sketchy”?

Michael Sagan
Trek Bicycles

Time Trials Bike

2003

Quick
Disposable
Plentiful
Low-resolution

Melissa Densmore, UCT CSC2002S

+ 16

Tips for sketching

◼ Don’t stress about quality or if you can draw a straight line, stick figures
are totally fine!

◼ Use squiggles instead of text, boxes instead of pictures

◼ Don’t think, just draw (fast) – give yourself a time limit

◼ You don’t have to finish every picture!

Melissa Densmore, UCT CSC2002S

 17

Melissa Densmore, UCT CSC2002S

+ 18

Activity – do a Crazy Eights Sketch

Sketch some ideas for a find-a-room app

Melissa Densmore, UCT CSC2002S

+ 19

3C: Prototypes
Melissa Densmore, UCT CSC2002S
+ 20

Prototype

◼ Build something tangible

so you can get feedback

◼ Experiment with alternative

designs (cheaply!)

◼ Fix problems with concept and

flow before code is written

◼ Keep the design centered on

the user!

Melissa Densmore, UCT CSC2002S

+ 21

Types of Prototypes

low fidelity high fidelity

manual interactive

Melissa Densmore, UCT CSC2002S

+ 22

Tracing/Overlaying

Melissa Densmore, UCT CSC2002S

+ 23

Overlaying - windows

Melissa Densmore, UCT CSC2002S

+ 24

State Transition

Melissa Densmore, UCT CSC2002S

 25

+
The Graduate (1967)
Movie Storyboards
Melissa Densmore, UCT Katz 1991 CSC2002S
 26

By s250401
http://www.storyboardthat.com/userboards/s250401/storyboard-android-device
Melissa Densmore, UCT CSC2002S
 27

Scott McCloud. Reinventing Comics.

Melissa Densmore, UCT CSC2002S

+ 28

Tangible Materials: Lo-Fi

◼ Heavy white paper (large!)

◼ Index cards

◼ Post-it Notes

◼ Tape, gluestick, correction

tape

◼ Pens & Markers

◼ Transparencies, tracing paper

◼ Playdough, Legos

◼ Scissors, x-acto knives

Melissa Densmore, UCT CSC2002S

The Leimert Phone Co. IML 404: Tactical Media
http://iml-tactical-media.tumblr.com/post/75933707632/week-5-rapid-prototyping-readings-march 29

Melissa Densmore, UCT CSC2002S

+ 30

Digital Materials

Melissa Densmore, UCT CSC2002S

+ 31

Constructing the Prototype

◼ Set a deadline
◼ Don’t think too long – build it!

◼ Draw a window frame on large paper

◼ Draw larger – but keep the same aspect ratio

◼ Put different screen regions on cards

◼ Anything that moves, changes
appears/disappears
◼ Use squiggles to indicate text if necessary
◼ Ready response for any user action
◼ Pull-down menus
◼ Screen transitions
Miiverse cardboard prototype
Kazuyuki Motoyama
Nintendo
https://www.smashingmagazine.com/2014/10/
the-skeptics-guide-to-low-fidelity-prototyping/

◼ Use photocopier to make many versions

Melissa Densmore, UCT CSC2002S

 32

Vivien J. Lim, The CraftFinder: Unconventional Search

http://vivienlim.net/projects/the-craftfinder-unconventional-search/

Melissa Densmore, UCT CSC2002S

+ 33

Paper Prototype in Action

https://www.youtube.com/watch?v=B7M0fVXdovM

Melissa Densmore, UCT CSC2002S

+ 34

Interactive Digital Prototypes

◼ InVision

◼ Sketch

◼ Proto.io

◼ Powerpoint/Keynote

◼ FluidUI

◼ … and tons others

Melissa Densmore, UCT CSC2002S

+ 35

Current Work

◼ Donor Mother Chatroom

Melissa Densmore, UCT CSC2002S

+ 36

Why not just Hi-fi?

◼ Distort Perceptions of User

◼ Formal representation indicates
“finished” nature
◼ People comment on color, fonts,
alignment

◼ Discourages major changes

◼ Testers don’t want to change a “finished”
design
◼ Designers don’t want to lose effort put
into the design

Melissa Densmore, UCT CSC2002S